fix: dompurify removes sandbox href

chatpire · Oct 17, 2023 · f5829d7 · f5829d7
1 parent 3cf101e
commit f5829d7
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/frontend/src/utils/chat.ts b/frontend/src/utils/chat.ts
@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+
 import { i18n } from '@/i18n';
 import { allChatModelNames } from '@/types/json_schema';
 import {
@@ -16,7 +18,6 @@ import {
   OpenaiWebChatMessageTextContent,
   OpenaiWebChatModels,
 } from '@/types/schema';
-
 const t = i18n.global.t as any;
 
 export const chatModelColorMap: Record<string, string> = {
@@ -312,3 +313,7 @@ export function replaceMathDelimiters(input: string) {
   // return output;
   return output;
 }
+
+export function dompurifyRenderedHtml(html: string) {
+  return DOMPurify.sanitize(html, {ALLOW_UNKNOWN_PROTOCOLS: true});
+}
diff --git a/frontend/src/views/conversation/components/MessageRowMultimodalTextDalleDisplay.vue b/frontend/src/views/conversation/components/MessageRowMultimodalTextDalleDisplay.vue
@@ -32,13 +32,12 @@
 </template>
 
 <script setup lang="ts">
-import DOMPurify from 'dompurify';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { useAppStore } from '@/store';
 import { BaseChatMessage, OpenaiWebChatMessageMultimodalTextContentImagePart } from '@/types/schema';
-import { getContentRawText, getMultimodalContentImageParts, getTextMessageContent } from '@/utils/chat';
+import { dompurifyRenderedHtml, getContentRawText, getMultimodalContentImageParts } from '@/utils/chat';
 import md from '@/utils/markdown';
 
 import { bindOnclick, processPreTags } from '../utils/codeblock';
@@ -62,7 +61,7 @@ const renderedContent = computed(() => {
   if (!props.renderMarkdown) {
     return content.value;
   }
-  const result = DOMPurify.sanitize(md.render(content.value || ''));
+  const result = dompurifyRenderedHtml(md.render(content.value || ''));
   return processPreTags(result, appStore.preference.codeAutoWrap);
 });
 

diff --git a/frontend/src/views/conversation/components/MessageRowMultimodalTextDisplay.vue b/frontend/src/views/conversation/components/MessageRowMultimodalTextDisplay.vue
@@ -55,13 +55,12 @@
 </template>
 
 <script setup lang="ts">
-import DOMPurify from 'dompurify';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { useAppStore } from '@/store';
 import { BaseChatMessage, OpenaiWebChatMessageMultimodalTextContentImagePart } from '@/types/schema';
-import { getContentRawText, getMultimodalContentImageParts, getTextMessageContent } from '@/utils/chat';
+import { dompurifyRenderedHtml, getContentRawText, getMultimodalContentImageParts } from '@/utils/chat';
 import md from '@/utils/markdown';
 
 import { bindOnclick, processPreTags } from '../utils/codeblock';
@@ -88,7 +87,7 @@ const renderedContent = computed(() => {
   if (!props.renderMarkdown) {
     return content.value;
   }
-  const result = DOMPurify.sanitize(md.render(content.value || ''));
+  const result = dompurifyRenderedHtml(md.render(content.value || ''));
   return processPreTags(result, appStore.preference.codeAutoWrap);
 });
 

diff --git a/frontend/src/views/conversation/components/MessageRowTextDisplay.vue b/frontend/src/views/conversation/components/MessageRowTextDisplay.vue
@@ -6,13 +6,12 @@
 </template>
 
 <script setup lang="ts">
-import DOMPurify from 'dompurify';
 import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { useAppStore } from '@/store';
 import { BaseChatMessage } from '@/types/schema';
-import { getTextMessageContent } from '@/utils/chat';
+import { dompurifyRenderedHtml, getTextMessageContent } from '@/utils/chat';
 import md from '@/utils/markdown';
 
 import { bindOnclick, processPreTags } from '../utils/codeblock';
@@ -37,7 +36,7 @@ const renderedContent = computed(() => {
     return content.value;
   }
   console.log;
-  const result = DOMPurify.sanitize(md.render(content.value || ''));
+  const result = dompurifyRenderedHtml(md.render(content.value || ''));
   return processPreTags(result, appStore.preference.codeAutoWrap);
 });