Add style sanitizer to message renderer

public/scripts/chats.js

@@ -1,5 +1,6 @@
 // Move chat functions here from script.js (eventually)
 
+import css from '../lib/css-parser.mjs';
 import {
     addCopyToCodeBlocks,
     appendMediaToMessage,
@@ -360,6 +361,61 @@ export async function appendFileContent(message, messageText) {
     return messageText;
 }
 
+/**
+ * Replaces style tags in the message text with custom tags with encoded content.
+ * @param {string} text
+ * @returns {string} Encoded message text
+ * @copyright https://github.com/kwaroran/risuAI
+ */
+export function encodeStyleTags(text) {
+    const styleRegex = /<style>(.+?)<\/style>/gms;
+    return text.replaceAll(styleRegex, (_, match) => {
+        return `<custom-style>${escape(match)}</custom-style>`;
+    });
+}
+
+/**
+ * Sanitizes custom style tags in the message text to prevent DOM pollution.
+ * @param {string} text Message text
+ * @returns {string} Sanitized message text
+ * @copyright https://github.com/kwaroran/risuAI
+ */
+export function decodeStyleTags(text) {
+    const styleDecodeRegex = /<custom-style>(.+?)<\/custom-style>/gms;
+
+    return text.replaceAll(styleDecodeRegex, (_, style) => {
+        try {
+            const ast = css.parse(unescape(style));
+            const rules = ast?.stylesheet?.rules;
+            if (rules) {
+                for (const rule of rules) {
+
+                    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;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return `<style>${css.stringify(ast)}</style>`;
+        } catch (error) {
+            return `CSS ERROR: ${error}`;
+        }
+    });
+}
+
 jQuery(function () {
     $(document).on('click', '.mes_hide', async function () {
         const messageBlock = $(this).closest('.mes');