猿人学系列（六）第一届Web攻防第四题

css加密-雪碧图、样式干扰

如上图当鼠标移动到数字上方时，可以很明显看出数字是图片，一开始觉得可能要OCR破解了，但是抓包可以看到有明显的base64图片请求：

定位到当前页面的数字图片上，可以看到是在td标签下的img标签内，并且图片内容直接就是data数据流base64编码在链接中了，如下：

一共有10个td，对应10组数字，按理说一个img标签就对应一组数中的一个，但是大致看了一下每个td里的img标签数量不一定等于每组数的个数。而且刷新一下发现每次都不一样，img标签数量大于或等于实际数的数量。

然后看下第2页，向api发起请求，返回了json格式数据，其中就包含td标签，所以直接对api响应做处理即可。

另外，还有一个想法是，同样的数的base64编码是固定不变的，看起来不像是动态的，可以写个脚本来验证一下。

编写代码如下：

输出结果如下：

set函数为集合，变为集合之前有76个数（这个数每次请求都不一样，看来是服务器那边随机生成的），可以看到set之后只有10个，也就是不管发多少次数字，同一个数字都是用同一张图。

我们可以将这些图片base64内容，解码后保存成jpg文件，然后打开查看数字，建立对照字典，保存文件的脚本如下：

将变量s依次换成各个数字的编码值，一一对应查看即可，这里就不展开了，建立好的字典如下：

浏览器中定位图片数字，观察先后顺序：

发现与css有关，首先display: none;的图片不会显示，但是我在api请求回来的数据中搜不到带有display关键字的，意味着它是过来后由前端js修改的。

第二点，在显示的图片中，显示顺序由css的left决定的，left:11.5px表示会在当前位置往右平移11.5个像素点，11.5正好是一张数字图的宽度，即往右放了一位数字。所以left:-11.5px就是往左，同理其他数字可以推算出来。

接下来先解决第一点。

在源码中搜索display或none，找到两处比较可疑：

这个是往class为poster的标签写css，不符合我们要求，另一处如下：

将js代码截出来jstool格式化一下：

代码向api发送GET请求，返回json数据，一直看到j_key那一行，先对data.key和data.value拼接，base64编码，去除=号，再md5加密。拼接上.符号是定位属性，说明属性名为某个md5值的标签（在api返回的数据中可以搜到class包含md5值），会被设置为display:none;。

仿造这段我们可以编写代码来处理api返回的数据（当然保存成js脚本再调用也可以）。

编写代码如下：

将请求的代码都整合在get_response函数中，calculate_j_key函数计算j_key值，在get_num_style函数将各个td标签提取出来，然后再提取img，分层提取的目的是区分不同组的img，因为每一组td为一组数，后面要转换成一个整数。

这里先做测试所以只请求了第一页，结果如下：

每一组内的数字需要按照css的值进行排序，我自己测试了好一会，其实逻辑思路不难，但是需要调试一下，写个函数来处理它，先上代码再解释：

data传入的是一组数形如：[[8, 23.0], [0, 0.0], [6, -23.0], [1, 0.0]]，每个子列表中放着数字大小和所在的位置（基于当前位置的偏移）。

前面说过一张数字图的宽度是11.5，正数表示向右偏移，负数表示向左偏移。假设当前是4位数，那其实就是数字乘以10的多少次幂进行累加，多少次幂需要根据偏移算出最后的位置来决定。举个例子，[8, 23.0]目前是i=0（即第一个数字）且需要向右偏移2个数字那么宽，相当于第3个数字，此时算出i+int(d[1]/11.5)就是2，但是还需要注意幂次从左到右依次是3210，所以需要用3-2才是第3个数字的幂次，3-2的3就是长度减一得来的。依次推算可得最后是6080。

编写代码如下，主要在前面的基础上对5个页面的数都进行获取，并求和：

输出结果如下：