add image-set to disallowed css functions

AdguardTeam · Jan 18, 2023 · 3d351b6 · 3d351b6
1 parent b283b30
commit 3d351b6
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/src/scriptlets/inject-css-in-shadow-dom.js b/src/scriptlets/inject-css-in-shadow-dom.js
@@ -39,8 +39,8 @@ export function injectCssInShadowDom(source, cssRule, hostSelector = '') {
         return;
     }
 
-    // url() css function is not allowed
-    if (cssRule.match(/url\(.*\)/i)) {
+    // Prevent url() and image-set() styles from being applied
+    if (cssRule.match(/(url|image-set)\(.*\)/i)) {
         logMessage(source, '"url()" function is not allowed for css rules');
         return;
     }

diff --git a/tests/scriptlets/inject-css-in-shadow-dom.test.js b/tests/scriptlets/inject-css-in-shadow-dom.test.js
@@ -10,6 +10,7 @@ const nativeConsole = console.log;
 const TARGET_ID1 = 'target1';
 const CSS_TEXT1 = `#${TARGET_ID1} { color: rgb(255, 0, 0)  !important }`;
 const CSS_TEXT2 = `#${TARGET_ID1} { background: lightblue url("https://www.w3schools.com/cssref/img_tree.gif"); }  !important }`;
+const CSS_TEXT3 = `#${TARGET_ID1} { background:image-set("https://www.w3schools.com/cssref/img_tree.gif") !important }`;
 const INVALID_CSS_TEXT = `#${TARGET_ID1} { color: rgb(255, 0, 0) } !important`;
 const HOST_ID1 = 'host1';
 const HOST_ID2 = 'host2';
@@ -127,7 +128,34 @@ if (!isSupported) {
         const target1 = shadowRoot1.getElementById(TARGET_ID1);
         const target1Background = getComputedStyle(target1).background;
 
-        assert.ok(!target1Background.match(/url\(.*\)/i), 'style was not applied to shadowRoot #1');
+        assert.ok(!target1Background.match(/url\(.*\)/i), 'url() style was not applied to shadowRoot #1');
+        assert.strictEqual(window.hit, undefined, 'hit should NOT fire');
+    });
+
+    test('do not apply style with image-set function, logged correctly', (assert) => {
+        assert.expect(3);
+        console.log = function log(input) {
+            if (input.indexOf('trace') > -1) {
+                return;
+            }
+            assert.strictEqual(
+                input,
+                `${name}: "url()" function is not allowed for css rules`,
+                'message logged correctly',
+            );
+        };
+
+        runScriptlet(name, [CSS_TEXT3]);
+
+        const host1 = appendHost(HOST_ID1);
+        const shadowRoot1 = host1.attachShadow({ mode: 'closed' });
+        appendTarget(shadowRoot1, TARGET_ID1);
+
+        // style with url() function should not be applied
+        const target1 = shadowRoot1.getElementById(TARGET_ID1);
+        const target1Background = getComputedStyle(target1).background;
+
+        assert.ok(!target1Background.match(/image-set\(.*\)/i), 'image-set() style was not applied to shadowRoot #1');
         assert.strictEqual(window.hit, undefined, 'hit should NOT fire');
     });