第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

Vuejs：根據(jù) eslint 規(guī)則對(duì) html 數(shù)據(jù)進(jìn)行 V-HTML 數(shù)據(jù)綁定

Vuejs：根據(jù) eslint 規(guī)則對(duì) html 數(shù)據(jù)進(jìn)行 V-HTML 數(shù)據(jù)綁定

月關(guān)寶盒 2023-10-10 15:15:01
我正在使用以下方法綁定 html 并顯示在我的頁面中。它工作完美，但是我收到來自 eslint 的警告，“v-html”指令可能導(dǎo)致 XSS 攻擊。eslint(vue/no-v-html)  <button        id="foreignerBtn"        class="tabButton"        @click="foreignerClick"        v-html="textContent2"      ></button>然后我按照以下方法更改它。但我無法渲染 html 標(biāo)簽。 <button            id="foreignerBtn"            class="tabButton"            @click="foreignerClick"          >{{ textContent2 }}</button>
查看完整描述

5 回答

?
HUH函數(shù)

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超4個(gè)贊

如果傳遞給 v-html 的內(nèi)容是經(jīng)過凈化的 HTML，則可以禁用該規(guī)則。


通過將 html 包裹起來來禁用該規(guī)則

<!-- eslint-disable vue/no-v-html -->

<button

? ? ? ? id="foreignerBtn"

? ? ? ? class="tabButton"

? ? ? ? @click="foreignerClick"

? ? ? ? v-html="textContent2"

? ? ? ></button>

<!--eslint-enable-->


查看完整回答
反對(duì) 回復(fù) 2023-10-10
?
慕森卡

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊

正如另一個(gè)答案中所述，您可以禁用警告，但一個(gè)好的做法是確保正確禁用該規(guī)則。

為此，您可以使用dompurify來解析您提供給瀏覽器的 HTML，刪除任何惡意部分并安全地顯示它。

問題仍然存在，但你可以使用RisXSS ，它是一個(gè) ESLint 插件，v-html?如果你之前沒有清理它，它會(huì)警告用戶（從某種意義上說，這是vue/no-v-htmlESLint 規(guī)則的改進(jìn)版本）。

為此，請安裝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>


查看完整回答
反對(duì) 回復(fù) 2023-10-10
?
躍然一笑

TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊

在你的main.js（或者你定義 vue 實(shí)例的任何地方），添加：

import DOMPurify from "dompurify";


// ...


Vue.directive("sane-html", (el, binding) => {

? el.innerHTML = DOMPurify.sanitize(binding.value);

});

現(xiàn)在，無論您在何處使用該指令v-html，請v-sane-html改為使用。


查看完整回答
反對(duì) 回復(fù) 2023-10-10
?
牛魔王的故事

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個(gè)贊

我想禁用整個(gè)項(xiàng)目，所以我在“eslintConfig”的“rules”中添加了這一行


"eslintConfig": {

   ...

   "rules": {

     ...

     "vue/no-v-text-v-html-on-component": "warn"

   }


查看完整回答
反對(duì) 回復(fù) 2023-10-10
?
函數(shù)式編程

TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊

您可以將代碼包裝在


<!-- eslint-disable -->

<button

  id="foreignerBtn"

  class="tabButton"

  @click="foreignerClick"

  v-html="textContent2"

></button>

<!-- eslint-enable -->

它將隱藏所有 eslint 警告，包括 v-html


查看完整回答
反對(duì) 回復(fù) 2023-10-10
  • 5 回答
  • 0 關(guān)注
  • 396 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)