从零开始学web安全（3）_html/css_WEB-ITnose

上篇文章写到了一个亲自测试的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="javascipt:alert(1);">xss</button>

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

js编码

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

依然看个非常简单的例子

    var body = document.getElementsByTagName('body')[0];    body = '<a href="location.href=\'http://www.baidu.com\'">test</a>';    // 等同于上面那句    body = '<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 = '<a href="location.href=\'http%3A%2F%2Fwww.baidu.com\'">test1</a>';                // test2                // url编码 -> js unicode编码                body = '<a href="location.href=\'http\u00253A\u00252F\u00252Fwww.baidu.com\'">test2</a>';                // test3                // url编码 -> html字符实体编码                body = '<a href="location.href=\'http%3A%2F%2Fwww.baidu.com\'">test3</a>';                // test4                // url编码 -> html字符实体编码 -> js unicode编码                body = '<a href="location.href=\'http\u0026#37;3A%2F%2Fwww.baidu.com\'">test4</a>';                // test5                // url编码 -> js unicode编码 -> html字符实体编码                 body = '<a href="location.href=\'http\u00253A\u00252F\u00252Fwww.baidu.com\'">test5</a>';                // test6                // url编码 -> js unicode编码                body = '<a href="location.href=\'http%3A%2F%2Fwww.baidu\u002ecom\'">test6</a>';                // test7                // url编码 -> js unicode编码 -> html字符实体编码                body = '<a href="location.href=\'http%3A%2F%2Fwww.baidu\u002ecom\'">test7</a>';

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

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

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

test4我们在test3的基础上把第一个 & 通过js unicode编码编程 \u0026 ，发现居然还可以跳转！聪明的读者可能一下子就反应过来了，因为在赋值 的这条语句的时候先经过了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 = '<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, '"') .replace(/\'/g, '''); t = '<a href="#" id="test" onclick="func('+ hash +')">test</a>'; function func () {}</script>

刚才的破解方法失效了，那答案b不是对的吗？

那怎么破解？我当时被这个先入为主的思维困扰了好久，其实这边并不一定要老想着去闭合html里面的标签，可以闭合js啊！

我们提交这样一个hash － '+alert(1)+'

成功弹窗！结合html字符实体编码 + onclick里面的js可执行环境，是可以被xss的～

其他选项和题目就留给大家自己思考一下，就不一一解释了，应该并没有太大问题。

好吧，这篇就先到这里了～～

下个月继续安全方面的知识分享。大家清明快乐。。。