sanitizeHtml to avoid breaking layout when displaying rendered html

Author: mythz

llms/ui/ctx.mjs

@@ -1,7 +1,7 @@
 
 import { reactive, markRaw } from 'vue'
 import { EventBus, humanize, combinePaths } from "@servicestack/client"
-import { storageObject, isHtml } from './utils.mjs'
+import { storageObject, isHtml, sanitizeHtml } from './utils.mjs'
 
 export class ExtensionScope {
     constructor(ctx, id) {
@@ -397,7 +397,8 @@ export class AppContext {
             const header = content.substring(3, headerEnd).trim()
             content = '<div class="frontmatter">' + header + '</div>\n' + content.substring(headerEnd + 3)
         }
-        return this.marked.parse(content || '')
+        const html = this.marked.parse(content || '')
+        return sanitizeHtml(html)
     }
 
     renderContent(content) {

llms/ui/modules/chat/ChatBody.mjs

@@ -15,6 +15,7 @@ function hasJsonStructure(str) {
 function isEmpty(v) {
     return !v || v === '{}' || v === '[]' || v === 'null' || v === 'undefined' || v === '""' || v === "''" || v === "``"
 }
+
 function embedHtml(html) {
     const resizeScript = `<script>
         let lastH = 0;
@@ -512,7 +513,7 @@ export const ToolArguments = {
                             <TextViewer prefsName="toolArgs" :text="v" />
                         </td>
                         <td data-arg="value" v-else class="align-top py-2 px-4 text-sm whitespace-pre-wrap">
-                            <HtmlFormat :value="v" :classes="$utils.htmlFormatClasses" />
+                            <HtmlFormat :value="v" :classes="$utils.htmlFormatClasses" :formatText="$utils.sanitizeHtml" />
                         </td>
                     </tr>
                 </table>            
@@ -527,6 +528,7 @@ export const ToolArguments = {
         value: String,
     },
     setup(props) {
+        const ctx = inject('ctx')
         const refArgs = ref()
         const maximized = ref({})
         const dict = computed(() => {

llms/ui/utils.mjs

@@ -220,7 +220,7 @@ const htmlEntities = {
 }
 
 export function encodeHtml(str) {
-    if (!str) return ''
+    if (typeof str !== 'string' || !str) return ''
     return str.replace(/[&<>"']/g, m => htmlEntities[m]);
 }
 
@@ -242,6 +242,52 @@ function htmlFormatClasses(type, tag, depth, cls, index) {
     return cls
 }
 
+const dangerousTags = [
+    'script',
+    'iframe',
+    'object',
+    'embed',
+    'link',
+    'style',
+    'meta',
+    'base',
+    'frame',
+    'frameset',
+    'applet',
+    'noscript',
+    'template'
+]
+const anyDangerousTag = new RegExp(`<(${dangerousTags.join('|')})`, 'i')
+
+export function sanitizeHtml(html) {
+    if (!html || typeof html !== 'string') return html
+
+    let result = html
+    let lowerResult = result.toLowerCase()
+    function updateResult(r) {
+        result = r
+        lowerResult = result.toLowerCase()
+    }
+
+    if (anyDangerousTag.test(lowerResult)) {
+        for (const tag of dangerousTags) {
+            const tagOpen = `<${tag}`
+
+            if (lowerResult.indexOf(tagOpen) === -1) continue
+
+            const regex = new RegExp(`<${tag}[^>]*>([\\s\\S]*?)<\\/${tag}>`, 'gi')
+            updateResult(result.replace(regex, ''))
+
+            if (lowerResult.indexOf(tagOpen) !== -1) {
+                const selfClosingRegex = new RegExp(`<${tag}[^>]*\\/?>`, 'gi')
+                updateResult(result.replace(selfClosingRegex, ''))
+            }
+        }
+    }
+
+    return result
+}
+
 /**
  * Returns an ever-increasing unique integer id.
  */
@@ -280,6 +326,7 @@ export function utilsFunctions() {
         isHtml,
         htmlFormatClasses,
         encodeHtml,
+        sanitizeHtml,
         hashString,
     }
 }