甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
Hi，大家好，欢迎大家观看由IT猫之家打造的【网络爬虫教学】虫师终极武器之Chromium定制开发系列教学文章的第六篇，如果您是第一次观看本系列教程，请先移步到 这里 看完前面的文章后再回来哦！大家在学习的过程中，有任何疑问可以留言或加入我们的QQ技术交流群进行探讨： 544185435
成都创新互联公司长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为禅城企业提供专业的成都网站设计、网站制作，禅城网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
前言
前面我们已经实现了多个FP重点检测对象的接口随机化，事实上只要完成这些接口的重写就足以应付大多网站了，不过我们既然要定制就做足全套吧，在FP检测脚本中，尚且还有一些也算是较为重要的判断依据，如：系统字体检测、浏览器插件(plugins) 检测、以及非人为触发事件检测isTrusted等。
FontStyle 随机化的实现
由于每台设备的字体可能存在差异等原因使得第三方服务可以轻松的通过获取字体来判断请求的客户端是否为同一客户端，我们知道Chromium为了规避安全的风险，不对JS提供太多的可用权限，比如字体读取，JS本不具备这种检测权限，但FP巧妙的利用了字体的（长、宽、描边）等属性来精确的判断出客户端是否包含了哪些字体，最终导出一串哈希值以便于作为有力的凭证，另除了这种方式，FP还通过Flash接口来调用字体进行判断（需浏览器支持）
对于系统字体接口的随机，我们可以从传入的font-Style着手，在之前的Canvas随机方案中，我们有做过类似的操作，就直接篡改传入的Style，而对于字体我们也是可以这么干的，只需将其替换成指定的字体即可。
要想实现该接口的随机化，我们首先得要搞懂网站对这个接口的检测是如何实现的以及它是如何运作的，而最好最直接的方法就是直接从目标网站分析并找到答案，我们可以打开 browserleaks 然后在关键处下断点，从上图我们可以看到它预设了一堆的常见字体。
从上图，我们可以看到一串：mmm₹▁₺ꜽ�₸׆ẞॿmmmmmmmlli 这样的字符，在我接触过的脚本中它们都会以这种形式作为检测的基准，至于为何一定要用这给字符串，大家可以参考下这篇文章，这位大佬已经解释得很清楚： JavaScript/CSS Font Detector | JavaScript / CSS 字体检测器
从图中我们可以看出，它每次循环都会通过接口style.fontFamily来为当前标签设置字体并获取其宽度与高度，进而与原始的字体进行一一比对，一旦不相等则表示该字体存在，通过该方法几乎可以100%的测得准确结果，而我们要想实现该接口的随机化，可以考虑从两个点着手，首先，就像前面说的，接口每次都会通过 style.fontFamily 来设置字体，那么我们完全可以在这里进行篡改，只要保证每次传入的字体都不一致，则表示肯定会与结果有出入从而达到了随机化的目的，其二，既然它是通过字体的宽度与高度来判断是否成立的，那么我们也可以hook该接口返回随机偏移的数值，从而达到随机化的目的。
通过API查询，我们可以很方便的找到该接口的路径，我们只需按自己的需求实现随机化即可，在这，我建议大家直接修改它的头文件，因为我尝试修改cc文件并未成功，当然大家也可以自行尝试，万一是我操作姿势不对呢，啊哈哈….
plugins 接口随机化的实现
事实上，单单依赖这个插件指纹，服务端是无法判断出是否同一客户端的，也就是说只要完成前面的所有指纹伪造，基本上可以瞒天过海了，但为了满足部分强迫症的看官，我还是有必要将这个给拉出来讲解了。
我们直接在控制台中输入：navigator.plugins，来看看这个插件到底包含了什么
我们可以看到，基本上 navigator.plugins 的子项包含了：四个字段以及2个对象（事实上是一个对象），而事实上我们浏览器里的这个对象基本上都是一样的，所以我开头说可以忽略掉这个接口，我们可以查看每个子项，可以发现它的字段是一样的，同样包含了： name、 filename 、 description 、 MimeType ；那么这样就好办了，直接从以上的字段着手即可。
通过API查询，我们定位到这个 navigator.plugins 的接口位于：third_party\blink\renderer\modules\plugins目录下，我们只需对其实现随机化即可。
上图是插件随机化后的效果，经过篡改：String DOMPlugin::name()、String DOMPlugin::filename()、String DOMPlugin::description()我们可以很轻松的便实现了该接口的随机化。
接口事件触发之底层篡改大法
在FP脚本检测的过程中，还有一项作为检测最为重要的评判指标 “isTrusted”，之所以将它留到最后讲，是为了体现它的价值与其重要性，该字段通常会出现在事件被触发的时，它也是唯一的一个不可直接通过JS语法进行篡改的字段，也就是说前面介绍的所有接口其实我们都是可以通过JS去篡改的，（篡改是没问题，但不见得一定能用，因为部分网站是有针对这个进行检测的），而这个 “isTrusted ”则是例外。
我们来看看上图，我们随便定义了一个鼠标事件以及坐标的事件，然后我们可以发现，它们都携带了一个“ isTrusted ”的字段，并且它的值为false，通过上图我们可以发现，这个接口并不能重写，因为它是只读的，覆盖不了，而我也有尝试过在茫茫网海中寻找可通过JS改写的方案，最终都以失败告终，当然，也有老外告诉我，它们可以通过配合扩展插件去实现，但必须得借助debugger来实现，并且无法取消弹窗，而这方法我也尝试过，是成功了，但是及其耗资源，所以我才打算将其以基于底层的方式实现。
我们再来看看真实触发事件的情况，我们从上图中可以看出，当我们以真实鼠标去触发它， “ isTrusted ” 是为真的，而部分网站以该字段作为判断的依旧，从而判断你是否为机器人；事实上这个接口并不属于是否同一客户端的判断范畴，而是为了校验客户端是否人为发起的请求。
Event 接口的isTrusted是一个 Boolean 类型的只读属性.当事件由用户操作生成时为true，由脚本创建或修改,或通过调用 EventTarget.dispatchEvent 生成,为false；从这里我们可以看到通过脚本创建或者修改的都会返回false，从而我们可以更加肯定这个字段是肯定会被网站作为重要的判断依旧的。
通过API我们顺藤摸瓜的找到了接口的路径，并将其篡改为true，而，因为所有的事件（如：MouseEvent、PointEvent） 都是派生与event ，所以一旦在其根源修改了，所有的事件都势必会返回真，从而达到我们想要的目的。
最后，附上一张篡改后的效果图，以表示成功。
作者寄语
感谢大家一直阅读本系列文章，到本文为止，我们已经实现了FP里的大部分检测，而通过这些属性的伪造，我们已经可以在大部分网站上执行了，而由于接口都是随机的，所以网站无法确认是否为同一客户端，从而达到了真正的匿名效果；但部分网站还是采用的Cookie形式来记录的，所以，我们也可以通过隐身模式或者通过第三方扩展来屏蔽。另外，请大家不要再私下问我怎么不完全把接口暴露出来，之类的话，首先，一旦方法暴露，势必会遭到第三方网站进行特征收集，没有什么是绝对的，收集过多的数据，照样可以判断你是机器人，或者直接屏蔽你的浏览器，其二，研究是需要时间与精力的，如果大家都是抱着做伸手党的心思来讨要结果，那么您可能找错方向了，天天研究头发都白了，你伸下手就想要，有这么好的事欢迎留言告诉我，我也想要；最后如果大家有业务需求可以找我合作，JS逆向或浏览器定制均可。
理论上来说，几乎所有的语言都能做爬虫，都是根据http协议请求网页、然后下载、分析，只不过python实现起来更快。
二营长SEO
CSS ，全称叫作Cascading Style Sheets，即 层叠样式表 。“层叠”是指当在HTML中引用了数个样式文件，并且样式发生冲突时，浏览器能依据层叠顺序处理。“样式”指网页中文字大小、颜色、元素间距、排列等格式。HTML定义了网页的结构，但是只有HTML页面的布局并不美观，可能只是简单的节点元素的排列，为了 让网页看起来更好看一些 ，这里借助了CSS。CSS是 目前唯一的网页页面排版样式标准 ，有了它的帮助，页面才会变得更为美观。如下图的右侧，即为CSS。
就局部放大来看，下图所示就是一个CSS样式。 大括号前面 是一个CSS 选择器 ，此选择器的意思是 首先选中 id为head_wrapper且class为s-ps-islite的 节点 ，然后 再选中 其内部的class为s-p-top的 节点 。大括号内部写的就是一条条 样式规则 ，例如 position 指定了这个元素的布局方式为 绝对布局 ，bottom指定元素的 下边距 为40像素，width指定了 宽度 为100%占满父元素，height则指定了元素的 高度 。也就是说，我们将位置、宽度、高度等样式配置统一写成这样的形式，然后用大括号括起来，接着在开头再加上CSS选择器，这就代表 这个样式对CSS选择器选中的元素生效 ，元素就会根据此样式来展示了。在网页中，一般会统一定义整个网页的样式规则，并写入CSS文件中（其后缀为css）。在HTML中，只需要用link标签即可引入写好的CSS文件，这样整个页面就会变得美观、优雅。
在爬虫过程中都需要爬取目标的 节点 ，我们知道网页由一个个 节点 组成， CSS选择器会根据不同的节点 设置不同的样式规则， 那什么是节点 ？又 怎样来定位节点 呢？下面围绕这两个问题进行介绍。
在HTML中，所有 标签定义的内容都是节点 ，它们构成了一个HTML DOM树。我们先看下什么是DOM，DOM是W3C（万维网联盟）的标准，其英文全称Document Object Model，即 文档对象模型 。它定义了访问HTML和XML文档的标准：W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM标准被分为如下3个不同的部分：
核心DOM ：针对任何结构化文档的标准模型。
XML DOM ：针对XML文档的标准模型。
HTML DOM ：针对HTML文档的标准模型。
根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点。 整个文档 是一个文档节点； 每个HTML元素 是元素节点；HTML 元素内的文本 是文本节点；每个HTML 属性 是属性节点； 注释 是注释节点。HTML DOM将HTML文档视作树结构，这种结构被称为节点树，如下图所示。
节点树中的节点 彼此拥有层级关系 。我们常用父（parent）、子（child）和兄弟（sibling）等术语描述这些关系。父节点拥有子节点，同级的子节点被称为兄弟节点。在节点树中， 顶端节点称为根 （root）。除了根节点之外，每个 节点都有父节点 ，同时可拥有任意数量的子节点或兄弟节点。下图展示了节点树以及节点之间的关系。
在CSS中，我们使用 CSS选择器来定位节点 。例如，下图中div节点的id为container，那么就可以表示为#container，其中#开头代表选择id，其后紧跟id的名称。另外，如果我们想选择class为wrapper的节点，便可以使用.wrapper，这里以点（.）开头代表选择class，其后紧跟class的名称。另外，还有一种选择方式，那就是 根据标签名筛选 ，例如想选择二级标题，直接用h2即可。这是最常用的3种表示，分别是 根据id、class、标签名筛选 ，请牢记它们的写法。
另外，CSS选择器还支持 嵌套选择 ，各个选择器之间加上空格分隔开便可以代表嵌套关系，如#container .wrapper p则代表先选择id为container的节点，然后选中其内部的class为wrapper的节点，然后再进一步选中其内部的p节点。另外，如果不加空格，则代表并列关系，如div#container .wrapper p.text代表先选择id为container的div节点，然后选中其内部的class为wrapper的节点，再进一步选中其内部的class为text的p节点。这就是CSS选择器，其筛选功能还是非常强大的。另外，CSS选择器还有一些其他语法规则，具体如下表所示。
但是，这样每次都要浪费部分时间去寻找定位点，这样既不很方便，也不高效，那么如何提高爬虫中这部分工作的效率呢？今天我给大家分享一个爬虫的利器，它就是：SelectorGadget 插件。
point and click CSS selectors，强大的谷歌插件 CSS生成器 ，有助于我们快速找到html的节点信息，它也支持Xpath表达式。Selector Gadget是一个开源的Chrome扩展程序，可以轻松地在复杂的网站上生成和选择CSS选择器。安装扩展程序后，转到任意页面并启动它。网站右下方会打开一个方框。 单击您希望选择器匹配的页面元素（它将变为绿色）。然后SelectorGadget将为该元素生成一个最小的CSS选择器，并突出显示（黄色）选择器匹配的所有内容。现在单击突出显示的元素将其从选择器中删除（红色），或单击未突出显示的元素将其添加到选择器。 通过这个选择和拒绝过程，SelectorGadget可以帮助您找到满足您需求的完美CSS选择器。
首先需要安装一下这个神器。在谷歌浏览器中的应用商店里，搜索到SelectorGadget插件，点击“添加至Chrome”即可。如果不能打开Chrome应用商店，可以通过网上的其他途径获取该插件，之后再手动添加至谷歌浏览器即可。手动添加方法是：打开谷歌浏览器扩展程序，并开启开发者模式，将该插件拖拽到浏览器里，如果不成功，可以选择“加载已解压的扩展程序”，将该文件夹先压缩再解压添加进去。
同时在页面栏上能看到红框处的SelectorGadget标志。
咱们以 网页为例，首先点击网页上方的SelectorGadget，然后在网页下方弹出SelectorGadget框。接下来，咱们尝试一下如何使用？比如我们想定位“拆弹专家2”的节点，直接点击它，则会在框内显示其节点—— .item-title （如下图）。绿色：单击希望选择器匹配的页面元素。黄色：生成的这个CSS选择器【 .item-title 】能匹配的所有内容，从下图可以发现该CSS选择器可以抓取哪些信息。当你把鼠标放到这些高亮的元素上时，会显示红色，代表要将其从选择器中删除；而单击未突出显示的元素将其添加到选择器。
在实际构建CSS表达式过程中，需要搭配 网页开发工具 里的copy selector功能使用，非常方便。比如：定位抓取以下网页（ ）红框内的所有电影名称信息。
具体操作流程如下：在某一电影名称下右击——检查，定位到电影名称的网页源码处，然后右击—copy—copy selector，再打开SelectorGadget，在框内粘贴CSS表达式，按Enter键，发现在网页中准确定位出该电影名称。但我们需要定位所有的电影名称，在已有的CSS表达式【（body div:nth-child(5) div.inner-wrapper div.inner-2col-main div ul li:nth-child(1) a span.item-title）】上进行修改，这里可以发现【li:nth-child(1)】只选取了第一个，而我们所需选取所有，因此去掉后面的【(1)】即可。在具体实践中，如何修改还有有赖于小伙伴对网页结构和CSS语法的理解。最终，获取以上红框内电影名称的CSS选择器表达式为：【body div:nth-child(5) div.inner-wrapper div.inner-2col-main div ul li:nth-child a span.item-title】。在实际应用中，不同节点标签之间用空格分隔：【body div:nth-child(5) div.inner-wrapper div.inner-2col-main div ul li:nth-child a span.item-title】。
但在SelectorGadget使用中，发现其构建的CSS表达式往往很复杂，大部分情况下其实也是可以自己构建CSS表达式的。构建CSS选择表达式的关键在于清楚整个网页结构，找到标签之间的属于关系、属性值属于哪个标签等，就可以比较快速的构建。而且浏览器很智能，鼠标在源码上的位置，可以在网页显示上呈现阴影，这个功能简直太香了。以上红框内所有电影名字的CSS表达式也可以表示为：【div.movlist ul li a span.item-title】
然后用SelectorGadget验证，如下图，发现高亮选中的部分就是我想要定位的信息，说明这个CSS表达式正确。
以上简单介绍了如何构建CSS表达式，在爬虫过程中定位抓取特定节点数据是非常重要的一步，有了这步才有下游的精准数据提取与清洗。希望本次教程能给有需要的小伙伴一点小小帮助！
更多内容可关注公共号“YJY技能修炼”~~~
往期回顾
R爬虫在工作中的一点妙用
R爬虫必备基础——HTML和CSS初识
R爬虫必备基础——静态网页+动态网页
R爬虫必备——rvest包的使用