v-html引起xss攻击场景

<div v-html="html"></html>
data(){
	return {
		html:'alert('1')'
	}
}

解决办法

1. 下载 xss 依赖

npm install xss --save

2. main.js中引入xss包并挂载到vue原型上

import xss from "xss";
Vue.prototype.xss = xss;

3. 在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;
        });