From c272b4f9371e3681fd19fdf48cc4447069fb5a31 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Thu, 8 May 2014 16:32:46 +0200
Subject: [PATCH] [WO-323] Render HTML content in sandboxed iframe

---
 src/js/controller/read.js | 14 +++++++++-----
 src/sass/views/_read.scss | 27 +++++++++++++++++----------
 src/tpl/read.html         | 37 +++++++++++++++++++++++--------------
 3 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/js/controller/read.js b/src/js/controller/read.js
index 8a054ab..da173fb 100644
--- a/src/js/controller/read.js
+++ b/src/js/controller/read.js
@@ -330,11 +330,15 @@ define(function(require) {
         };
     });
 
-    ngModule.directive('frameLoad', function() {
-        return function(scope, elm) {
-            elm.bind('load', function() {
-                var frame = elm[0];
-                frame.height = frame.contentWindow.document.body.scrollHeight + 'px';
+    ngModule.directive('frameLoad', function($parse, $sce, $timeout) {
+        return function(scope, elm, attrs) {
+            scope.$watch(attrs.frameLoad, function(value) {
+                scope.html = undefined;
+                if (value) {
+                    $timeout(function() {
+                        scope.html = $sce.trustAsHtml(value);
+                    });
+                }
             });
         };
     });
diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss
index 7ebb8de..d9694c5 100644
--- a/src/sass/views/_read.scss
+++ b/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;
diff --git a/src/tpl/read.html b/src/tpl/read.html
index ce0dcba..f3d7862 100644
--- a/src/tpl/read.html
+++ b/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)">
-    <div ng-switch-when="true">
-
-      <!-- Render conversation as recursive text nodes -->
-      <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>
+  <!-- Show working spinner -->
+  <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.loadingBody === true || state.mailList.selected.body === undefined || state.mailList.selected.body === null) ? 'Loading...' : 'Decrypting...'"></strong>
+      <strong ng-bind="(state.mailList.selected.decryptingBody) ? 'Decrypting...' : 'Loading...' "></strong>
     </div><!--/.working-->
+  </div><!--/.working-wrapper-->
+
+  <!-- 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><!--/.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-->
+
+</div><!--/.view-read-->
\ No newline at end of file