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 rulessheet = ast?.stylesheet?.rules;
             if (rulessheet) {
 -                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) {