Issue #617: Add sandbox to user-agent

4 files changed, 57 insertions, 2 deletions

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/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index dfc57585..d15788bb 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -71,7 +71,51 @@ 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'});
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/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}}