XSS 攻击

作者: 梦晓半夏_d68a | 来源:发表于2023-04-26 15:11 被阅读0次

第三章 XSS 攻击
跨站攻击脚本-XSS
常见的WEB攻击
前端攻击和防御(一)XSS跨站脚本攻击
Web安全
2021-05-30 前端常见的攻击方式有哪些？如果解决？安全措
前端防范xss攻击的实用方案
开发安全问题
XSS攻击
XSS CSRF

v-html 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/onerror=alert(123)>'
          }
        },
      })
    </script>
  </body>
</html>

image.png

v-html运行时在created阶段触发invokeCreateHooks函数,进而执行updateDOMProps函数，更新元素的innerHTML内容。
v-html指令最终调用的是innerHTML方法将指令的value插入到对应的元素里。这就是造成xss攻击的‘漏洞’了。当然vue官网也给出了提示: 只在可信内容上使用 v-html，永不用在用户提交的内容上。

解决思路：
通过上面的问题查找我们可以确定了造成攻击事件主要的原因就是v-html最后渲染的时候是使用的innerHTML方法,这样的话我就有了第一个解决办法,将<>替换成html特殊编码即可.

方法1：

  <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/onerror=alert(123)>'.replace(/</g,'&lt;') 
          }
        }
      })
    </script>
  </body>
</html>

image.png

方法2 dompurify

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

在需要使用v-html的页面,将v-html改为 v-dompurify-html即可解决xss攻击问题.

缺点：
全部替换很麻烦

方法3 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会把除了标签和内容之外的所有东西都给过滤掉，如calss，style过滤掉，那么样式就展现不出来了，导致美观度不够。

方法4 数据转为指定类型
如果确认后端返回的数据类型，可以直接转换类型。

比如后端返回一个数字，前端获取到了返回一个标签展示出来，为了避免后端返回的不是数字类型，使用parseInt()

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="root" v-html="total">
  </div>
  <script>
    new Vue({
      el: '#root',
      data() {
        return {
          total: `total: <span class="total">${parseInt(100) || 0}</span>`</span>`
        }
      }
    })
  </script>
</body>
</html>

image.png

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="root" v-html="total">
  </div>
  <script>
    new Vue({
      el: '#root',
      data() {
        return {
          total: `total: <span class="total">${parseInt('<img src/onerror=alert(123)>') || 0}</span>`
        }
      }
    })
  </script>
<style>
    .total {
      color: red;
    }
  </style>
</body>
</html>