安全研究

Read 11187 41 comments

前言

如今大量前端开发皆采用现代化前端框架，如Vue和React，这类框架对于XSS提供了自带的防御措施，大部分情况下基本完全杜绝了XSS，但是在某些特定的场合下，依旧存在XSS风险，为了避免在一些渗透测试，安全服务中在这类框架上花无用的挖洞时间，此文来探讨一下此类框架是如何防御XSS以及如何产生XSS的
介于此，此文将尽可能少的介绍Vue和React的基础知识，不了解的读者可以视情况先学习一下前置知识在看此文

Vue

防御

我们知道，Vue采用数据绑定的方式，将变量绑定到dom树上，如下所示

<div id="app">
    <p>{{ message }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    })
</script>

el代表dom的查询表达式，查询id=app的元素
然后将 {{}}里的message变量渲染为Hello Vue.js! 字符串
几乎所有的开发都这么写，那么假如我们message变量可控会如何

<div id="app">
    <p>{{ message }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: '<svg/onload=alert(1)>'
        }
    })
</script>

这里message被我们硬编码为了html代码，当然正常代码会动态给message赋值，这里效果一样，不额外举例，现在我们看看渲染的结果
图片.png
可以看到，即使我们可控这些变量，开发者也没有做任何过滤，我们的xss payload依旧被转义为实体字符。
这就是vue底层做的事，vue对于变量绑定，底层其实是用了Javascript原生的innerText方法，而innerText默认会把所有html元素进行转义，由于innerText也是Js原生方法，当然正常情况不可能绕过

所以有时候，我们在某些系统里狂插payload，大家会发现没有一个弹窗，可能这不是开发者防御意识高，只是人家用了框架，攻击的方式错了

隐患1

如果开发者有将html代码作为值传入到变量中的需求呢，比如动态生成表格，对于一个大型框架来说，肯定有这种渲染标签的功能，
对于Vue来说，这个功能的指令叫V-html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-html="message"></p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: '<svg/onload=alert(1)>'
        }
    })
</script>
</body>
</html>

图片.png
很明显感觉到，v-html指令应该就是调用的document.innerHTML方法
如果开发者用v-html方法进行参数传递，并且参数可控，那么即可造成XSS

隐患2

vue用的最多的方法还是{{}},双大括号变量绑定，这个双大括号本质和 v-text指令是一样的，就是上面说的调用的innerText方法，对于一般的普通系统来说，几乎开发者全程使用{{}}进行参数传递，很少会额外用到v-html指令，那么如果不用v-html就没有常见的XSS问题了嘛？
对于一种很常见的XSS case，vue是没有做任何的防御的

<body>
<div id="app">
    <a :href="url">click me</a>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            url: "javascript:alert(111)"
        }
    })
</script>
</body>

a标签的属性xss，vue是没有任何防御措施的，我们只需要传入javascript:alert(1)即可触发XSS
除此以外
iframe的src属性，object标签的src属性都是可以触发XSS的


:href 其实是 v-bind:href的缩写
下面两个写法一样

    <a :href="url">click me</a>
    <a v-bind:href="url">click me</a>

隐患3

在javascript函数里面使用原生危险函数，比如innerHTML eval等，这个不再多说


React

React习惯用类语法来编写

隐患1

跟上诉href src一样，react不会对链接产生的xss进行过滤

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

    class WebSite extends React.Component {
        constructor() {
            super();

        }
        render() {
            return (
                <div>
                    <a href={this.props.site}>click me</a>
                </div>
            );
        }
    }
    ReactDOM.render(
        <WebSite site="javascript:alert(1)"/>,
        document.getElementById('example')
    );
</script>

</body>
</html>

隐患2

同样如上v-html，react也提供了一个渲染html的方法,不过这个办法名字比较吓人
dangerouslySetInnerHTML


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<script type="text/babel">

    class WebSite extends React.Component {
        constructor() {
            super();

        }
        render() {
            return (
                <div>
                    <p dangerouslySetInnerHTML={{__html:this.props.site}}></p>
                </div>
            );
        }
    }
    ReactDOM.render(
        <WebSite site="<svg/onload=alert(1)>"/>,
        document.getElementById('example')
    );
</script>

</body>
</html>

这个dangerouslySetInnerHTML跟vue的v-html比较类似

隐患3

同上，使用原生函数

总结

了解这些会有什么帮助

白盒审计

如果我们在对前端项目进行审核的时候，如果发现前端项目是用vue或者react进行编写的话，我们就可以只关注上面的危险函数关键字，避开其他的常规功能，比如全局搜索 如下关键字

:href
v-bind:href
:src
v-bind:src
v-html
------------------------------
href={
src={
dangerouslySetInnerHTML=

------------------------------
innerHTML
eval(
....

黑盒审计

当然，大部分时候我们是没有源代码的，我们一般面对的是一个webpack打包后的构建产物js，如果有sourcemap泄露的话，我们就可以当上面白盒进行审计，如果在没有sourcemap泄露的情况下，就必须硬怼黑盒环境了，当然黑盒会有一些技巧
一般来说，Vue和React不会单独使用,大部分与现在前端常用的UI框架结合使用，比如Vue+elementUI，React+Antdesign


这类UI框架有个很明显的特征，一般常用于CRM系统，就是什么后台管理系统这类的，像这个样子


图片.png
图片.png
图片.png
这种清一色的，左边上面菜单栏，中间内容，UI比较爽快的，大部分都是Vue+React的前端框架，所以在这里面疯狂扔<img src=#....是没有用的
正确的姿势是：
找输入链接的地方，比如网址，图片链接等输入框，插入javascript:alert(1)等，当然这里也有可能SSRF
找富文本，表格等，或者抓包发现往后端直接发送标签的地方，插入XSS poc
放弃掉其他功能，因为框架会做默认的转义


Comment

  1. admin
    Firefox 78

    评论测试

    2020-07-19 20:48
  2. admin
    Firefox 78

    评论测试

    2020-07-19 20:49
  3. admin
    Firefox 78

    评论测试2

    2020-07-19 20:50
  4. admin
    Firefox 78

    评论测试3

    2020-07-19 20:50
  5. evoa
    Chrome 84

    太强了，学到了很多

    2020-08-17 14:16
  6. evoa
    Chrome 84

    太强了，学到了很多

    2020-08-17 14:16
  7. evoatql!
    Chrome 84

    太强了，学到了很多

    2020-08-17 14:17
This is just a placeholder img.