sandboxed iframe and escaping of html in templates works

src/js/dao/email-dao.js

@@ -52,7 +52,7 @@ app.dao.EmailDAO = function(_, crypto, devicestorage, cloudstorage) {
 	 * @param num [Number] The number of items to fetch (null means fetch all)
 	 */
 	this.listItems = function(folderName, offset, num, callback) {
-		var model, collection, folder, self = this;
+		var collection, folder, self = this;
 		
 		// check if items are in memory already (account.folders model)
 		folder = this.account.get('folders').where({name: folderName})[0];

src/js/model/email-model.js

@@ -14,6 +14,13 @@ app.model.Email = Backbone.Model.extend({
 	},
 
     initialize: function () {
+		// decode body
+		try {			
+			var decodedBody = window.atob(this.get('body'));
+			this.set('body', decodedBody);
+		} catch (ex) {
+			console.log(ex);
+		}
     }
 
 });

src/js/view/read-view.js

@@ -22,6 +22,7 @@ app.view.ReadView = Backbone.View.extend({
 			var newheight = iframeDoc.body.scrollHeight;
 			var newwidth = iframeDoc.body.scrollWidth;
 			iframe[0].height = (newheight) + 'px';
+			iframe[0].width = (newwidth) + 'px';
 		});
 		
 		iframeDoc.write(emailBody);

src/tpl/folderlist.html

@@ -1,31 +1,31 @@
 <div data-role="header" data-position="fixed">  
   <input type="button" id="backBtn" data-icon="arrow-l" value="Logout" class="ui-btn-left">
-  <h1><%= account %></h1>
+  <h1><%- account %></h1>
 </div><!-- /header -->
 
 <div data-role="content">
   <ul data-role="listview">
-    <li><a href="#accounts/<%= account %>/folders/inbox">
+    <li><a href="#accounts/<%- account %>/folders/inbox">
       <img src="css/icons/glyphicons_130_inbox.png" class="ui-li-icon ui-corner-none">
       Inbox
       <span class="ui-li-count">12</span>
     </a></li>
-    <li><a href="#accounts/<%= account %>/folders/outbox">
+    <li><a href="#accounts/<%- account %>/folders/outbox">
       <img src="css/icons/glyphicons_135_inbox_out.png" class="ui-li-icon ui-corner-none">
       Outbox
       <span class="ui-li-count">0</span>
     </a></li>
-    <li><a href="#accounts/<%= account %>/folders/drafts">
+    <li><a href="#accounts/<%- account %>/folders/drafts">
       <img src="css/icons/glyphicons_030_pencil.png" class="ui-li-icon ui-corner-none">
       Drafts
       <span class="ui-li-count">4</span>
     </a></li>
-    <li><a href="#accounts/<%= account %>/folders/sent">
+    <li><a href="#accounts/<%- account %>/folders/sent">
       <img src="css/icons/glyphicons_010_envelope.png" class="ui-li-icon ui-corner-none">
       Sent
       <span class="ui-li-count">328</span>
     </a></li>
-    <li><a href="#accounts/<%= account %>/folders/trash">
+    <li><a href="#accounts/<%- account %>/folders/trash">
       <img src="css/icons/glyphicons_016_bin.png" class="ui-li-icon ui-corner-none">
       Trash
       <span class="ui-li-count">62</span>

src/tpl/messagelist.html

@@ -1,6 +1,6 @@
 <div data-role="header" data-position="fixed">
   <input type="button" id="backBtn" data-icon="arrow-l" value="Back" class="ui-btn-left">
-  <h1><%= folder %>: <%= account %></h1>
+  <h1><%- folder %>: <%- account %></h1>
 </div><!-- /header -->
 
 <div data-role="content">

src/tpl/messagelistitem.html

@@ -1,6 +1,6 @@
-<a href="#accounts/<%= account %>/folders/<%= folder %>/read/<%= id %>">
+<a href="#accounts/<%- account %>/folders/<%- folder %>/read/<%- id %>">
-  <h3><%= from %></h3>
+  <h3><%- from %></h3>
-  <p><strong><%= subject %></strong></p>
+  <p><strong><%- subject %></strong></p>
-  <!--   <p><%= body %></p> -->
+  <!--   <p><%- body %></p> -->
-  <p class="ui-li-aside"><strong><%= sentDate %></strong></p>
+  <p class="ui-li-aside"><strong><%- sentDate %></strong></p>
 </a>

src/tpl/read.html

@@ -1,6 +1,6 @@
 <div data-role="header" data-position="fixed">
   <input type="button" id="backBtn" data-icon="arrow-l" value="Back" class="ui-btn-left">
-  <h1><%= subject %></h1>
+  <h1><%- subject %></h1>
   <a href="#compose" data-role="button" data-icon="back" data-iconpos="right" class="ui-btn-right">Reply</a>
 </div><!-- /header -->
 
@@ -8,17 +8,17 @@
   <ul data-role="listview" data-theme="d" data-divider-theme="d" id="idEmailList" data-mini="true">
     
     <li style="border: 0px">
-			<h3>from: <%= from %></h3>
+			<h3>from: <%- from %></h3>
-			<p>to: <%= to %></p>
+			<p>to: <%- to %></p>
 		</li>
 		
 		<li>
-			<h3 id="idMailSubject"><%= subject %></h3>
+			<h3 id="idMailSubject"><%- subject %></h3>
-			<p id="idMailDate"><%= sentDate %></p>
+			<p id="idMailDate"><%- sentDate %></p>
 		</li>
 		
 		<li id="bodyItem" style="font-size: 8pt; font-weight: normal; background-color: #FFFFFF">
-		  <iframe id="idMailContent" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
+		  <iframe id="idMailContent" sandbox="allow-same-origin" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
 		</li>
 		
 	</ul>