Move DOMPurify hooks to chats module

3d488a5e7bc1b0951060a28a93262c503eae5bea

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

Parents: 2f56a733684daf66e564f07399915388f1fca6c4

public/script.js+2 -125 Viewed

     loadTabbyModels,
     loadGenericModels,
 } from './scripts/textgen-models.js';
-import { appendFileContent, hasPendingFileAttachment, populateFileAttachment, decodeStyleTags, encodeStyleTags, isExternalMediaAllowed, getCurrentEntityId, preserveNeutralChat, restoreNeutralChat, formatCreatorNotes, initChatUtilities } from './scripts/chats.js';
+import { appendFileContent, hasPendingFileAttachment, populateFileAttachment, decodeStyleTags, encodeStyleTags, isExternalMediaAllowed, preserveNeutralChat, restoreNeutralChat, formatCreatorNotes, initChatUtilities, addDOMPurifyHooks } from './scripts/chats.js';
 import { getPresetManager, initPresetManager } from './scripts/preset-manager.js';
 import { evaluateMacros, getLastMessageId, initMacros } from './scripts/macros.js';
 import { currentUser, setUserControls } from './scripts/user.js';

     },
 };
-// Allow target="_blank" in links
-DOMPurify.addHook('afterSanitizeAttributes', function (node) {
-    if ('target' in node) {
-        node.setAttribute('target', '_blank');
-        node.setAttribute('rel', 'noopener');
-    }
-});
-DOMPurify.addHook('uponSanitizeAttribute', (node, data, config) => {
-    if (!config['MESSAGE_SANITIZE']) {
-        return;
-    }
-    /* Retain the classes on UI elements of messages that interact with the main UI */
-    const permittedNodeTypes = ['BUTTON', 'DIV'];
-    if (config['MESSAGE_ALLOW_SYSTEM_UI'] && node.classList.contains('menu_button') && permittedNodeTypes.includes(node.nodeName)) {
-        return;
-    }
-    switch (data.attrName) {
-        case 'class': {
-            if (data.attrValue) {
-                data.attrValue = data.attrValue.split(' ').map((v) => {
-                    if (v.startsWith('fa-') || v.startsWith('note-') || v === 'monospace') {
-                        return v;
-                    }
-                    return 'custom-' + v;
-                }).join(' ');
-            }
-            break;
-        }
-    }
-});
-DOMPurify.addHook('uponSanitizeElement', (node, _, config) => {
-    if (!config['MESSAGE_SANITIZE']) {
-        return;
-    }
-    // Replace line breaks with <br> in unknown elements
-    if (node instanceof HTMLUnknownElement) {
-        node.innerHTML = node.innerHTML.trim().replaceAll('\n', '<br>');
-    }
-    const isMediaAllowed = isExternalMediaAllowed();
-    if (isMediaAllowed) {
-        return;
-    }
-    if (!(node instanceof Element)) {
-        return;
-    }
-    let mediaBlocked = false;
-    switch (node.tagName) {
-        case 'AUDIO':
-        case 'VIDEO':
-        case 'SOURCE':
-        case 'TRACK':
-        case 'EMBED':
-        case 'OBJECT':
-        case 'IMG': {
-            const isExternalUrl = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0) && !url.startsWith(window.location.origin);
-            const src = node.getAttribute('src');
-            const data = node.getAttribute('data');
-            const srcset = node.getAttribute('srcset');
-            if (srcset) {
-                const srcsetUrls = srcset.split(',');
-                for (const srcsetUrl of srcsetUrls) {
-                    const [url] = srcsetUrl.trim().split(' ');
-                    if (isExternalUrl(url)) {
-                        console.warn('External media blocked', url);
-                        node.remove();
-                        mediaBlocked = true;
-                        break;
-                    }
-                }
-            }
-            if (src && isExternalUrl(src)) {
-                console.warn('External media blocked', src);
-                mediaBlocked = true;
-                node.remove();
-            }
-            if (data && isExternalUrl(data)) {
-                console.warn('External media blocked', data);
-                mediaBlocked = true;
-                node.remove();
-            }
-            if (mediaBlocked && (node instanceof HTMLMediaElement)) {
-                node.autoplay = false;
-                node.pause();
-            }
-        }
-            break;
-    }
-    if (mediaBlocked) {
-        const entityId = getCurrentEntityId();
-        const warningShownKey = `mediaWarningShown:${entityId}`;
-        if (accountStorage.getItem(warningShownKey) === null) {
-            const warningToast = toastr.warning(
-                t`Use the 'Ext. Media' button to allow it. Click on this message to dismiss.`,
-                t`External media has been blocked`,
-                {
-                    timeOut: 0,
-                    preventDuplicates: true,
-                    onclick: () => toastr.clear(warningToast),
-                },
-            );
-            accountStorage.setItem(warningShownKey, 'true');
-        }
-    }
-});
 // Event source init
 //MARK: event_types
 export const event_types = {

     initStandaloneMode();
     initLibraryShims();
     addShowdownPatch(showdown);
+    addDOMPurifyHooks();
     reloadMarkdownProcessor();
     applyBrowserFixes();
     await getClientVersion();

public/scripts/chats.js+126 -0 Viewed

     converters[mimeType] = converter;
+}
+export function addDOMPurifyHooks() {
+    // Allow target="_blank" in links
+    DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+        if ('target' in node) {
+            node.setAttribute('target', '_blank');
+            node.setAttribute('rel', 'noopener');
+        }
+    });
+    DOMPurify.addHook('uponSanitizeAttribute', (node, data, config) => {
+        if (!config['MESSAGE_SANITIZE']) {
+            return;
+        }
+        /* Retain the classes on UI elements of messages that interact with the main UI */
+        const permittedNodeTypes = ['BUTTON', 'DIV'];
+        if (config['MESSAGE_ALLOW_SYSTEM_UI'] && node.classList.contains('menu_button') && permittedNodeTypes.includes(node.nodeName)) {
+            return;
+        }
+        switch (data.attrName) {
+            case 'class': {
+                if (data.attrValue) {
+                    data.attrValue = data.attrValue.split(' ').map((v) => {
+                        if (v.startsWith('fa-') || v.startsWith('note-') || v === 'monospace') {
+                            return v;
+                        }
+                        return 'custom-' + v;
+                    }).join(' ');
+                }
+                break;
+            }
+        }
+    });
+    DOMPurify.addHook('uponSanitizeElement', (node, _, config) => {
+        if (!config['MESSAGE_SANITIZE']) {
+            return;
+        }
+        // Replace line breaks with <br> in unknown elements
+        if (node instanceof HTMLUnknownElement) {
+            node.innerHTML = node.innerHTML.trim().replaceAll('\n', '<br>');
+        }
+        const isMediaAllowed = isExternalMediaAllowed();
+        if (isMediaAllowed) {
+            return;
+        }
+        if (!(node instanceof Element)) {
+            return;
+        }
+        let mediaBlocked = false;
+        switch (node.tagName) {
+            case 'AUDIO':
+            case 'VIDEO':
+            case 'SOURCE':
+            case 'TRACK':
+            case 'EMBED':
+            case 'OBJECT':
+            case 'IMG': {
+                const isExternalUrl = (url) => (url.indexOf('://') > 0 || url.indexOf('//') === 0) && !url.startsWith(window.location.origin);
+                const src = node.getAttribute('src');
+                const data = node.getAttribute('data');
+                const srcset = node.getAttribute('srcset');
+                if (srcset) {
+                    const srcsetUrls = srcset.split(',');
+                    for (const srcsetUrl of srcsetUrls) {
+                        const [url] = srcsetUrl.trim().split(' ');
+                        if (isExternalUrl(url)) {
+                            console.warn('External media blocked', url);
+                            node.remove();
+                            mediaBlocked = true;
+                            break;
+                        }
+                    }
+                }
+                if (src && isExternalUrl(src)) {
+                    console.warn('External media blocked', src);
+                    mediaBlocked = true;
+                    node.remove();
+                }
+                if (data && isExternalUrl(data)) {
+                    console.warn('External media blocked', data);
+                    mediaBlocked = true;
+                    node.remove();
+                }
+                if (mediaBlocked && (node instanceof HTMLMediaElement)) {
+                    node.autoplay = false;
+                    node.pause();
+                }
+            }
+                break;
+        }
+        if (mediaBlocked) {
+            const entityId = getCurrentEntityId();
+            const warningShownKey = `mediaWarningShown:${entityId}`;
+            if (accountStorage.getItem(warningShownKey) === null) {
+                const warningToast = toastr.warning(
+                    t`Use the 'Ext. Media' button to allow it. Click on this message to dismiss.`,
+                    t`External media has been blocked`,
+                    {
+                        timeOut: 0,
+                        preventDuplicates: true,
+                        onclick: () => toastr.clear(warningToast),
+                    },
+                );
+                accountStorage.setItem(warningShownKey, 'true');
+            }
+        }
+    });
+}
 export function initChatUtilities() {
     $(document).on('click', '.mes_hide', async function () {
         const messageBlock = $(this).closest('.mes');