diff options
22 files changed, 288 insertions, 19 deletions
diff --git a/service/pixelated/resources/root_resource.py b/service/pixelated/resources/root_resource.py index 86435d89..109dc08e 100644 --- a/service/pixelated/resources/root_resource.py +++ b/service/pixelated/resources/root_resource.py @@ -20,6 +20,7 @@ from string import Template from pixelated.resources import BaseResource, UnAuthorizedResource from pixelated.resources.attachments_resource import AttachmentsResource +from pixelated.resources.sandbox_resource import SandboxResource from pixelated.resources.contacts_resource import ContactsResource from pixelated.resources.features_resource import FeaturesResource from pixelated.resources.feedback_resource import FeedbackResource @@ -75,6 +76,7 @@ class RootResource(BaseResource): return csrf_input and csrf_input == xsrf_token def initialize(self, portal=None, disclaimer_banner=None): + self._child_resources.add('sandbox', SandboxResource(self._static_folder)) self._child_resources.add('assets', File(self._static_folder)) self._child_resources.add('keys', KeysResource(self._services_factory)) self._child_resources.add(AttachmentsResource.BASE_URL, AttachmentsResource(self._services_factory)) diff --git a/service/pixelated/resources/sandbox_resource.py b/service/pixelated/resources/sandbox_resource.py new file mode 100644 index 00000000..28e8c9be --- /dev/null +++ b/service/pixelated/resources/sandbox_resource.py @@ -0,0 +1,34 @@ +# +# Copyright (c) 2016 ThoughtWorks, Inc. +# +# Pixelated is free software: you can redistribute it and/or modify +# it under the terms of the GNU Affero General Public License as published by +# the Free Software Foundation, either version 3 of the License, or +# (at your option) any later version. +# +# Pixelated is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU Affero General Public License for more details. +# +# You should have received a copy of the GNU Affero General Public License +# along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + +from twisted.web.static import File + + +class SandboxResource(File): + CSP_HEADER_VALUES = "sandbox allow-popups allow-scripts;" \ + "default-src 'self';" \ + "style-src *;" \ + "script-src *;" \ + "font-src *;" \ + "img-src *;" \ + "object-src 'none';" \ + "connect-src 'none';" + + def render_GET(self, request): + request.setHeader('Content-Security-Policy', self.CSP_HEADER_VALUES) + request.setHeader('X-Content-Security-Policy', self.CSP_HEADER_VALUES) + request.setHeader('X-Webkit-CSP', self.CSP_HEADER_VALUES) + return super(SandboxResource, self).render_GET(request) diff --git a/service/test/functional/features/steps/mail_view.py b/service/test/functional/features/steps/mail_view.py index 82fc28af..c0e9e22b 100644 --- a/service/test/functional/features/steps/mail_view.py +++ b/service/test/functional/features/steps/mail_view.py @@ -25,8 +25,11 @@ def impl(context, subject): @then('I see that the body reads \'{expected_body}\'') def impl(context, expected_body): - e = find_element_by_css_selector(context, '#mail-view .bodyArea') + find_element_by_css_selector(context, '#read-sandbox') + context.browser.switch_to_frame('read-sandbox') + e = find_element_by_css_selector(context, 'body') assert e.text == expected_body + context.browser.switch_to_default_content() @then('that email has the \'{tag}\' tag') diff --git a/service/test/unit/resources/test_sandbox_resource.py b/service/test/unit/resources/test_sandbox_resource.py new file mode 100644 index 00000000..3db43e12 --- /dev/null +++ b/service/test/unit/resources/test_sandbox_resource.py @@ -0,0 +1,38 @@ +import os +import unittest + +from twisted.internet import defer +from twisted.web.test.requesthelper import DummyRequest + +from pixelated.resources.sandbox_resource import SandboxResource +from test.unit.resources import DummySite + + +class TestSandBoxResource(unittest.TestCase): + def setUp(self): + static_folder = os.path.dirname(os.path.abspath(__file__)) + self.resource = SandboxResource(static_folder) + self.resource.isLeaf = True + self.web = DummySite(self.resource) + + @defer.inlineCallbacks + def test_render_GET_should_set_sandbox_csp_header(self): + request = DummyRequest(['/sandbox']) + request.method = 'GET' + request.isSecure = lambda: True + request.redirect = lambda _: 'irrelevant' + + expected_csp_headers = "sandbox allow-popups allow-scripts;" \ + "default-src 'self';" \ + "style-src *;" \ + "script-src *;" \ + "font-src *;" \ + "img-src *;" \ + "object-src 'none';" \ + "connect-src 'none';" + + yield self.web.get(request) + + self.assertEquals(expected_csp_headers, request.outgoingHeaders.get('X-Content-Security-Policy'.lower())) + self.assertEquals(expected_csp_headers, request.outgoingHeaders.get('Content-Security-Policy'.lower())) + self.assertEquals(expected_csp_headers, request.outgoingHeaders.get('X-Webkit-CSP'.lower())) diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 2d35662c..107e9102 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -100,6 +100,7 @@ <script src="assets/bower_components/foundation/js/foundation/foundation.reveal.js" ></script> <script src="assets/bower_components/foundation/js/foundation/foundation.offcanvas.js"></script> <script src="assets/js/foundation/initialize_foundation.js"></script> +<script src="assets/bower_components/iframe-resizer/js/iframeResizer.min.js"></script> <script src="assets/bower_components/requirejs/require.js" data-main="assets/js/main.js"></script> <!--usemin_end--> diff --git a/web-ui/app/js/helpers/sanitizer.js b/web-ui/app/js/helpers/sanitizer.js index eea1f0f7..443e8602 100644 --- a/web-ui/app/js/helpers/sanitizer.js +++ b/web-ui/app/js/helpers/sanitizer.js @@ -23,6 +23,16 @@ define(['DOMPurify', 'he'], function (DOMPurify, he) { */ var sanitizer = {}; + sanitizer.whitelist = [{ + // highlight tag open + pre: '<em class="search-highlight">', + post: '<em class="search-highlight">' + }, { + // highlight tag close + pre: '</em>', + post: '</em>' + }]; + /** * Adds html line breaks to a plaintext with line breaks (incl carriage return) * @@ -55,16 +65,24 @@ define(['DOMPurify', 'he'], function (DOMPurify, he) { }; /** - * Runs a given dirty body through he, thereby encoding everything - * as HTML entities. - * - * @param {string} dirtyBody The unsanitized string - * @return {string} Safe-to-display HTML string - */ + * Runs a given dirty body through he, thereby encoding everything + * as HTML entities. + * + * @param {string} dirtyBody The unsanitized string + * @return {string} Safe-to-display HTML string + */ sanitizer.purifyText = function (dirtyBody) { - return he.encode(dirtyBody, { + var escapedBody = he.encode(dirtyBody, { encodeEverything: true }); + + this.whitelist.forEach(function(entry) { + while (escapedBody.indexOf(entry.pre) > -1) { + escapedBody = escapedBody.replace(entry.pre, entry.post); + } + }); + + return escapedBody; }; /** diff --git a/web-ui/app/js/mail_list/ui/mail_list.js b/web-ui/app/js/mail_list/ui/mail_list.js index 18d36049..0f6c4fb5 100644 --- a/web-ui/app/js/mail_list/ui/mail_list.js +++ b/web-ui/app/js/mail_list/ui/mail_list.js @@ -81,7 +81,6 @@ define( this.renderMails = function (mails) { _.each(mails, this.appendMail, this); this.trigger(document, events.search.highlightResults, {where: '#mail-list'}); - this.trigger(document, events.search.highlightResults, {where: '.bodyArea'}); this.trigger(document, events.search.highlightResults, {where: '.subjectArea'}); this.trigger(document, events.search.highlightResults, {where: '.msg-header .recipients'}); }; diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js index dfc57585..d952fed7 100644 --- a/web-ui/app/js/mail_view/ui/mail_view.js +++ b/web-ui/app/js/mail_view/ui/mail_view.js @@ -71,9 +71,52 @@ define( attachments: attachments })); - this.$node.find('.bodyArea').html(viewHelpers.formatMailBody(data.mail)); + var $iframe = $("#read-sandbox"); + var iframe = $iframe[0]; + + var content = viewHelpers.formatMailBody(data.mail); + + iframe.onload = function() { + // use iframe-resizer to dynamically adapt iframe size to its content + var config = { + resizedCallback: scaleToFit, + checkOrigin: false + }; + $iframe.iFrameResize(config); + + // transform scale iframe to fit container width + // necessary if iframe is wider than container + function scaleToFit() { + var parentWidth = $iframe.parent().width(); + var w = $iframe.width(); + var scale = 'none'; + + // only scale html mails + var mail = data.mail; + if (mail && mail.htmlBody && (w > parentWidth)) { + scale = parentWidth / w; + scale = 'scale(' + scale + ',' + scale + ')'; + } + + $iframe.css({ + '-webkit-transform-origin': '0 0', + '-moz-transform-origin': '0 0', + '-ms-transform-origin': '0 0', + 'transform-origin': '0 0', + '-webkit-transform': scale, + '-moz-transform': scale, + '-ms-transform': scale, + 'transform': scale + }); + } + + iframe.contentWindow.postMessage({ + html: content + }, '*'); + }; + + - this.trigger(document, events.search.highlightResults, {where: '.bodyArea'}); this.trigger(document, events.search.highlightResults, {where: '.subjectArea'}); this.trigger(document, events.search.highlightResults, {where: '.msg-header .recipients'}); this.trigger(document, events.ui.replyBox.showReplyContainer); @@ -214,9 +257,17 @@ define( this.trigger(events.mail.want, {mail: this.attr.ident, caller: this}); }; + this.highlightMailContent = function (event, data) { + // we can't directly manipulate the iFrame to highlight the content + // so we need to take an indirection where we directly manipulate + // the mail content to accomodate the highlighting + this.trigger(document, events.mail.highlightMailContent, data); + }; + this.after('initialize', function () { - this.on(this, events.mail.here, this.displayMail); this.on(this, events.mail.notFound, this.openNoMessageSelectedPane); + this.on(this, events.mail.here, this.highlightMailContent); + this.on(document, events.mail.display, this.displayMail); this.on(document, events.dispatchers.rightPane.clear, this.teardown); this.on(document, events.mail.tags.updated, this.tagsUpdated); this.on(document, events.mail.deleted, this.mailDeleted); diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js index 7a0dbf9d..ad15e76e 100644 --- a/web-ui/app/js/page/events.js +++ b/web-ui/app/js/page/events.js @@ -121,6 +121,8 @@ define(function () { mail: { here: 'mail:here', want: 'mail:want', + display: 'mail:display', + highlightMailContent: 'mail:highlightMailContent', send: 'mail:send', send_failed: 'mail:send_failed', sent: 'mail:sent', diff --git a/web-ui/app/js/sandbox.js b/web-ui/app/js/sandbox.js new file mode 100644 index 00000000..f9e708d6 --- /dev/null +++ b/web-ui/app/js/sandbox.js @@ -0,0 +1,9 @@ +(function () { + 'use strict'; + + window.onmessage = function (e) { + if (e.data.html) { + document.body.innerHTML = e.data.html; + } + }; +})(); diff --git a/web-ui/app/js/search/results_highlighter.js b/web-ui/app/js/search/results_highlighter.js index 9e3ba167..831be0cd 100644 --- a/web-ui/app/js/search/results_highlighter.js +++ b/web-ui/app/js/search/results_highlighter.js @@ -40,6 +40,7 @@ define( var domIdent = data.where; if(this.attr.keywords) { _.each(this.attr.keywords, function (keyword) { + keyword = escapeRegExp(keyword); $(domIdent).highlightRegex(new RegExp(keyword, 'i'), { tagType: 'em', className: 'search-highlight' @@ -57,12 +58,40 @@ define( }); }; + this.highlightString = function (string) { + _.each(this.attr.keywords, function (keyword) { + keyword = escapeRegExp(keyword); + var regex = new RegExp('(' + keyword + ')', 'ig'); + string = string.replace(regex, '<em class="search-highlight">$1</em>'); + }); + return string; + }; + + /* + * Alter data.mail.textPlainBody to highlight each of this.attr.keywords + * and pass it back to the mail_view when done + */ + this.highlightMailContent = function(ev, data){ + var mail = data.mail; + mail.textPlainBody = this.highlightString(mail.textPlainBody); + this.trigger(document, events.mail.display, data); + }; + + /* + * Escapes the special charaters used regular expressions that + * would cause problems with strings in the RegExp constructor + */ + function escapeRegExp(string){ + return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + } + this.after('initialize', function () { this.on(document, events.search.perform, this.getKeywordsSearch); this.on(document, events.ui.tag.select, this.clearHighlights); this.on(document, events.search.resetHighlight, this.clearHighlights); this.on(document, events.search.highlightResults, this.highlightResults); + this.on(document, events.mail.highlightMailContent, this.highlightMailContent); }); } }); diff --git a/web-ui/app/sandbox.html b/web-ui/app/sandbox.html new file mode 100644 index 00000000..13a86f25 --- /dev/null +++ b/web-ui/app/sandbox.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <link href="css/opensans.css" rel="stylesheet" type="text/css"> + <link href="css/sandbox.css" rel="stylesheet" type="text/css"> + + <!--usemin_start--> + <script src="js/sandbox.js"></script> + <script src="bower_components/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script> + <!--usemin_end--> +</head> + +<body></body> + +</html> diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss index 2c079408..236a7c7c 100644 --- a/web-ui/app/scss/_read.scss +++ b/web-ui/app/scss/_read.scss @@ -66,6 +66,13 @@ .bodyArea { padding: 10px 30px 0 30px; + box-sizing: border-box; + + iframe { + box-sizing: inherit; + border: none; + width: 100%; + } } .attachmentsAreaWrap { diff --git a/web-ui/app/scss/sandbox.scss b/web-ui/app/scss/sandbox.scss new file mode 100644 index 00000000..3cb4c441 --- /dev/null +++ b/web-ui/app/scss/sandbox.scss @@ -0,0 +1,20 @@ +$search-highlight: #FFEF29; + +body { + font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; + font-size: 13px; + line-height: 1.2em; + background: white; + color: #333; + padding: 0; + margin: 0; + font-weight: normal; + -webkit-font-smoothing: antialiased; + font-style: normal; + box-sizing: border-box; + word-wrap: break-word; +} + +.search-highlight { + background-color: $search-highlight; +} diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs index f9ec084a..3ff109e9 100644 --- a/web-ui/app/templates/mails/full_view.hbs +++ b/web-ui/app/templates/mails/full_view.hbs @@ -64,6 +64,7 @@ </header> <div class="bodyArea column large-12"> + <iframe id="read-sandbox" sandbox="allow-popups allow-scripts" src="sandbox/sandbox.html" scrolling="no"></iframe> </div> {{#if attachments}} diff --git a/web-ui/app/templates/search/search_trigger.hbs b/web-ui/app/templates/search/search_trigger.hbs index 2261d154..f2c410a4 100644 --- a/web-ui/app/templates/search/search_trigger.hbs +++ b/web-ui/app/templates/search/search_trigger.hbs @@ -1,3 +1,3 @@ <form> - <input type="search" placeholder="{{t 'search-placeholder'}}"></input> + <input type="search" pattern="[a-zA-Z0-9\s]{3,}" placeholder="{{t 'search-placeholder'}}"></input> </form> diff --git a/web-ui/bower.json b/web-ui/bower.json index 263ac2e4..018a57c4 100644 --- a/web-ui/bower.json +++ b/web-ui/bower.json @@ -17,7 +17,8 @@ "jquery-file-upload": "~9.11.2", "jquery-ui": "~1.11.4", "DOMPurify": "~0.7.4", - "he": "~0.5.0" + "he": "~0.5.0", + "iframe-resizer": "~3.5.3" }, "devDependencies": { "handlebars": "2.0.0", diff --git a/web-ui/config/package.sh b/web-ui/config/package.sh index 9b6bc66c..0bd82367 100644 --- a/web-ui/config/package.sh +++ b/web-ui/config/package.sh @@ -28,16 +28,24 @@ mkdir -p dist ./go handlebars ./go imagemin ./go minify_html +./go minify_sandbox ./go add_git_version ./go buildmain # copy files cd app -cp --parents 404.html fonts/* locales/**/* bower_components/font-awesome/css/font-awesome.min.css bower_components/jquery-file-upload/css/jquery.fileupload.css bower_components/font-awesome/fonts/* ../dist +cp --parents \ +404.html \ +fonts/* \ +locales/**/* \ +bower_components/font-awesome/css/font-awesome.min.css \ +bower_components/jquery-file-upload/css/jquery.fileupload.css \ +bower_components/font-awesome/fonts/* \ +../dist cd - -# concat js files and minify +# concat js files and minify for app.min.js cat \ app/bower_components/modernizr/modernizr.js \ app/bower_components/lodash/dist/lodash.js \ @@ -51,6 +59,14 @@ app/bower_components/foundation/js/foundation.js \ app/bower_components/foundation/js/foundation/foundation.reveal.js \ app/bower_components/foundation/js/foundation/foundation.offcanvas.js \ app/js/foundation/initialize_foundation.js \ +app/bower_components/iframe-resizer/js/iframeResizer.min.js \ .tmp/app.concatenated.js > dist/app.js node_modules/.bin/minify dist/app.js > dist/app.min.js rm dist/app.js + +# concat js files and minify for sandbox.min.js +cat \ +app/js/sandbox.js \ +app/bower_components/iframe-resizer/js/iframeResizer.contentWindow.min.js > dist/sandbox.js +node_modules/.bin/minify dist/sandbox.js > dist/sandbox.min.js +rm dist/sandbox.js diff --git a/web-ui/package.json b/web-ui/package.json index a49e32d1..0e8b9262 100644 --- a/web-ui/package.json +++ b/web-ui/package.json @@ -38,6 +38,7 @@ "package": "/bin/bash config/package.sh", "imagemin": "node config/imagemin.js", "minify_html": "node_modules/.bin/html-minifier app/index.html --collapse-whitespace | sed 's|<!--usemin_start-->.*<!--usemin_end-->|<script src=\"assets/app.min.js\" type=\"text/javascript\"></script>|' > dist/index.html", + "minify_sandbox": "node_modules/.bin/html-minifier app/sandbox.html --collapse-whitespace | sed 's|<!--usemin_start-->.*<!--usemin_end-->|<script src=\"sandbox.min.js\" type=\"text/javascript\"></script>|' > dist/sandbox.html", "add_git_version": "/bin/bash config/add_git_version.sh" } } diff --git a/web-ui/test/spec/helpers/sanitizer.spec.js b/web-ui/test/spec/helpers/sanitizer.spec.js index acd4b2b2..b553583e 100644 --- a/web-ui/test/spec/helpers/sanitizer.spec.js +++ b/web-ui/test/spec/helpers/sanitizer.spec.js @@ -25,6 +25,12 @@ define(['helpers/sanitizer'], function (sanitizer) { var output = sanitizer.purifyText('123<a>asd</a>'); expect(output).toEqual(expectedOutput); }); + + it('should leave highlighted text untouched', function () { + var expectedOutput = '<em class="search-highlight">123<a>asd</a></em>'; + var output = sanitizer.purifyText('<em class="search-highlight">123<a>asd</a></em>'); + expect(output).toEqual(expectedOutput); + }); }); describe('sanitizer.sanitize', function () { diff --git a/web-ui/test/spec/mail_view/ui/mail_view.spec.js b/web-ui/test/spec/mail_view/ui/mail_view.spec.js index 9ed56023..9f1114a7 100644 --- a/web-ui/test/spec/mail_view/ui/mail_view.spec.js +++ b/web-ui/test/spec/mail_view/ui/mail_view.spec.js @@ -21,6 +21,12 @@ describeComponent('mail_view/ui/mail_view', function () { expect(spyEvent.mostRecentCall.data.mail).toEqual(1); }); + it('triggers mail.highlightMailContent when receiving mail.here', function () { + var hightlightEvent = spyOnEvent(document,Pixelated.events.mail.highlightMailContent); + this.component.trigger(this.component, Pixelated.events.mail.here); + expect(hightlightEvent).toHaveBeenTriggeredOn(document); + }); + it('triggers dispatchers.rightPane.openNoMessageSelected when getting mail.notFound', function () { var openNoMessageSelectedEvent = spyOnEvent(document, Pixelated.events.dispatchers.rightPane.openNoMessageSelected); diff --git a/web-ui/test/spec/search/results_highlighter.spec.js b/web-ui/test/spec/search/results_highlighter.spec.js index cfb61e9c..13131a8e 100644 --- a/web-ui/test/spec/search/results_highlighter.spec.js +++ b/web-ui/test/spec/search/results_highlighter.spec.js @@ -1,9 +1,11 @@ describeComponent('search/results_highlighter', function () { 'use strict'; - it('highlights words or parts of words that match with the keywords given', function () { + beforeEach(function () { this.setupComponent('<div id="text">Any one seeing too many open bugs</div>'); + }); + it('highlights words or parts of words that match with the keywords given', function () { this.component.attr = {keywords: ['any']}; this.component.highlightResults(event, {where: '#text'}); @@ -12,9 +14,15 @@ describeComponent('search/results_highlighter', function () { expect(highlightedWords).toEqual(2); }); - it('resets highlights when a new search is performed', function() { - this.setupComponent('<div id="text">Any one seeing too many open bugs</div>'); + it('highlights a string with the keywords given', function () { + this.component.attr = {keywords: ['foo']}; + var expectedString = 'the <em class="search-highlight">foo</em> bar'; + var string = this.component.highlightString('the foo bar'); + + expect(string).toEqual(expectedString); + }); + it('resets highlights when a new search is performed', function() { this.component.attr = {keywords: ['any']}; this.component.highlightResults(event, {where: '#text'}); $(document).trigger(Pixelated.events.search.resetHighlight); |