Vuejs：针对 eslint 规则的 html 数据的 V-HTML 数据绑定答案

【问题标题】：Vuejs: V-HTML data binding of html data against eslint ruleVuejs：针对 eslint 规则的 html 数据的 V-HTML 数据绑定
【发布时间】：2020-07-05 14:30:14
【问题描述】：

我正在使用以下方法绑定html并显示在我的页面中。它工作得很好，但是我从我的 eslint 收到警告说“v-html”指令可能导致 XSS 攻击。eslint(vue/no-v-html)

  <button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
      ></button>

然后我按照以下方法更改它。但我无法呈现 html 标签。

 <button
            id="foreignerBtn"
            class="tabButton"
            @click="foreignerClick"
          >{{ textContent2 }}</button>

【问题讨论】：

你想渲染什么样的 HTML？是用户生成的内容吗？
像这样用 sdas adas 生成
根据他们的文档，如果您确定传递给 v-html 的内容是经过净化的 HTML，您可以禁用此规则。另一件事，（不知道这是你写评论时唯一的错误），但你上面给出的例子不是正确的html格式adas（第一个标签应该是
）跨度>

标签： javascript html vue.js data-binding eslint

【解决方案1】：

您可以将代码包装在

<!-- eslint-disable -->
<button
  id="foreignerBtn"
  class="tabButton"
  @click="foreignerClick"
  v-html="textContent2"
></button>
<!-- eslint-enable -->

它会隐藏所有的 eslint 警告，包括 v-html

【讨论】：

【解决方案2】：

如另一个答案中所述，您可以禁用警告，但一个好的做法是确保正确禁用该规则。

为此，您可以使用dompurify 解析您提供给浏览器的 HTML，删除任何恶意部分并安全显示。

问题仍然存在，但您可以使用 RisXSS 这是一个 ESLint 插件，它会警告 v-html 的使用如果您之前没有对其进行消毒（从某种意义上说，这是vue/no-v-html ESLint 规则的改进版）。

为此，请安装dompurify 和eslint-plugin-risxss：

npm install dompurify eslint-plugin-risxss

将risxss 添加到您的 ESLint 插件中，然后使用 DOMPurify：

<template>
    <button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="sanitizedTextContent2"
        <!-- no warning, good to go -->
    ></button>
    <button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
        <!-- warning here -->
    ></button>
</template>
<script>
import DOMPurify from 'dompurify';

export default {
    data () {
    return {
        sanitizedTextContent2: DOMPurify.sanitize(textContent2)
    }
    }
}
</script>

免责声明：我是 RisXSS 插件的贡献者。

【讨论】：

酷！我将在我的下一个项目中尝试这个

【解决方案3】：

正如 Decade Moon 所说，如果传递给 v-html 的内容是经过净化的 HTML，您可以禁用该规则。

https://eslint.vuejs.org/rules/no-v-html.html

通过包装html来禁用规则

<!-- eslint-disable vue/no-v-html -->
<button
        id="foreignerBtn"
        class="tabButton"
        @click="foreignerClick"
        v-html="textContent2"
      ></button>
<!--eslint-enable-->

【讨论】：

非常有帮助。我不知道为什么 Vue 文档没有说明如何做到这一点。
如果您只想禁用下一行，只需添加：

）跨度>