rendering mail content in 2nd sandboxed iframe works

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;
 }

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, '*');
+				});
 			}
 		}
 

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 *"
   }
 }

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>