Javascript Vuejs:V-HTML数据根据eslint规则绑定HTML数据

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

然后我用下面的方法改变它。但我无法呈现html标记

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

{{textContent2}

正如Decade Moon提到的，如果传递给v-html的内容是经过净化的html，则可以禁用该规则

通过在中包装html来禁用规则

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

---

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

要做到这一点，您可以使用它来解析您提供给浏览器的HTML，删除任何恶意部分并安全地显示它

这个问题仍然存在，但您可以使用它，这是一个ESLint插件，如果您以前没有对

v-html

进行清理（从某种意义上说，这是

vue/no-v-html

ESLint规则的改进版本），它将警告您使用

v-html

为此，请安装

domprify

和

eslint插件risxss

：

npm install dompurify eslint-plugin-risxss

将

risxss

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

>
从“domprify”导入domprify；
导出默认值{
数据（）{
返回{
sanitizedTextContent2:DOMPurify.sanitize（textContent2）
}
}
}

---

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

您希望呈现哪种HTML？它是用户生成的内容吗？根据他们的文档，使用sdas ADA生成，如果您确定传递给v-html的内容是经过净化的html，则可以禁用此规则。另一件事，（不知道这是你写评论时唯一的错误），但是你上面给出的例子不是正确的html格式adas（第一个标记应该是）

npm install dompurify eslint-plugin-risxss