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指令

  • 相关阅读:
    windows phone 7 客户端和web的交互(WebBrowser的使用)
    Android绑定对象到ListView中(知识积累)
    ASP.Net绑定数据到树[TreeView]献给善忘的,依然是菜鸟的我们。
    windows phone 7 通过Post提交URL到服务器,从服务器获取数据(比如登陆时候使用)
    Android从网络下载XML输出流或者字符串(知识积累)
    在GridView和Repeater上显示序号[最简单的方式,也是最实用的方式]献给善忘的依然是的菜鸟我们
    windows phone 7 通过麦克风录音,并且播放
    windows phone 7 定位(获取经纬度),然后找到经纬度所在的位置(城市信息)
    C# winform 登陆等待中. [异步请求]BackgroundWorker组件的使用
    Android解析XML之XmlPullParser
  • 原文地址:https://www.cnblogs.com/yaoling/p/14944721.html
Copyright © 2011-2022 走看看