我正在使用以下方法綁定 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>
5 回答
HUH函數
TA貢獻1836條經驗 獲得超4個贊
如果傳遞給 v-html 的內容是經過凈化的 HTML，則可以禁用該規則。
通過將 html 包裹起來來禁用該規則
<!-- eslint-disable vue/no-v-html -->
<button
? ? ? ? id="foreignerBtn"
? ? ? ? class="tabButton"
? ? ? ? @click="foreignerClick"
? ? ? ? v-html="textContent2"
? ? ? ></button>
<!--eslint-enable-->
慕森卡
TA貢獻1806條經驗 獲得超8個贊
正如另一個答案中所述，您可以禁用警告，但一個好的做法是確保正確禁用該規則。
為此，您可以使用dompurify來解析您提供給瀏覽器的 HTML，刪除任何惡意部分并安全地顯示它。
問題仍然存在，但你可以使用RisXSS ，它是一個 ESLint 插件，v-html?如果你之前沒有清理它，它會警告用戶（從某種意義上說，這是vue/no-v-htmlESLint 規則的改進版本）。
為此，請安裝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>
躍然一笑
TA貢獻1826條經驗 獲得超6個贊
在你的main.js（或者你定義 vue 實例的任何地方），添加：
import DOMPurify from "dompurify";
// ...
Vue.directive("sane-html", (el, binding) => {
? el.innerHTML = DOMPurify.sanitize(binding.value);
});
現在，無論您在何處使用該指令v-html，請v-sane-html改為使用。
牛魔王的故事
TA貢獻1830條經驗 獲得超3個贊
我想禁用整個項目，所以我在“eslintConfig”的“rules”中添加了這一行
"eslintConfig": {
...
"rules": {
...
"vue/no-v-text-v-html-on-component": "warn"
}
函數式編程
TA貢獻1807條經驗 獲得超9個贊
您可以將代碼包裝在
<!-- eslint-disable -->
<button
id="foreignerBtn"
class="tabButton"
@click="foreignerClick"
v-html="textContent2"
></button>
<!-- eslint-enable -->
它將隱藏所有 eslint 警告，包括 v-html
- 5 回答
- 0 關注
- 363 瀏覽
添加回答
舉報
0/150
提交
取消