implement sandboxing of html emails in an iframe

src/js/app.js

@@ -12,7 +12,7 @@ require([
 ], function(angular, LoginCtrl, MailListCtrl, WriteCtrl, NavigationCtrl) {
     'use strict';
 
-    var app = angular.module('mail', ['ngRoute', 'ngTouch', 'write']);
+    var app = angular.module('mail', ['ngRoute', 'ngTouch', 'write', 'read']);
 
     // set router paths
     app.config(function($routeProvider) {

src/js/controller/mail-list.js

@@ -20,7 +20,8 @@ define(function(require) {
             if (!email) {
                 return;
             }
-            if (typeof email.body === 'string') {
+            // split text only emails into parts for easier rendering
+            if (!email.html && typeof email.body === 'string') {
                 email.bodyDisplayParts = email.body.split('\n');
             }
             $scope.selected = email;
@@ -205,7 +206,7 @@ define(function(require) {
     };
 
     function createDummyMails(callback) {
-        var Email = function(unread, attachments, answered) {
+        var Email = function(unread, attachments, answered, html) {
             this.uid = '1';
             this.from = [{
                 name: 'Whiteout Support',
@@ -217,6 +218,7 @@ define(function(require) {
             this.attachments = (attachments) ? [true] : undefined;
             this.unread = unread;
             this.answered = answered;
+            this.html = html;
             this.sentDate = new Date('Thu Sep 19 2013 20:41:23 GMT+0200 (CEST)');
             this.subject = "Welcome Max"; // Subject line
             this.body = "Hi Max,\n\n" +
@@ -225,7 +227,7 @@ define(function(require) {
                 "Best regards\nYour whiteout team"; // plaintext body
         };
 
-        var dummys = [new Email(true, true), new Email(true), new Email(false, true, true), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false)];
+        var dummys = [new Email(true, true), new Email(true, false, false, true), new Email(false, true, true), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false), new Email(false)];
 
         callback(dummys);
     }

src/js/controller/navigation.js

@@ -1,7 +1,8 @@
 define(function(require) {
     'use strict';
 
-    var folders = require('js/app-config').config.gmail.folders;
+    var angular = require('angular'),
+        folders = require('js/app-config').config.gmail.folders;
 
     var NavigationCtrl = function($scope) {
         $scope.navOpen = false;
@@ -40,5 +41,20 @@ define(function(require) {
         };
     };
 
+    //
+    // Directives
+    //
+
+    var ngModule = angular.module('read', []);
+    ngModule.directive('frameLoad', function() {
+        return function(scope, elm) {
+            var frame;
+            elm.bind('load', function() {
+                frame = elm[0];
+                frame.height = frame.contentWindow.document.body.scrollHeight + 'px';
+            });
+        };
+    });
+
     return NavigationCtrl;
 });

src/sass/views/_read.scss

@@ -1,8 +1,13 @@
 .view-read {
     margin: 0px;
     padding: 10px 15px;
+    height: 100%;
     color: $color-grey-dark;
 
+    ::-webkit-scrollbar {
+        width: 0px;
+    }
+
     .headers {
         p {
             margin: 0px;
@@ -40,7 +45,14 @@
     }
 
     .body {
+        padding-bottom: 200px;
         line-height: 1.5em;
+        height: 100%;
+        overflow-y: scroll;
+    }
+
+    iframe {
+        width: 100%;
     }
 }
 

src/tpl/read.html

@@ -19,11 +19,15 @@
 
   <div class="seperator-line"></div>
 
-  <div class="body">
+  <div class="body" ng-switch="selected.html === true">
+    <!-- sandbox untrusted markup from html emails in an iframe. The "allow-same-origin" attribute is required to dynamically adjust the height of the iframe. Script execution is not allowed. -->
+    <iframe ng-switch-when="true" sandbox="allow-same-origin" srcdoc="{{selected.body}}" seamless frame-load></iframe>
+
+    <!-- Render parts of a text only email in paragraphs for easier styling -->
     <p ng-repeat="part in selected.bodyDisplayParts track by $index">
       <span ng-switch="part.length !== 0">
         <span ng-switch-when="true">{{part}}</span>
       </span>
     </p>
-  </div><!--/.mail-text-body-->
+  </div><!--/.body-->
 </div><!--/.view-read-->