Merge pull request #20539 from azasypkin/bug-1012663-csp-compliance-i…

…nitial Bug 1012663 - [SMS] Remove inline style for CSP compliance. r=julienw
mozilla-b2g · Jun 18, 2014 · ded83da · ded83da
2 parents e2b2fe4 + 1bce575
commit ded83da
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 19 deletions.
diff --git a/apps/sms/index.html b/apps/sms/index.html
@@ -376,7 +376,7 @@ <h1 id="messages-edit-mode" data-l10n-id="deleteMessages-title">Delete Messages<
     <div id="contact-photo-tmpl" class="hide">
       <!--
       <aside class="pack-end">
-        <span data-type="img" style="background-image: url(${photoURL})"></span>
+        <span class="contact-photo" data-type="img"></span>
       </aside>
       -->
     </div>
@@ -509,7 +509,7 @@ <h1 class="message-subject">
     <div id="attachment-preview-tmpl" class="hide">
       <!--
       <div class="attachment">
-        <div class="thumbnail" style="background-image: url(${imgData})"></div>
+        <div class="thumbnail"></div>
         <div class="size-indicator" data-l10n-id="${sizeL10nId}" data-l10n-args="${sizeL10nArgs}"></div>
       </div>
       <div class="file-name">${fileName}</div>
@@ -522,9 +522,7 @@ <h1 class="message-subject">
         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
         <meta charset="utf-8">
         <base href="${baseURL}">
-        <style type="text/css">
-          html, body { font-size: 10px; }
-        </style>
+        <link rel="stylesheet" type="text/css" href="style/attachment_draft.css">
         <link rel="stylesheet" type="text/css" href="style/attachment.css">
       </head>
       <body class="attachment-draft ${previewClass}">

diff --git a/apps/sms/js/attachment.js b/apps/sms/js/attachment.js
@@ -175,6 +175,16 @@
         var tmplID = 'attachment-' + previewClass + '-tmpl';
         container.classList.add(previewClass);
 
+        var setAttachmentMarkup = function(markup, container, thumbnail) {
+          container.innerHTML = markup;
+
+          var thumbnailNode = container.querySelector('.thumbnail');
+          if (thumbnailNode && thumbnail.data) {
+            thumbnailNode.style.backgroundImage =
+              'url("' + encodeURI(thumbnail.data) + '")';
+          }
+        };
+
         if (this.isDraft) { // <iframe>
           // The attachment's iFrame requires access to the parent document's
           // context so that URIs for Blobs created in the parent may resolve as
@@ -190,7 +200,12 @@
           // append the source when it's appended to the dom and loaded
           container.addEventListener('load', function onload() {
             this.removeEventListener('load', onload);
-            this.contentDocument.documentElement.innerHTML = tmplSrc;
+
+            setAttachmentMarkup(
+              tmplSrc,
+              this.contentDocument.documentElement,
+              thumbnail
+            );
           });
 
           // Attach click listeners and fire the callback when rendering is
@@ -200,7 +215,11 @@
 
           container.src = 'about:blank';
         } else { // <div>
-          container.innerHTML = this.getAttachmentSrc(thumbnail, tmplID);
+          setAttachmentMarkup(
+            this.getAttachmentSrc(thumbnail, tmplID),
+            container,
+            thumbnail
+          );
         }
 
         if (readyCallback) {

diff --git a/apps/sms/js/contact_renderer.js b/apps/sms/js/contact_renderer.js
@@ -229,14 +229,8 @@ ContactRenderer.prototype = {
       });
 
       // Render contact photo only for specific flavor
-      if (renderPhoto && details.photoURL) {
-        data.photoHTML = this.templates.photo.interpolate({
-          photoURL: details.photoURL
-        });
-        Utils.asyncLoadRevokeURL(details.photoURL);
-      } else {
-        data.photoHTML = '';
-      }
+      data.photoHTML = renderPhoto && details.photoURL ?
+        this.templates.photo.interpolate() : '';
 
       // Interpolate HTML template with data and inject.
       // Known "safe" HTML values will not be re-sanitized.
@@ -251,6 +245,14 @@ ContactRenderer.prototype = {
         blockParent.appendChild(block);
       }
 
+      if (data.photoHTML) {
+        var contactPhoto = element.querySelector('.contact-photo');
+        contactPhoto.style.backgroundImage =
+          'url("' + encodeURI(details.photoURL) + '")';
+
+        Utils.asyncLoadRevokeURL(details.photoURL);
+      }
+
       // scan for translatable stuff
       navigator.mozL10n.translate(element);
 

diff --git a/apps/sms/style/attachment_draft.css b/apps/sms/style/attachment_draft.css
@@ -0,0 +1,3 @@
+html, body {
+  font-size: 10px;
+}
diff --git a/apps/sms/test/unit/attachment_test.js b/apps/sms/test/unit/attachment_test.js
@@ -190,6 +190,23 @@ suite('attachment_test.js', function() {
     });
   });
 
+  test('encodes thumbnail URL', function(done) {
+    this.sinon.spy(window, 'encodeURI');
+    var attachment = new Attachment(testImageBlob, {
+      name: 'Image attachment'
+    });
+    (new Promise(attachment.getThumbnail.bind(attachment))).
+      then(function(thumbnail) {
+        attachment.render(function() {
+          sinon.assert.calledWith(
+            encodeURI,
+            thumbnail.data
+          );
+          done();
+        });
+      }).catch(done);
+  });
+
   suite('preparing thumbnail for various image sizes', function() {
     // Taken from attachment.js
     var MIN_THUMBNAIL_DIMENSION = 80;

diff --git a/apps/sms/test/unit/contact_renderer_test.js b/apps/sms/test/unit/contact_renderer_test.js
@@ -438,18 +438,19 @@ suite('ContactRenderer', function() {
       var html;
       var blob = testImageBlob;
       this.sinon.stub(MockContactPhotoHelper, 'getThumbnail').returns(blob);
+      this.sinon.spy(Utils, 'asyncLoadRevokeURL');
+      this.sinon.spy(Utils, 'getContactDetails');
+      this.sinon.spy(window, 'encodeURI');
 
       renderer.render({
         contact: contact,
         input: '5559999',
         target: ul
       });
 
-      sinon.assert.calledWithMatch(Template.prototype.interpolate, {
-        photoURL: sinon.match(/^blob:/)
-      });
+      sinon.assert.calledWith(Template.prototype.interpolate, undefined);
 
-      var photo = 'span data-type="img" style="background-image: url(blob:';
+      var photo = 'data-type="img"';
       sinon.assert.calledWithMatch(Template.prototype.interpolate, {
         carrier: 'XXX, ',
         name: 'Pepito O\'Hare',
@@ -462,8 +463,20 @@ suite('ContactRenderer', function() {
       });
 
       html = ul.firstElementChild.innerHTML;
+      var contactPhotoElement = ul.firstElementChild.querySelector(
+        '.contact-photo'
+      );
 
       assert.ok(html.contains('span'));
+      assert.ok(contactPhotoElement.style.backgroundImage.indexOf('blob:') > 0);
+      sinon.assert.calledWith(
+        encodeURI,
+        Utils.getContactDetails.returnValues[0].photoURL
+      );
+      sinon.assert.calledWith(
+        Utils.asyncLoadRevokeURL,
+        Utils.getContactDetails.returnValues[0].photoURL
+      );
     });
   });