v-html

預期：string

詳細

更新元素的 innerHTML 。

注意：內容按普通 HTML 插入 - 不會作為 Vue 模板進行編譯 。

如果試圖使用 v-html 組合模板，可以重新考慮是否通過使用組件來替代。

在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。

在單文件組件里，scoped 的樣式不會應用在 v-html 內部，因為那部分 HTML 沒有被 Vue 的模板編譯器處理。如果你希望針對 v-html 的內容設置帶作用域的 CSS，你可以替換為 CSS Modules 或用一個額外的全局

示例

參考

xss 攻擊演示

export default {

name:"app",

data(){

return {

html:''

}

}

}

運行之后由于 src 地址對應的資源找不到，會觸發 img 標簽的 error 事件，最終 alert 彈框。這便是一個最簡單的 xss 攻擊。

解決 html 指令存在的 xss 漏洞問題

通常我們處理 xss 攻擊會使用一個 xss 的 npm 包來過濾 xss 攻擊代碼。

所以我們要做的就是給指令的 value 包上一層 xss 函數。有同學可能會問，我們在業務代碼里使用 xss 函數處理也行。是的可以，但是我們不能保證團隊每一個成員都會使用 xss 函數處理。

作為前端的架構師，我們需要從項目整體的考慮來處理這類問題，不能指望通過規范來約束團隊成員。

在編譯前會將我們從 vue-loader 傳入的 compilerOptions.directives 和 baseOptions.directives 進行了合并。

這樣我們就能覆蓋 html 指令。

引入 xss 包并掛載到 vue 原型上

import xss from 'xss';

Vue.prototype.xss = xss在 vue.config.js 中覆寫 html 指令

chainWebpack: config => {

config.module

.rule("vue")

.use("vue-loader")

.loader("vue-loader")

.tap(options => {

options.compilerOptions.directives = {

html(node, directiveMeta) {

(node.props || (node.props = [])).push({

name: "innerHTML",

value: `xss(_s(${directiveMeta.value}))`

});

}

};

return options;

});

}

這樣我們就從源頭解決了 html 指令存在的潛在 xss 攻擊。

可能存在的問題

此外某些情況下，使用{{{}}}符號仍然不能解析 html 標簽，但 v-htm 指令卻可以，可能是 Vue.js 存在的 bug 。

其它參考

總結

以上是生活随笔為你收集整理的vue前端 html,Vue.js v-html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。