如何将 DOMPurify 包与 NuxtJS 一起使用？错误：“default.a.sanitize 不是函数”

Question

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

dompurify__WEBPACK_IMPORTED_MODULE_1___default.a.sanitize is not a function

关于如何解决这个问题有什么建议吗？我在此处的 codeandbox 中提供了此代码： 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/Nuxt 中实现这一点，我建议使用 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

如果你想将其用作 Nuxt 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>