vue中使用v-html防止xss注入

解决html指令存在的xss漏洞问题
通常我们处理xss攻击会使用一个xss的npm包来过滤xss攻击代码。所以我们要做的就是给指令的value包上一层xss函数。这样我们就能覆盖html指令。

1.下载依赖

npm install xss --save

2.引入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;
        });
}

这样我们就从源头解决了html指令存在的潜在xss攻击。