处理v-html的潜在XSS风险

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

置顶 lj1530562965

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

阅读量1.6k

点赞数

文章标签： v-html xss vue

原文链接：https://blog.csdn.net/lingxiaoxi_ling/article/details/105851736 https://blog.csdn.net/qiumen/article/details/88119275

版权

本文介绍了一个未采取防护措施导致XSS攻击的例子，并提供了两种解决方案：一是利用xss npm包过滤恶意代码；二是通过修改vue.config.js文件覆盖html指令，确保所有html内容都经过xss过滤。

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

没有进行防止xss攻击的例子

<p v-html="test"></p>
 
export default {
  data () {
    return {
      test: `<a οnclick='alert("xss攻击")'>链接</a>`
    }
}

结果，js事件被执行，弹出弹框，我们要杜绝这种情况，保留a标签，拦截onclick事件

解决办法

法一：

使用一个xss的npm包来过滤xss攻击代码，给指令的value包上一层xss函数

npm install xss --save

import xss from 'xss'

<p v-html="$xss(test)"></p>
 
import xss from 'xss'
export default {
  data () {
    return {
      test: `<a οnclick='alert("xss攻击")'>链接</a>`
    }
}
 
Object.defineProperty(Vue.prototype, '$xss', {
  value: xss
})

法二：
在业务代码里使用xss函数处理，不能保证团队每一个成员都会使用xss函数处理，作为前端的架构师，我们需要从项目整体的考虑来处理这类问题，不能指望通过规范来约束团队成员
1.引入xss包并挂载到vue原型上

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