[WO-323] Render HTML content in sandboxed iframe

src/js/controller/read.js

@@ -330,11 +330,15 @@ define(function(require) {
         };
     });
 
-    ngModule.directive('frameLoad', function() {
+    ngModule.directive('frameLoad', function($parse, $sce, $timeout) {
-        return function(scope, elm) {
+        return function(scope, elm, attrs) {
-            elm.bind('load', function() {
+            scope.$watch(attrs.frameLoad, function(value) {
-                var frame = elm[0];
+                scope.html = undefined;
-                frame.height = frame.contentWindow.document.body.scrollHeight + 'px';
+                if (value) {
+                    $timeout(function() {
+                        scope.html = $sce.trustAsHtml(value);
+                    });
+                }
             });
         };
     });

src/sass/views/_read.scss

@@ -87,13 +87,9 @@
         }
     }
 
-    .body {
+    .working-wrapper {
         flex-grow: 1;
         position: relative;
-        margin-top: 1.75em;
-        line-height: 1.5em;
-        overflow-y: scroll;
-        user-select: text;
 
         .working {
             @include scut-vcenter-tt;
@@ -106,6 +102,22 @@
                 vertical-align: middle;
             }
         }
+    }
+
+    iframe {
+        flex-grow: 1;
+        margin-top: 1.75em;
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+
+    .body {
+        flex-grow: 1;
+        margin-top: 1.75em;
+        line-height: 1.5em;
+        overflow-y: scroll;
+        user-select: text;
 
         .line {
             cursor: text;
@@ -147,11 +159,6 @@
         }
     }
 
-    iframe {
-        flex-grow: 1;
-        width: 100%;
-    }
-
     .reply-selection {
         .popover-content {
             padding: 0;

src/tpl/read.html

@@ -1,4 +1,5 @@
 <div class="view-read" ng-controller="ReadCtrl">
+
   <div class="headers">
     <div class="controls">
       <button ng-click="state.mailList.remove(state.mailList.selected)" class="btn-icon" title="Delete mail">&#xe005;</button>
@@ -43,21 +44,28 @@
     <div ng-switch-default class="seperator-line"></div>
   </div><!--/.attachments-wrapper-->
 
-  <div class="body" ng-switch="state.mailList.selected === undefined || (state.mailList.selected.encrypted === false && state.mailList.selected.body !== undefined) || (state.mailList.selected.encrypted === true && state.mailList.selected.decrypted === true)">
+  <!-- Show working spinner -->
-    <div ng-switch-when="true">
+  <div class="working-wrapper"
+    ng-if="!html && state.mailList.selected !== undefined && (state.mailList.selected.body === undefined || (state.mailList.selected.encrypted && !state.mailList.selected.decrypted))">
+    <div class="working">
+      <span class="spinner"></span>
+      <strong ng-bind="(state.mailList.selected.decryptingBody) ? 'Decrypting...' : 'Loading...' "></strong>
+    </div><!--/.working-->
+  </div><!--/.working-wrapper-->
 
-      <!-- Render conversation as recursive text nodes -->
+  <!-- Render html body in sandboxed iframe -->
+  <iframe ng-show="html" sandbox srcdoc="{{html}}"
+    frame-load="state.mailList.selected.html">
+  </iframe>
+
+  <!-- Render text body as colored conversation in recursive text nodes -->
+  <div class="body"
+    ng-if="!html && (state.mailList.selected === undefined || (state.mailList.selected.encrypted === false && state.mailList.selected.body !== undefined) || (state.mailList.selected.encrypted === true && state.mailList.selected.decrypted === true))">
     <div ng-include="'tpl/text-node.html'"
       ng-if="node !== undefined"
       ng-repeat="child in node.children track by $index"
       onload="node = child">
     </div>
-
-    </div><!--/ng-switch-when-->
-    <div class="working" ng-switch-default>
-      <span class="spinner"></span>
-      <strong ng-bind="(state.mailList.selected.loadingBody === true || state.mailList.selected.body === undefined || state.mailList.selected.body === null) ? 'Loading...' : 'Decrypting...'"></strong>
-    </div><!--/.working-->
   </div><!--/.body-->
 
   <!-- popovers -->
@@ -74,4 +82,5 @@
       <li><button data-icon="&#xe015;" ng-click="state.writer.write(state.mailList.selected, null, true)">Forward</button></li>
     </ul>
   </div><!--/.reply-selection-->
+
 </div><!--/.view-read-->