Use recursive stylesheet sanitation

62a1919402faa555c3d670d517fa8872be60a898

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 99e09f0b91fc918b547f63f0a88f6f7289d8d898

public/scripts/chats.js+42 -32 Viewed

     const styleDecodeRegex = /<custom-style>(.+?)<\/custom-style>/gms;
     const mediaAllowed = isExternalMediaAllowed();
+    function sanitizeRule(rule) {
+        if (rule.selectors) {
+            for (let i = 0; i < rule.selectors.length; i++) {
+                let selector = rule.selectors[i];
+                if (selector) {
+                    let selectors = (selector.split(' ') ?? []).map((v) => {
+                        if (v.startsWith('.')) {
+                            return '.custom-' + v.substring(1);
+                        }
+                        return v;
+                    }).join(' ');
+                    rule.selectors[i] = '.mes_text ' + selectors;
+                }
+            }
+        }
+        if (!mediaAllowed && Array.isArray(rule.declarations) && rule.declarations.length > 0) {
+            for (const declaration of rule.declarations) {
+                if (declaration.value.includes('://')) {
+                    rule.declarations.splice(rule.declarations.indexOf(declaration), 1);
+                }
+            }
+        }
+    }
+    function sanitizeRuleSet(ruleSet) {
+        if (ruleSet.type === 'rule') {
+            sanitizeRule(ruleSet);
+        }
+        if (Array.isArray(ruleSet.rules)) {
+            ruleSet.rules = ruleSet.rules.filter(rule => rule.type !== 'import');
+            for (const mediaRule of ruleSet.rules) {
+                sanitizeRuleSet(mediaRule);
+            }
+        }
+    }
     return text.replaceAll(styleDecodeRegex, (_, style) => {
         try {
             let styleCleaned = unescape(style).replaceAll(/<br\/>/g, '');
             const ast = css.parse(styleCleaned);
-            const rules = ast?.stylesheet?.rules;
+            const sheet = ast?.stylesheet;
-            if (rules) {
+            if (sheet) {
-                for (const rule of rules) {
+                sanitizeRuleSet(ast.stylesheet);
-                    if (rule.type === 'import') {
-                        rules.splice(rules.indexOf(rule), 1);
-                    }
-                    if (rule.type === 'rule') {
-                        if (rule.selectors) {
-                            for (let i = 0; i < rule.selectors.length; i++) {
-                                let selector = rule.selectors[i];
-                                if (selector) {
-                                    let selectors = (selector.split(' ') ?? []).map((v) => {
-                                        if (v.startsWith('.')) {
-                                            return '.custom-' + v.substring(1);
-                                        }
-                                        return v;
-                                    }).join(' ');
-                                    rule.selectors[i] = '.mes_text ' + selectors;
-                                }
-                            }
-                        }
-                        if (!mediaAllowed && Array.isArray(rule.declarations) && rule.declarations.length > 0) {
-                            for (const declaration of rule.declarations) {
-                                if (declaration.value.includes('://')) {
-                                    rule.declarations.splice(rule.declarations.indexOf(declaration), 1);
-                                }
-                            }
-                        }
-                    }
-                }
+            }
             return `<style>${css.stringify(ast)}</style>`;
         } catch (error) {