[英]Retrieve Firestore data and populate Vuejs but v-html update is not working
[英]Vuejs: V-HTML data binding of html data against eslint rule
我正在使用以下方法绑定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>
正如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-->
如另一个答案中所述,您可以禁用警告,但一个好的做法是确保正确禁用规则。
为此,您可以使用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 插件的贡献者。
您可以将代码包装在
<!-- eslint-disable -->
<button
id="foreignerBtn"
class="tabButton"
@click="foreignerClick"
v-html="textContent2"
></button>
<!-- eslint-enable -->
它将隐藏所有 eslint 警告,包括 v-html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.