Merge pull request #654 from code16/fix-vue-xss

Sanitize vue

Author: aguingand

resources/js/components/TemplateRenderer.vue

@@ -10,25 +10,28 @@
 </script>
 <script lang="ts" setup>
     import { computed } from 'vue';
+    import type { Component } from 'vue';
 
     const props = defineProps<{
-        templateData?: Record<string, any>,
-        templateProps?: string[],
         template: string,
+        components?: Record<string, Component>,
     }>();
 
     const component = computed(() => ({
-        components,
-        template: `<div class="SharpTemplate">${props.template ?? ''}</div>`,
-        props: [
-            ...(props.templateProps || []),
-            ...Object.keys(props.templateData ?? {}),
-        ],
+        components: {
+            ...components,
+            ...props.components,
+        },
+        template: `<div data-sharp-template>${sanitizeForVue(props.template ?? '')}</div>`,
     }));
+
+    function sanitizeForVue(template: string) {
+        return template.replaceAll('{{', '&lcub;&lcub;').replaceAll('}}', '&rcub;&rcub;');
+    }
 </script>
 
 <template>
-    <component :is="component" v-bind="templateData ?? {}">
+    <component :is="component">
         <slot />
     </component>
 </template>

resources/js/show/components/fields/text/TextRenderer.vue

@@ -4,7 +4,7 @@
     import Html from "@/show/components/fields/text/nodes/Html.vue";
     import { ShowTextFieldData } from "@/types";
     import Embed from "@/show/components/fields/text/nodes/Embed.vue";
-    import { components } from '@/components/TemplateRenderer.vue';
+    import TemplateRenderer from '@/components/TemplateRenderer.vue';
 
     const props = defineProps<{
         field: ShowTextFieldData,
@@ -21,31 +21,26 @@
             dom.content.removeChild(htmlNode);
         });
         return dom.innerHTML;
-    })
+    });
 
-    const component = computed<Component>(() => ({
-        template: `<div>${formattedContent.value}</div>`,
-        components: {
-            ...components,
-            'x-sharp-file': File,
-            'x-sharp-image': File,
-            'html-content': Html,
-            ...Object.fromEntries(
-                Object.entries(props.field.embeds ?? {})
-                    .map(([embedKey, embed]) => [
-                        embed.tag,
-                        {
-                            template: '<Embed :embed="embed" v-bind="$attrs"></Embed>',
-                            components: { Embed },
-                            data: () => ({ embed }),
-                        }
-                    ])
-            ),
-        },
+    const components = computed(() => ({
+        'x-sharp-file': File,
+        'x-sharp-image': File,
+        'html-content': Html,
+        ...Object.fromEntries(
+            Object.entries(props.field.embeds ?? {})
+                .map(([embedKey, embed]) => [
+                    embed.tag,
+                    {
+                        template: '<Embed :embed="embed" v-bind="$attrs"></Embed>',
+                        components: { Embed },
+                        data: () => ({ embed }),
+                    }
+                ])
+        ),
     }));
 </script>
 
 <template>
-    <component :is="component" />
+    <TemplateRenderer :template="formattedContent" :components="components" />
 </template>
-

resources/js/utils/sanitize.ts

@@ -6,7 +6,9 @@ export function sanitize(html: string | null) {
             ADD_TAGS: ['iframe'],
             CUSTOM_ELEMENT_HANDLING: {
                 tagNameCheck: () => true,
-                attributeNameCheck: () => true,
+                attributeNameCheck: (name) => {
+                    return !name.match(/^(v-)|:|@|#/); // remove vue related attributes
+                },
             },
         })
         : html;