v-html可能出现的xss攻击

其实这个点很容易出现

只要在输入框中输入<img src='../a.png' onerror='alert(1)'/>，当这个图片找不到时，就会弹出1。这其实就是一种xss攻击，可以在输入框输入任何script，用来做攻击者想做的事情。

如下图

解决v-html会引发的xss攻击

虽然v-html有风险，但有些情况下，我们不得不使用，那么就需要使用相关方案来规避v-html的风险

方案一：使用vue-dompurify-html插件

本人更推荐此方案，其一是因为该插件体积小，才13.1 kB，方案二的xss插件有144 kB，当然更倾向于轻便。其二是因为，xss插件会把除了标签和内容外的其他内容都过滤掉，这样对于富文本编辑器来说，有些样式就无法展示处理，我们无法实现markdown正常预览功能

• 第一步安装： npm i vue-dompurify-html

• 第二步引入：

  import VueDOMPurifyHTML from 'vue-dompurify-html'
  Vue.use(VueDOMPurifyHTML)
  

当我们使用时，却报了错，此时为当前最新版，v3.1.2

查了资料才发现，从3.0版本开始，放弃支持vue2，而当前项目使用的是vue2。 github.com/LeSuisse/vu…

那如何在vue2中使用呢？

查看了相关issue后发现，vue-legacy分支的支持并没有被删除。 github.com/LeSuisse/vu…

于是，将刚刚安装的卸载掉，按照vue-legacy分支npm install vue-dompurify-html@vue-legacy 然后就能正常使用了，直接将项目中的v-html替换为v-dompurify-html。

<img src='../a.png' onerror='alert(1)'/>就不再会弹出窗来。

方案二：使用xss插件

• 第一步安装：npm isntall xss

• 第二步引入：

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

• 第三步在vue.config.js中重新写v-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;
          });
  }
  

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情