fix: blocked bg-images do not trigger external content warning

refs #284

Author: ThorstenSuckow

src/view/mail/message/reader/MessageViewController.js

@@ -1,7 +1,7 @@
 /**
  * conjoon
  * extjs-app-webmail
- * Copyright (C) 2019-2022 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
+ * Copyright (C) 2019-2023 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
  *
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
@@ -98,7 +98,8 @@ Ext.define("conjoon.cn_mail.view.mail.message.reader.MessageViewController", {
      * iframe is currently processing.
      *
      * @param {conjoon.cn_mail.view.mail.message.reader.MessageViewIframe} iframe
-     * @param {String} src
+     * @param {Object} src
+     * @param {String} src.srcDoc
      */
     onBeforeSrcDoc: function (iframe, src) {
         const me = this;
@@ -114,28 +115,50 @@ Ext.define("conjoon.cn_mail.view.mail.message.reader.MessageViewController", {
      * sanitizeImages will only be called if the iframe's getImagesAllowed()-method returns
      * false.
      * Will set the viewodel's hasImages if any images where detected in the message's html.
+     * If the method requires check for css images, the srcDoc of the iframe will be updated.
      *
      * @param {conjoon.cn_mail.view.mail.message.reader.MessageViewIframe} iframe
      *
      * @see #sanitizeLinks
      * @see #sanitizeImages
      */
-    onIframeLoad: function (iframe) {
+    onIframeLoad (iframe) {
 
-        const me = this,
+        const me = this;
+
+        me.cssImageCheck = me.cssImageCheck || {};
+
+        // will only step into this method if the check was not finished,
+        // to prevent recursion because of setSrcDoc and the load-event
+        // associated with it, this method will return and be recalled
+        // once setSrcDoc was updated.
+        if (!me.cssImageCheck.finished && !iframe.getImagesAllowed()) {
+            let result =  me.sanitizeCssImages();
+            me.cssImageCheck.finished = true;
+            me.cssImageCheck.result = result;
+            if (result) {
+                return me.cssImageCheck;
+            }
+        }
+
+        const
             view = me.getView(),
             vm   = view.getViewModel(),
             body = iframe.getBody(),
             cnt  = view.down("#msgBodyContainer"),
-            bars = Ext.getScrollbarSize();
+            bars = Ext.getScrollbarSize(),
+            viewerWindow = iframe.cn_iframeEl.dom.contentWindow;
 
-        me.sanitizeLinks(iframe.cn_iframeEl.dom.contentWindow.document.getElementsByTagName("a"));
+        const imgs = viewerWindow.document.getElementsByTagName("img");
 
-        let imgs = iframe.cn_iframeEl.dom.contentWindow.document.getElementsByTagName("img");
-        vm.set("hasImages", imgs.length > 0);
+        vm.set("hasImages", me.cssImageCheck.result === true || imgs.length > 0);
+
+        me.cssImageCheck = {};
+
+        me.sanitizeLinks(viewerWindow.document.getElementsByTagName("a"));
 
         if (!iframe.getImagesAllowed()) {
-            me.sanitizeImages(imgs);
+            imgs.length && me.sanitizeImages(imgs);
         }
 
         cnt.setScrollY(0);
@@ -146,6 +169,8 @@ Ext.define("conjoon.cn_mail.view.mail.message.reader.MessageViewController", {
 
         iframe.setSize(cnt.getWidth() - bars.width, cnt.getHeight() - bars.height);
         iframe.setSize(body.scrollWidth, body.scrollHeight);
+
+        return true;
     },
 
 
@@ -215,12 +240,14 @@ Ext.define("conjoon.cn_mail.view.mail.message.reader.MessageViewController", {
      * - the images border ist set to 1px solid black
      * - the images src is set to img_block.png out of this package's resource path
      *
-     * @param {Array} an array of HTMLElements representing links (<a>).
+     * @param {Array} elements array of HTMLElements representing links (<a>).
      *
      * @private
      */
     sanitizeImages: function (elements) {
 
+        const me = this;
+
         let img, i, len = elements.length;
 
         for (i = 0; i < len; i++) {
@@ -230,13 +257,41 @@ Ext.define("conjoon.cn_mail.view.mail.message.reader.MessageViewController", {
             // isolated tests will not have resources property set
             img.setAttribute(
                 "src",
-                coon.core.Environment.getPathForResource("resources/images/img_block.png","extjs-app-webmail")
+                me.getProxyImage()
             );
 
         }
     },
 
 
+    getCssImages (viewerWindow) {
+        return viewerWindow.performance.getEntriesByType("resource").filter(
+            resource => ["css"].includes(resource.initiatorType)
+        ).map(resource => resource.name);
+    },
+
+
+    sanitizeCssImages () {
+
+        const
+            me = this,
+            iframe = me.getIframe(),
+            cssImgs = me.getCssImages(iframe.cn_iframeEl.dom.contentWindow);
+
+        if (cssImgs.length) {
+            let srcDoc = iframe.getSrcDoc();
+            srcDoc = l8.replace(cssImgs,  me.getProxyImage(), srcDoc, "gmi");
+            iframe.setSrcDoc(srcDoc, false);
+            return true;
+        }
+
+        return false;
+    },
+
+    getProxyImage () {
+        return coon.core.Environment.getPathForResource("resources/images/img_block.png", "extjs-app-webmail");
+    },
+
     /**
      * @private
      */

tests/src/view/mail/message/reader/MessageViewControllerTest.js

@@ -1,7 +1,7 @@
 /**
  * conjoon
  * extjs-app-webmail
- * Copyright (C) 2017-2022 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
+ * Copyright (C) 2017-2023 Thorsten Suckow-Homberg https://github.com/conjoon/extjs-app-webmail
  *
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
@@ -298,12 +298,14 @@ StartTest(async t => {
                 };
             };
 
-            t.isCalledNTimes("sanitizeLinks", controller, 3);
+            t.isCalledNTimes("sanitizeLinks", controller, 4);
             t.isCalledNTimes("sanitizeImages", controller, 1);
 
             IMAGESALLOWED = false;
             TAGS["img"] = [{setAttribute: function (){}, style: {}}];
 
+            let sanitizeCssImagesSpy = t.spyOn(controller, "sanitizeCssImages").and.callFake(() => false);
+
             controller.onIframeLoad(IFRAME);
 
             t.expect(VM["hasImages"]).toBe(true);
@@ -325,7 +327,21 @@ StartTest(async t => {
             controller.onIframeLoad(IFRAME);
             t.expect(VM["hasImages"]).toBe(true);
 
+            sanitizeCssImagesSpy.remove();
+            sanitizeCssImagesSpy = t.spyOn(controller, "sanitizeCssImages").and.callFake(() => true);
+
+            IMAGESALLOWED = false;
+            TAGS["img"] = [];
+            t.expect(controller.cssImageCheck.finished).toBeUndefined();
+
+            t.expect(controller.onIframeLoad(IFRAME)).toBe(controller.cssImageCheck);
+            t.expect(controller.cssImageCheck.finished).toBe(true);
+            t.expect(controller.cssImageCheck.result).toBe(true);
+
+            t.expect(controller.onIframeLoad(IFRAME)).toBe(true);
+            t.expect(controller.cssImageCheck).toEqual({});
 
+            sanitizeCssImagesSpy.remove();
             Ext.getScrollbarSize = tmp;
         });
 
@@ -381,4 +397,39 @@ StartTest(async t => {
             t.expect(IMAGES[1].style.border).toBe("1px solid black");
         });
 
+
+        t.it("sanitizeCssImages", t => {
+
+            controller = createController();
+
+            let CSSIMAGES = [
+                "A", "B"
+            ];
+
+            const FAKE_IFRAME = {
+                getSrcDoc: () => "A aa B B C",
+                setSrcDoc () {}
+            };
+
+            l8.chain("cn_iframeEl.dom.contentWindow", FAKE_IFRAME, {});
+            const
+                sanitizeSpy = t.spyOn(controller, "getCssImages").and.callFake(() => CSSIMAGES),
+                getIframeSpy = t.spyOn(controller, "getIframe").and.callFake(() => FAKE_IFRAME),
+                setSrcDocSpy = t.spyOn(FAKE_IFRAME, "setSrcDoc");
+
+            t.expect(controller.sanitizeCssImages()).toBe(true);
+            t.expect(setSrcDocSpy.calls.mostRecent().args).toEqual(
+                [
+                    [`${controller.getProxyImage()} `,
+                        `${controller.getProxyImage()}${controller.getProxyImage()} `,
+                        `${controller.getProxyImage()} ${controller.getProxyImage()} C`].join("")
+
+                    , false]
+            );
+
+            [sanitizeSpy, getIframeSpy, setSrcDocSpy].map(spy => spy.remove);
+
+        });
+
+
     });});