从零开始学web安全（3）

IMWeb前端团队

发布于 2019-12-04 13:41:43

5200

发布于 2019-12-04 13:41:43

文章被收录于专栏：IMWeb前端团队

本文作者：IMWeb 刘志龙原文出处：IMWeb社区 未经同意，禁止转载

上篇文章写到了一个亲自测试的demo，其中有一个地方讲到了“html字符实体”，这是上次xss成功需要知道的非常重要的一个小知识。不仅html字符实体，要继续学习xss需要了解很重要的一个知识就是编码。不然很多时候遇到各种对特殊字符的过滤可能就无能为力了。这篇文章就是要学习一下xss各种编码的知识，内容可能比较枯燥～～

最近sng要求大家做安全考试，跟xss相关有两个个非常经典的题目：

题目1答案是b，题目2答案是c和d。

看完这两道题如果大家都很轻松的答对了，而且知其所以然，那么这篇文章大家快速浏览下或者直接关掉啦～～

为了解答上面的问题，我们先来学习下面编码相关的知识吧～～

常用编码

常用编码类别的介绍借用一下别人的总结，大概有以下三种，当然还有css编码等，因为css expression现在也很少人用了在这里就不介绍了。

html实体编码，十进制、十六进制ASCII码或unicode字符编码，样式为“&#数值;”,例如“<”可以编码为<和<。
js编码，有4类:

(a)三个八进制数字，如果不够个数，前面补0，例如“e”编码为“\145”

(b) 两个十六进制数字，如果不够个数，前面补0，例如“e”编码为“\x65”

(c)四个十六进制数字，如果不够个数，前面补0，例如“e”编码为“\u0065”

(d)对于一些控制字符，使用特殊的C类型的转义风格（例如\n和\r）

url编码，一个百分号和该字符的ASCII编码所对应的2位十六进制数字，例如“/”的URL编码为%2F。我们平时调用的encodeURIComponent等出来的就是url编码。

看完上面的介绍之后估计本来懂的人知道是干嘛的，本来不了解的人估计也觉得并没有什么用。

还是来看看简单的demo吧～～

html实体编码

记得在上篇文章中将到了这个应用到小知识，即是

在html标签属性的值里字符实体是会被转换成相对的字符的。这意味着下面这两个是等价的：

<button onclick="javascipt:alert(1);">xss</button>
<button onclick="j&#x61;vascipt:alert(1);">xss</button>

这个东西有什么用呢？比如某些特殊字符单引号双引号之类的被过滤了但是&＃并没有被过滤，就可以用字符实体替代进行xss啦～～

js编码

刚刚说到了js编码有好几种，其实不用太care，只要知道有js编码这东西就好了，每一种使用起来效果基本没什么不同。

依然看个非常简单的例子

    var body = document.getElementsByTagName('body')[0];

    body.inner/*防过滤*/HTML = '<a href="location.href=\'http://www.baidu.com\'">test</a>';

    // 等同于上面那句
    body.inner/*防过滤*/HTML = '<a href="location.href=\'http\u003a//www.baidu.com\'">test</a>';

这里用的是js编码中的第三种，js的unicode编码，其他用法一样。我们把:编码成了\u003a，当进入到js的可执行环境的时候就会被把编码后的\u003a重新解析成:。

在xss的应用中也是用来绕过过滤。

url编码

这个就比较简单了，我们平时用encodeURIComponent也用了好多次，例如“/”的URL编码为%2F，这个不像前面两个那么常用，但在一些特殊场景也会用到，具体就看看复合编码里面的例子吧。

复合编码

这里要说的复合编码是说前面几种结合起来，这可能是实际场景中用到的最多的了。

依旧来看看一个简单的demo。

