zoukankan      html  css  js  c++  java
  • 处理v-html的潜在XSS风险

    没有进行防止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原型上

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

    在编译前会将我们从vue-loader传入的compilerOptions.directives和baseOptions.directives进行合并。 这样我们就能覆盖html指令。

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

    <p v-html="test"></p>
     
    export default {
      data () {
        return {
          test: `<a οnclick='alert("xss攻击")'>链接</a>`
        }
    }
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

    解决办法

    法一:

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

    npm install xss --save
    
    • 1
    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
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

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

    import xss from 'xss';
    Vue.prototype.xss = xss
    
    • 1
    • 2

    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;
            });
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在编译前会将我们从vue-loader传入的compilerOptions.directives和baseOptions.directives进行合并。 这样我们就能覆盖html指令

  • 相关阅读:
    springboot整合mybatis实现增删改查小案例
    浅谈Nginx负载均衡原理与实现
    使用Cordova框架把Webapp封装成Hybrid App实践——Android篇
    ActiveMQ结合WebScoket应用例子以及介绍
    个人简介
    C#中的属性,字段,变量
    Aspose.Words 直接写response导出docx文档显示文件已损坏需要修复的解决办法
    System.Web.Security.FormsAuthentication.HashPasswordForStoringInConfigFile(string, string)已过时的解决办法
    Aspose.Words:如何添加另一个WORD文档中的Node对象
    基于CPS变换的尾递归转换算法
  • 原文地址:https://www.cnblogs.com/yaoling/p/14944721.html
Copyright © 2011-2022 走看看