----vue项目v-html 潜在xss攻击----
   HTML是一种超文本标记语言，通过将一些字符特殊地对待来区别文本和标记，例如，小于符号（<）被看作是HTML标签的开始，与之间的字符是页面的标题等等。当动态页面中插入的内容含有这些特殊字符（如<）时，用户浏览器会将其误认为是插入了HTML标签，当这些HTML标签引入了一段JavaScript脚本时，这些脚本程序就将会在用户浏览器中执行。所以，当这些特殊字符不能被动态页面检查或检查出现失误时，就将会产生XSS漏洞。在这里插入图片描述

  <head>
   
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root" v-html="message">
    </div>
    <script>
      new Vue({
        el: '#root',
        data() {
          return {
            message: 'hello vue<img src="../qwe" οnerrοr="alert(1)">'
          }
        },
      })
    </script>
  </body>
</html>

这个时候我查看了一下F12html标签,可以发现字符串"hello vue<img src="../qwe" onerror="alert(1)"中, <img src... 竟然被渲染成了图片这个是为什么呢?

在这里插入图片描述
   带着上面的疑问我在网上查阅了一些资料发现 v-html运行时在created阶段触发invokeCreateHooks函数,进而执行updateDOMProps函数，更新元素的innerHTML内容。
   v-html指令最终调用的是innerHTML方法将指令的value插入到对应的元素里。这就是造成xss攻击的‘漏洞’了。当然vue官网也给出了提示: 只在可信内容上使用 v-html，永不用在用户提交的内容上。
 二.解决办法
   通过上面的问题查找我们可以确定了造成攻击事件主要的原因就是v-html最后渲染的时候是使用的innerHTML方法,这样的话我就有了第一个解决办法,将<>替换成html特殊编码即可.
办法一:

   let obj = {
        name: "asdfasd <img  onerror='alert(1)'",
        age: "模拟2 <img  onerror='alert(1)'",
        }
        Object.keys(obj).forEach((key,i) => {
            obj[key] = obj[key].replace(/</g,'&lt;') 
            
        });
        这个有一个好处就是在项目小的时候 改动简单,省事,但是当项目比较大的时候多人协作开发的时候,
        这个办法就不能用了,因为用起来太繁琐了,比较麻烦,

办法二:
  使用DOMPurify使v-html绕过xss攻击.
npm install dompurify
  下载完之后在main.js中,将DOMPurify挂在到vue上面,在需要的页面在引入

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

然后在需要使用v-html的页面,将v-html改为 v-dompurify-html即可解决xss攻击问题.但是这样写的话也是比较麻烦的,如果这个项目已经做的很大了,在一个个的去改,这样费事费力,还不易于后期开发的维护.当人员离职入职的时候容易造成交接不到位的问题.
在这里插入图片描述
办法三:
  最后我在网上找到一个更好的办法通过引入组件xss,在编译前将从vue-loader传入的compilerOptions.directives和baseOptions.directives进行了合并。 这样我们就能覆盖html指令。
npm isntall xss
同样在main.js页面引入

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;
        });
}

   这样的话,这个项目不论之后如何迭代都可以从根本上面解决xss攻击的问题.省时省力,一次性从根本上解决问题.
   以上是我对v-html造成xss攻击的一个总结,如果大家有任何疑问都可以随时在评论区留言指正.我会在第一时间回复大家或修改.

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue