vue系列-vue解决v-html指令潜在的xss攻击_compileroptions.directives-优快云博客

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

本文链接：https://blog.youkuaiyun.com/zqd_java/article/details/114730405

通常我们处理xss攻击会使用一个xss的npm包来过滤xss攻击代码。所以我们要做的就是给指令的value包上一层xss函数。有同学可能会问，我们在业务代码里使用xss函数处理也行。是的可以，但是我们不能保证团队每一个成员都会使用xss函数处理。作为前端的架构师，我们需要从项目整体的考虑来处理这类问题，不能指望通过规范来约束团队成员。
有了前面的知识储备，我们知道了在编译前会将我们从vue-loader传入的compilerOptions.directives和baseOptions.directives进行了合并。这样我们就能覆盖html指令。

1.引入xss包并挂载到vue原型上(入口文件，main.js)

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

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