如何将 DOMPurify 包与 NuxtJS 一起使用？错误："default.a.sanitize is not a function"

Question

我试图在我的NuxtJS应用程序中使用DOMPurify包，将HTML解析为干净和安全的字符串，以便在UI中渲染。在呈现使用包的页面时，我得到以下错误:

dompurify__WEBPACK_IMPORTED_MODULE_1___default.a.sanitize is not a function

有什么建议我可以解决这个问题吗?我有这个代码可用在这里的codesandbox:https://codesandbox.io/s/reverent-bardeen-kh4wg?file=/pages/index.vue: 0 - 2868

我已经在我的单文件组件中导入了这个包，像这样:

<template>
......cut unnecessary code for this example...
<textarea
id="title_input"
v-model.trim="formValues.title"
class="form-control form-control-lg border-0 fw-bold lh-1 fs-1 mb-3"
placeholder="New post title here..."
maxlength="80"
rows="2"
minlength="6"
autocomplete="off"
required
aria-describedby="titleHelpBlock"
></textarea>
<textarea
id="content_input"
v-model.trim="formValues.content"
class="form-control border-0 h-100"
rows="3"
minlength="30"
maxlength="1000"
autocomplete="off"
placeholder="Write your post here..."
required
aria-describedby="contentHelpBlock"
></textarea>

.....
</template>
<script>
import { debounce } from "lodash";
import DOMPurify from "dompurify";
import marked from "marked";
export default {
name: "UploadForm",
data() {
return {
formValues: {
title: "New post title here...",
content: "Write your post here...",
},
};
},
computed: {
compiledMarkdown() {
// only need the HTML profile, not SVG andMathML stuff
const clean = DOMPurify.sanitize(this.formValues.title, {
USE_PROFILES: { html: true },
});
return marked(clean);
},
},
methods: {
update: debounce(function (e) {
this.input = e.target.value;
}, 300),
updateTitle: debounce(function (e) {
this.formValues.title = e.target.value;
}, 300),
updateContent: debounce(function (e) {
this.formValues.content = e.target.value;
}, 300),
},
};
</script>

Answer 1

不能直接使用v-html作为指令，因为它可能导致XSS: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

因此，您需要对其中一些用户输入进行消毒。
要在Vue/next中实现这一点，我建议使用Vue -dompurify-html

遵循的一些步骤

• 安装yarn add vue-dompurify-html
• 将其导入到.vue文件中，如下所示

import Vue from 'vue'
import VueDOMPurifyHTML from 'vue-dompurify-html'

Vue.use(VueDOMPurifyHTML)

• 在你的模板中像这样使用

<div>
<div v-dompurify-html="rawHtml"></div>
</div>

PS:如果你想把它用在一个Vue2的应用程序，仍然要v2.5.2，更高的版本只支持Vue3。

Answer 2

如果你想使用它作为next 3插件，只需创建一个文件plugins/vue-dompurify-html.js，代码如下:

import VueDOMPurifyHTML from 'vue-dompurify-html'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueDOMPurifyHTML)
})

之后，你可以在任何组件中使用它，而不需要导入:

<div v-dompurify-html="rawHtml"></div>