From 8c632fb8853deafcd135f91f72e7405c504fb953 Mon Sep 17 00:00:00 2001
From: Tankred Hase <tankred@whiteout.io>
Date: Sat, 5 Oct 2013 13:50:24 +0200
Subject: [PATCH] implement sandboxing of html emails in an iframe

---
 src/js/app.js                   |  2 +-
 src/js/controller/mail-list.js  |  8 +++++---
 src/js/controller/navigation.js | 18 +++++++++++++++++-
 src/sass/views/_read.scss       | 12 ++++++++++++
 src/tpl/read.html               |  8 ++++++--
 5 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/js/app.js b/src/js/app.js
index 6537932..137e6d2 100644
--- a/src/js/app.js
+++ b/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) {
diff --git a/src/js/controller/mail-list.js b/src/js/controller/mail-list.js
index 7637a15..270d64f 100644
--- a/src/js/controller/mail-list.js
+++ b/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);
     }
diff --git a/src/js/controller/navigation.js b/src/js/controller/navigation.js
index a5a4882..b43e87e 100644
--- a/src/js/controller/navigation.js
+++ b/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;
 });
\ No newline at end of file
diff --git a/src/sass/views/_read.scss b/src/sass/views/_read.scss
index 5ac1c10..677ae75 100644
--- a/src/sass/views/_read.scss
+++ b/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%;
     }
 }
 
diff --git a/src/tpl/read.html b/src/tpl/read.html
index fedb4eb..388b48b 100644
--- a/src/tpl/read.html
+++ b/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-->
\ No newline at end of file