fix: disallow a bunch of html

This commit is contained in:
MiniDigger | Martin 2023-04-23 01:28:48 +02:00
parent de91197ae9
commit df1c2c2cbe
5 changed files with 12 additions and 8 deletions

View File

@ -9,5 +9,5 @@ const { announcement } = toRefs(props);
<template>
<!-- eslint-disable-next-line vue/no-v-html -->
<div :style="'background-color:' + announcement.color" class="p-2 text-center text-white" v-html="useDomPurify().sanitize(announcement.text)" />
<div :style="'background-color:' + announcement.color" class="p-2 text-center text-white" v-html="useDomPurify(announcement.text)" />
</template>

View File

@ -16,7 +16,7 @@ const props = withDefaults(
}
);
const renderedMarkdown = computed(() => useDomPurify().sanitize(parseMarkdown(props.raw)));
const renderedMarkdown = computed(() => useDomPurify(parseMarkdown(props.raw)));
watchPostEffect(async () => {
if (!import.meta.env.SSR) {

View File

@ -105,7 +105,7 @@ async function startEditing() {
maxHeight: props.maxHeight,
previewClass: ["prose", "markdown", "background-default"],
previewRender: (markdownPlaintext, previewElement) => {
const html = useDomPurify().sanitize(parseMarkdown(markdownPlaintext));
const html = useDomPurify(parseMarkdown(markdownPlaintext));
previewElement.innerHTML = html;
if (typeof html.includes === "function" && html.includes("<code")) {
usePrismStore().handlePrism();
@ -113,7 +113,7 @@ async function startEditing() {
return null;
},
renderingConfig: {
sanitizerFunction: (renderedHTML) => useDomPurify().sanitize(renderedHTML),
sanitizerFunction: (renderedHTML) => useDomPurify(renderedHTML),
},
});
easyMDE.codemirror.on("change", (instance) => (rawEdited.value = instance.getValue()));

View File

@ -44,7 +44,7 @@ const prettyDiff = computed(() => {
break;
}
}
return useDomPurify().sanitize(html.join("").replaceAll("&para;", ""));
return useDomPurify(html.join("").replaceAll("&para;", ""));
});
</script>

View File

@ -1,6 +1,10 @@
import { DOMPurifyI } from "dompurify";
import { Config, DOMPurifyI } from "dompurify";
import { useNuxtApp } from "#imports";
export function useDomPurify() {
return useNuxtApp().$dompurify as DOMPurifyI;
export const config = {
FORBID_TAGS: ["style", "base", "head", "link", "meta", "title", "body", "form", "input", "dialog", "embed", "button", "frame", "iframe", "html", "textarea"],
FORBID_ATTR: ["style"],
} as Config;
export function useDomPurify(text: string) {
return (useNuxtApp().$dompurify as DOMPurifyI).sanitize(text, config) as string;
}