米鼠商城

多快好省,买软件就上米鼠网

最新项目

人才服务

靠谱的IT人才垂直招聘平台

隐式 Style–CSS 在反爬虫中的应用

  • xym01
  • 1
  • 2019-10-11 13:26

隐式 Style–CSS 在反爬虫中的应用

什么是隐式 Style–CSS

先来唠唠什么是 隐式 Style–CSS:

CSS中,::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容

源自:https://developer.mozilla.org

上面的这段引用,看着有点难懂,没关系我们用下面这个例子简单演示一下。

我们新建一个 HTML 文件输入下面这样的内容:

<q>大家好,我是咸鱼</q>,<q>我是 NightTeam 的一员</q>

源自:https://developer.mozilla.org

并在这个 HTML 中引用下面这个样式文件:

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

源自:https://developer.mozilla.org

最后在浏览器中展示的内容是这样的:

<<大家好,我是咸鱼>>,<<我是 NightTeam 的一员>>

源自:https://developer.mozilla.org

可以看到在上面的例子里,我在源码里隐藏了文字前后的符号,但是在浏览器显示的时候却是正常的。

目前很多小说网站都使用了类似这样的反爬技术保护自己的内容不被爬虫爬取。

那么类似这样的反爬技术应该怎么处理?

实例讲解

咸鱼准备了一个例子简单实战一下,用实例讲讲我遇到这类反爬是如何处理的。

这个例子运行在本地,所以就没有分析请求的步骤,直接分析下浏览器显示与源码分别什么样,找找有没有什么突破口。

浏览器展示:

源码显示:

可以在源码中看到部分内容被<span class="context_kwx"></span>替换。

页面分析

打开 开发者模式,看看隐藏的文字是什么样子的。【图2-1】

可以看到在【图2-1】里方框 2 中 content 的内容正是 方框 1 在源码页面里隐藏的内容。

这符合我们在第一部分关于 隐式 style-css 的举例。

那么为了能够拿到全部的内容,我们只需要把替换掉的span标签替换回【图2-1】中方框 2 里的 content 的值就可以了。

按照正常的页面结构,可以通过点击【图2-2】中框选的地方直接跳转到 CSS 文件的位置。

但是在我们这个页面结构里没有这样可以点击的位置,所以我们只能通过分析 span 标签的规律找找突破口。

所有的 span 标签的类名都是 context_kw 加上一个数字拼接的,我们试着搜索 context_kw 找找。

可以看到在文件里找到了与 context_kw 相关的 JS 代码。【图2-3】

大致浏览了整段 JS 代码,这段 JS 通过功能分为两个部分。【图2-4】

第一部分:CryptoJS的加解密的逻辑内容,可以忽略

第二部分:经过变量名混淆的内容,第二部分的 JS 对数组中的密文进行解密,并操作了 DOM ,完成了将 JS 与 CSS 结合完成了反爬最主要的逻辑。

部分加密分析

根据第二部分中操作 DOM 的代码,我们找到关键 变量word

for (var i = 0x0; i < words[_0xea12('0x18')]; i++) {
            try {
                document[_0xea12('0x2a')][0x0][_0xea12('0x2b')]('.context_kw' + i + _0xea12('0x2c'), 'content:\x20\x22' + words[i] + '\x22');
            } catch (_0x527f83) {
                document['styleSheets'][0x0]['insertRule'](_0xea12('0x2d') + i + _0xea12('0x2e') + words[i] + '\x22}', document[_0xea12('0x2a')][0x0][_0xea12('0x2f')][_0xea12('0x18')]);
            }
        }

再继续找到 word 的变量声明的地方。

var secWords = decrypted[_0xea12('0x16')](CryptoJS['enc']['Utf8'])[_0xea12('0x17')](',');
var words = new Array(secWords[_0xea12('0x18')]);

按照这个方法,我们最后发现 CSS 的 content 的内容都是数组 _0xa12e 中一个经过加密的元素用 AES解密后经过一定处理得到的值。

有了这样的一个逻辑框架之后我们就可以直接开始扣取我们需要的 JS 代码了。

加密代码修改

这个代码比较简单,具体的扣取步骤就不演示了,这里演示两个在扣取代码之后两个需要改写的点。

第一个是【图2-5】中的异常捕获,这里判断了当前的 URL 是否相等,但是我们在 Node 环境下执行是没有 window 属性的,如果不做修改会出现异常,所以需要把这里的 if 判断语句注释。

第二个是【图2-6】中在返回中的判断语句,同样是对 Node 中不存在的属性进行判断,所以同样需要在这里进行相应的修改。

例如:

_0x1532b6[_0xea12('0x26')](_0x490c80, 0x3 * +!('object' === _0xea12('0x27')))

以上两点修改完后就可以获取到所有被替换过的字符了。

总结

本文简单描述了隐式 Style–CSS 在反爬虫中的应用,并通过一个简单的实例学习如果在反反爬虫中应对。

这个例子或许不够完善,没有完全覆盖到隐式 Style–CSS 在反爬虫中的应用,如果读者朋友对这类反爬虫有兴趣的话不妨多找几个例子自己动手试试,也欢迎通过留言区与我交流讨论。

文章作者:「夜幕团队 NightTeam」 - 戴煌金

润色、校对:「夜幕团队 NightTeam」 - Loco

夜幕团队成立于 2019 年,团队包括崔庆才、周子淇、陈祥安、唐轶飞、冯威、蔡晋、戴煌金、张冶青和韦世东。

涉猎的编程语言包括但不限于 Python、Rust、C++、Go,领域涵盖爬虫、深度学习、服务研发、对象存储等。团队非正亦非邪,只做认为对的事情,请大家小心。

本篇文章由一文多发平台ArtiPub自动发布

这里给大家推荐一个在线软件复杂项交易平台:米鼠网 https://www.misuland.com

米鼠网自成立以来一直专注于从事软件项目人才招聘软件商城等,始终秉承“专业的服务,易用的产品”的经营理念,以“提供高品质的服务、满足客户的需求、携手共创双赢”为企业目标,为中国境内企业提供国际化、专业化、个性化、的软件项目解决方案,我司拥有一流的项目经理团队,具备过硬的软件项目设计和实施能力,为全国不同行业客户提供优质的产品和服务,得到了客户的广泛赞誉。



如有侵权请联系邮箱(service@misuland.com)

猜你喜欢

评论留言