vue项目 v-html存在植入xss攻击怎么解决

最新推荐文章于 2024-08-22 08:30:13 发布

搬砖的赵某某

最新推荐文章于 2024-08-22 08:30:13 发布

阅读量1.3w

点赞数 14

文章标签： vue js

本文链接：https://blog.csdn.net/zhaoletf/article/details/115101293

版权

本文详细分析了Vue项目中v-html指令导致的XSS攻击风险，解释了HTML注入的原理，并提出了三种解决办法：特殊字符转义、使用DOMPurify库以及集成xss过滤组件。每种方法的适用场景和优缺点都有所阐述，重点在于如何在项目中实现安全的v-html渲染，以确保代码的安全性和可维护性。

摘要由CSDN通过智能技术生成

----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攻击的一个总结,如果大家有任何疑问都可以随时在评论区留言指正.我会在第一时间回复大家或修改.