Merge pull request #78 from whiteout-io/dev/WO-409

[WO-409] Render images in html mails
2024-11-23 01:12:19 -05:00 · 2014-06-26 13:23:30 +02:00 · 2014-06-26 13:23:30 +02:00 · ca0f91af27
commit ca0f91af27
parent df8b74bfb6 0d0b767b36
8 changed files with 137 additions and 14 deletions
--- a/src/js/controller/read.js
+++ b/src/js/controller/read.js
@ -338,17 +338,40 @@ define(function(require) {
    ngModule.directive('frameLoad', function($sce, $timeout) {
        return function(scope, elm, attrs) {
            scope.$watch(attrs.frameLoad, function(value) {
+                var html = value;
                scope.html = undefined;
-                if (value) {
-                    $timeout(function() {
-                        // wrap in html doc with scrollable html tag, since chrome apps does not scroll by default
-                        var prefix = '<!DOCTYPE html><html style="overflow-y: auto"><head></head><body>';
-                        var suffix = '</body></html>';
-                        // open links in new window, otherwise the sandbox with not open them
-                        var clickableHtml = value.replace(/<a /g, '<a target="_blank" ');
-                        scope.html = $sce.trustAsHtml(prefix + clickableHtml + suffix);
-                    });
+                var iframe = elm[0];
+
+                if (!html) {
+                    return;
                }
+
+                // if there are image tags in the html?
+                var hasImages = /<img[^>]+\bsrc=['"][^'">]+['"]/ig.test(html);
+                scope.showImageButton = hasImages;
+
+                // inital loading
+                $timeout(function() {
+                    scope.html = true;
+                    iframe.contentWindow.postMessage({
+                        html: html,
+                        removeImages: hasImages // avoids doing unnecessary work on the html
+                    }, '*');
+                });
+
+                // no need to add a scope function to reload the html if there are no images
+                if (!hasImages) {
+                    return;
+                }
+
+                // reload WITH images
+                scope.displayImages = function() {
+                    scope.showImageButton = false;
+                    iframe.contentWindow.postMessage({
+                        html: html,
+                        removeImages: false
+                    }, '*');
+                };
            });
        };
    });
--- a/src/js/dao/email-dao.js
+++ b/src/js/dao/email-dao.js
@ -639,13 +639,13 @@ define(function(require) {
                var localMessage = localMessages[0];

                // treat attachment and non-attachment body parts separately:
-                // we need to fetch the content for non-attachment body parts (encrypted, signed, text, html)
+                // we need to fetch the content for non-attachment body parts (encrypted, signed, text, html, resources referenced from the html)
                // but we spare the effort and fetch attachment content later upon explicit user request.
                var contentParts = localMessage.bodyParts.filter(function(bodyPart) {
-                    return bodyPart.type !== "attachment";
+                    return bodyPart.type !== "attachment" || (bodyPart.type === "attachment" && bodyPart.id);
                });
                var attachmentParts = localMessage.bodyParts.filter(function(bodyPart) {
-                    return bodyPart.type === "attachment";
+                    return bodyPart.type === "attachment" && !bodyPart.id;
                });

                // do we need to fetch content from the imap server?
@ -747,10 +747,12 @@ define(function(require) {
            message.attachments = filterBodyParts(root, 'attachment');
            message.body = body;
            message.html = _.pluck(filterBodyParts(root, 'html'), 'content').join('\n');
+            inlineExternalImages(message);

            done();
        }

+
        function done(err) {
            message.loadingBody = false;
            callback(err, err ? undefined : message);
@ -852,6 +854,7 @@ define(function(require) {
                        // remove the pgp-signature from the attachments
                        return attmt.mimeType === "application/pgp-signature";
                    });
+                    inlineExternalImages(message);

                    message.decrypted = true;

@ -1472,5 +1475,36 @@ define(function(require) {
        return result;
    }

+    /**
+     * Helper function that looks through the HTML content for <img src="cid:..."> and
+     * inlines the images linked internally. Manipulates message.html as a side-effect.
+     * If no attachment matching the internal reference is found, or constructing a data
+     * uri fails, just remove the source.
+     *
+     * @param {Object} message DTO
+     */
+    function inlineExternalImages(message) {
+        message.html = message.html.replace(/(<img[^>]+\bsrc=['"])cid:([^'">]+)(['"])/ig, function(match, prefix, src, suffix) {
+            var localSource = '',
+                payload = '';
+
+            var internalReference = _.findWhere(message.attachments, {
+                id: src
+            });
+
+            if (internalReference) {
+                for (var i = 0; i < internalReference.content.byteLength; i++) {
+                    payload += String.fromCharCode(internalReference.content[i]);
+                }
+
+                try {
+                    localSource = 'data:application/octet-stream;base64,' + btoa(payload); // try to replace the source
+                } catch (e) {}
+            }
+
+            return prefix + localSource + suffix;
+        });
+    }
+
    return EmailDAO;
 });
--- a/src/manifest.json
+++ b/src/manifest.json
@ -32,5 +32,9 @@
    "background": {
      "scripts": ["background.js"]
    }
+  },
+  "sandbox": {
+    "pages": ["sandbox.html"],
+    "content_security_policy": "sandbox allow-popups allow-scripts; default-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'; img-src *"
  }
 }
--- a/src/sandbox.html
+++ b/src/sandbox.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html style="overflow-y: auto">
+
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="sandbox.js"></script>
+</head>
+
+<body></body>
+</html>
--- a/src/sandbox.js
+++ b/src/sandbox.js
@ -0,0 +1,20 @@
+(function() {
+    'use strict';
+
+    // set listener for event from main window
+    window.addEventListener('message', function(e) {
+        var html = e.data.html;
+
+        // make links open in a new window
+        html = html.replace(/<a /g, '<a target="_blank" ');
+
+        // remove sources where necessary
+        if (e.data.removeImages) {
+            html = html.replace(/(<img[^>]+\b)src=['"][^'">]+['"]/ig, function(match, prefix) {
+                return prefix;
+            });
+        }
+
+        document.body.innerHTML = html;
+    }, false);
+})();
--- a/src/sass/views/_read.scss
+++ b/src/sass/views/_read.scss
@ -114,6 +114,17 @@
        }
    }

+    .showImages {
+        flex-shrink: 0;
+        padding: 1em;
+        text-align: center;
+
+        a {
+            text-decoration: none;
+            color: $color-blue;
+        }
+    }
+
    iframe {
        flex-grow: 1;
        margin-top: 1.75em;
--- a/src/tpl/read.html
+++ b/src/tpl/read.html
@ -53,8 +53,12 @@
    </div><!--/.working-->
  </div><!--/.working-wrapper-->

+  <div class="showImages" ng-show="html && showImageButton">
+    <a href='#' ng-click="displayImages(); $event.preventDefault()">Display images</a>
+  </div>
+
  <!-- Render html body in sandboxed iframe -->
-  <iframe ng-show="html" sandbox="allow-popups" srcdoc="{{html}}"
+  <iframe ng-show="html" sandbox="allow-popups allow-scripts" src="sandbox.html" 
    frame-load="state.mailList.selected.html">
  </iframe>

--- a/test/integration/email-dao-test.js
+++ b/test/integration/email-dao-test.js