From 32cc6b10e83adbb0d0a477472a34b25dc007a5cb Mon Sep 17 00:00:00 2001
From: Tankred Hase <mail@tankredhase.de>
Date: Wed, 5 Jun 2013 18:02:00 +0200
Subject: [PATCH] rendering mail content in 2nd sandboxed iframe works

---
 src/css/styles.css       | 22 ++++++++++++++++++++++
 src/js/view/read-view.js | 23 ++++++++++++-----------
 src/manifest.json        |  4 ++--
 src/tpl/read.html        |  8 ++++----
 4 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index 4977e38..61d611f 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -51,4 +51,26 @@ div#sandboxDiv iframe {
     right: 0;
     height: 100%;
     width: 100%;
+}
+
+div#readViewContent ul {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+li#bodyItem {
+	background-color: #FFFFFF;
+}
+
+#mailContentFrame {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2000px;
+    width: 100%;
+    font-size: 8pt;
+    font-weight: normal;
 }
\ No newline at end of file
diff --git a/src/js/view/read-view.js b/src/js/view/read-view.js
index eddd951..fe0ed48 100644
--- a/src/js/view/read-view.js
+++ b/src/js/view/read-view.js
@@ -48,19 +48,20 @@
 
 			} else if (tryHtml && emailBody.indexOf('</') !== -1) {
 				// render html email inside a sandboxed iframe
-				var iframe = page.find('#idMailContent'),
-					iframeDoc = iframe[0].contentDocument || iframe[0].contentWindow.document;
-
+				var iframe = page.find('#mailContentFrame');
 				iframe.load(function() {
-					// resize
-					var newheight = iframeDoc.body.scrollHeight;
-					var newwidth = iframeDoc.body.scrollWidth;
-					iframe[0].height = (newheight) + 'px';
-					iframe[0].width = (newwidth) + 'px';
-				});
+					// set listener for the answering call, which return the document height
+					window.onmessage = function(e) {
+						// resize
+						var newheight = e.data;
+						//var newwidth = iframeDoc.body.scrollWidth;
+						iframe[0].height = (newheight) + 'px';
+						//iframe[0].width = (newwidth) + 'px';
+					};
 
-				iframeDoc.write(emailBody);
-				iframeDoc.close();
+					// send email body to content frame
+					document.getElementById('mailContentFrame').contentWindow.postMessage(emailBody, '*');
+				});
 			}
 		}
 
diff --git a/src/manifest.json b/src/manifest.json
index 3c1d50b..c375cbd 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -16,7 +16,7 @@
     }
   },
   "sandbox": {
-    "pages": ["sandbox.html"],
-    "content_security_policy": "sandbox allow-scripts; default-src 'self'; object-src 'none'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'"
+    "pages": ["sandbox.html", "mail-content.html"],
+    "content_security_policy": "sandbox allow-scripts; default-src 'self'; object-src 'none'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src *"
   }
 }
\ No newline at end of file
diff --git a/src/tpl/read.html b/src/tpl/read.html
index 616df93..dfc362e 100644
--- a/src/tpl/read.html
+++ b/src/tpl/read.html
@@ -4,7 +4,7 @@
   <a href="#accounts/<%- account %>/folders/<%- folder %>/reply/<%- id %>" data-role="button" data-icon="back" data-iconpos="right" class="ui-btn-right">Reply</a>
 </div><!-- /header -->
 
-<div data-role="content">
+<div data-role="content" id="readViewContent">
   <ul data-role="listview" data-theme="d" data-divider-theme="d" id="idEmailList" data-mini="true">
     
     <li style="border: 0px">
@@ -21,9 +21,9 @@
 			<p id="idMailDate"><%- sentDate %></p>
 		</li>
 		
-		<li id="bodyItem" style="background-color: #FFFFFF">
-		  <div style="font-size: 8pt; font-weight: normal">
-        <iframe id="idMailContent" sandbox="allow-same-origin" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
+		<li id="bodyItem">
+		  <div id="mailContentDiv">
+        <iframe src="mail-content.html" sandbox="allow-scripts" id="mailContentFrame" frameborder="0"></iframe>
       </div>
     </li>