var body = document.getElementsByTagName('body')[0];

                // test1
                // url编码
                body.inner/*防过滤*/HTML = '<a href="location.href=\'http%3A%2F%2Fwww.baidu.com\'">test1</a>';

                // test2
                // url编码 -> js unicode编码
                body.inner/*防过滤*/HTML = '<a href="location.href=\'http\u00253A\u00252F\u00252Fwww.baidu.com\'">test2</a>';

                // test3
                // url编码 -> html字符实体编码
                body.inner/*防过滤*/HTML = '<a href="location.href=\'http&#37;3A&#37;2F&#37;2Fwww.baidu.com\'">test3</a>';

                // test4
                // url编码 -> html字符实体编码 -> js unicode编码
                body.inner/*防过滤*/HTML = '<a href="location.href=\'http\u0026#37;3A&#37;2F&#37;2Fwww.baidu.com\'">test4</a>';

                // test5
                // url编码 -> js unicode编码 -> html字符实体编码 
                body.inner/*防过滤*/HTML = '<a href="location.href=\'http&#92;u00253A\u00252F\u00252Fwww.baidu.com\'">test5</a>';

                // test6
                // url编码 -> js unicode编码
                body.inner/*防过滤*/HTML = '<a href="location.href=\'http%3A%2F%2Fwww.baidu\u002ecom\'">test6</a>';

                // test7
                // url编码 -> js unicode编码 -> html字符实体编码
                body.inner/*防过滤*/HTML = '<a href="location.href=\'http%3A%2F%2Fwww.baidu&#92;u002ecom\'">test7</a>';

test1只进行了url编码，在url里面存在url编码可以正常跳转这个是毫无疑问的。

test2我们把%编码成了\u0025，发现一样可以顺利跳转，为什么呢？这里是因为这个a标签被插入到body里面的时候已经经过了js可执行环境，即我们在赋值inner/*防过滤*/HTML的这条语句。在插入到body里面的时候我们在dom树里看到的其实和test1没有什么区别。

test3我们把%编码成了&#37，发现还是可以顺利跳转，这又是为啥？原因也很简单，这个a标签被插入到body之后，就变成了属性里有html字符实体的场景。我们在讲html实体编码的时候已经说过了，属性里面存在html实体编码在dom树的渲染中是会被解析出来的。打开chrome的调试器我们看到的和test1并没有区别。

test4我们在test3的基础上把第一个&通过js unicode编码编程\u0026，发现居然还可以跳转！聪明的读者可能一下子就反应过来了，因为在赋值inner/*防过滤*/HTML的这条语句的时候先经过了js可执行环境，然后到dom中，在js可执行环境里\u0026被解码出来了，在渲染a标签的时候解码出来的&和后面的#37拼接起来，被html实体解码成%，url跳转的时候被url解码成特定的字符。也就是说整个过程其实经过了 js unicode解码 -> html字符实体解码 -> url解码。

好吧，你告诉我是先经过js环境，再到html，反过来编码肯定挂了吧。看看我们的test5，我们在test2的基础上把第一个\编码成\，果然挂了！！没有正确跳转。然而仔细一看，之所以没有正确跳转是因为这个url被当成相对路径了，跳转出来的路径是http://192.168.1.100:8848/http%3A//www.baidu.com, 前面那一串ip端口忽略，后面的地址是对的！只不过被当成了相对路径而已。看来test5这种编码顺序也是可以的？

为了验证上面这个疑问，我测试了一下test1 -> test6 -> test7这个编码顺序，不出意外，正常跳转了。

这时候有些读者可能有点凌乱。先html编码和先js编码看来也没啥区别，瞎逼编就好了。

重新理清下思路，其实我举的这个例子非常特殊，不仅用到了三种编码，编码处理的环境也在不断变化。整个解码过程其实分4步，是这样子的：

inner/*防过滤*/HTML的js可执行环境时候的js解码 ->

dom渲染时的html字符实体解码 ->

location.href的js可执行环境时候的js解码 ->

url跳转时候的url解码

看完这个解码顺序大家应该都了解为什么先html编码还是先js编码都可以了吧，并不是瞎逼编的＝＝

测试题目

回头来看这个题目，如果大家对上面都理解了，估计对这道题目也没有什么疑问。

b为什么是错误的呢，我们来hack它吧～～

看demo：

<div id="test"></div>
<script type="text/javascript">

    var t = document.getElementById('test');
    var hash = location.hash.substr(1);

    t.inner/*防过滤*/HTML = '<a href="#" id="test" onclick="func(\''+ hash +'\')">test</a>';

    function func () {}
</script>

我们模拟了一个这样的例子，从hash里面作为输入点，然后输出到页面上。首先上面这个没有任何过滤。

我们写了个这样的hash － "onmouseover="alert(1)"轻松破解

我们简单过滤一下，对单双引号html编码

<div id="test"></div>
<script type="text/javascript">

    var t = document.getElementById('test');
    var hash = location.hash.substr(1);

    hash = hash.replace(/\"/g, '&#34;')
            .replace(/\'/g, ''');

    t.inner/*防过滤*/HTML = '<a href="#" id="test" onclick="func(\''+ hash +'\')">test</a>';

    function func () {}
</script>