一)nodeName属性含有某个节点的名称。
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
注释:nodeName所包含的XML元素的标签名称永远是大写的
(二)nodeValue
对于文本节点, nodeValue属性包含文本。
对于属性节点, nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。
(三)nodeType
nodeType属性可返回节点的类型。
最重要的节点类型是:
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
文档类型(DocumentType) 10: <!DOCTYPE HTML PUBLIC"...">
(四)tagName
tagName属性返回元素的标签名。
在HTML中, tagName属性的返回值始终是大写的。
tagName只能用在元素节点上
Hyper Text Markup Language, 超文本标记语言
标记又称为标签(Tag), 一般语法:
<tagName></tagName>
它可以有属性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
标签也可以不成对地关闭:
<tagName />
HTML文档由浏览器解释并执行。
<!DOCTYPE html> ----- 告诉浏览器用html5的标准来解释和执行该网页
<html>
<head> ---- 头部, 可包含meta, title等标签
</head>
<body> ---- 主体, 包含主要内容
</body>
</html>
<meta charset="utf-8" /> 用于告诉浏览器用什么样的字符编码来解释网页中的文本.
常见编码:
iso-8859-1: 纯英文编码
gbk, gb2312: 简体中文编码
big5: 大五码,繁体中文编码,主要应用于台湾地区
utf-8: 国际首选编码,它兼容所有的字符
除此之外, meta还可以通过keywords, description属性对页面关键词及描述信息进行设置, 以提高搜索引擎的命中.
网页标题, 显示在浏览器选项卡的标题栏上!
h1-h6: 内容标题标签
p: 段落
br: 换行
hr: 水平线
strong: 粗体文本
em: 斜体文本
span: 无任何特殊样式的文本
pre: 预格式标签,其中的内容在页面上带格式渲染
small: 比当前字体小的文本
空格
< 小于
> 大于
© 版权符
" 双引号
<!-- 注释内容 -->
<img
src="图像地址"
title="鼠标悬停提示"
alt="图像加载错误时的替代文本"
width="宽度"
height="高度"
/>
图像地址分为2种:
1. 相对地址, 如: img/cc.jpg
2. 绝对地址, 如: http://img.bcd.com/2017/1644232421.jpg
<a href="链接地址" target="目标窗口">文本|图片</a>
目标窗口:
_self: 目标页面在当前窗口打开
_blank: 目标页面在新窗口中打开
如果是在页面具有frameset/frame/iframe的场景下:
_top: 在顶级窗口中打开
_parent: 在父级窗口中打开
_自定义名称: 在指定的特定窗口中打开
三种用法:
1. 页面间链接
<a href="page/login.html"></a>
2. 锚链接
<a href="#help"></a>
help是本页面中一处id为help的标签, 如: <p id="help">
或者:
help是通过a标签命名的锚记, 如: <a name="help"></a>
3. 功能性链接
唤醒本地安装的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>
div是一个容器, 常用于页面的布局
标签的分类:
1. 块级标签/块级元素
如: div, h1-h6, p, hr
特征: 独占容器中的一行, 其宽度是容器的100%
2. 行级标签/行级元素
如: span, img, strong, em, a
特征1: 多个行级元素可以同处一行, 其宽度由内容来撑开(auto)
特征2: 大部分行级元素设置其width/height无效
ctrl + D : 删除当前行
ctrl + PgUp : 当前行上移
ctrl + PgDown : 当前行下移
ctrl + / : 注释 | 取消注释
ctrl + shift + F : 整理代码格式
ctrl + C : 复制当前行
ctrl + X : 剪切当前行
ctrl + V : 粘贴
ctrl + Z : 撤消上一步操作
ctrl + S : 保存当前文件
ctrl + shift + S : 保存项目中全部文件
ctrl + Enter : 在当前行的下方插入新行
ctrl + shift + Enter : 在当前行的上方插入新行
以上知识能做的效果图
部分效果
种反爬虫手段被广泛应用在一线互联网企业的产品中,例如汽车资讯类网站、小说类网站等文字密度较大的站点。在开始学习之前,我们先来看看具体的现象。打开网址:
https://implicit-style-css_0.crawler-lab.com
复制代码
呈现在我们眼前的是这样一个界面:
这次的任务,就是拿到页面上所呈现的内容的文本。在编写爬虫代码之前,我们要做几件事:
其实就是最基本的观察和分析。
网络请求方面,打开浏览器调试工具并切换到 Network 面板后,看到页面只加载了 2 个资源:
一个 html 文档和一个 js 文件,想必我们要的内容就在 html 文档中。点击该请求,浏览器开发者工具就会分成两栏,左侧依然是请求记录列表,右侧显示的是指定请求的详情。右侧面板切换到 Response,就可以看到服务器响应的内容:
看样子,我们要的东西就在这次响应正文中。咋一看,我们直接取 class 为 rdtext 的 div 标签下的 p 标签中的文本内容即可。然而事情并没有那么简单,细心的读者可能发现了,响应正文中显示的内容和页面中呈现的文字并不完全相同——响应正文中少了一些标点符号和文字,多了一些 span 标签。例如页面中显示的是:
夜幕团队 NightTeam 于 2019 年 9 月 9 日正式成立,团队由爬虫领域中实力强劲的多名开发者组成:崔庆才、周子淇、陈祥安、唐轶飞、冯威、蔡晋、戴煌金、张冶青和韦世东。
复制代码
而响应正文中看到的是:
<p>夜幕团队 NightTeam 于 2019 年 9 月 9 日正式成立<span class="context_kw0"></span>团队由爬虫领域中实力强劲<span class="context_kw1"></span>多<span class="context_kw21"></span>开发者组成:崔庆才、周子淇、陈祥安、唐轶飞、冯威、蔡晋、戴煌金、张冶青和韦世东<span class="context_kw2"></span>
</p>
复制代码
这句话中,被 span 标签替代的有逗号、的字、名字。整体看一遍,发现这些 span 标签都带有 class 属性。
明眼人一看就知道,又是利用了浏览器渲染原理做的反爬虫措施。不明所以的读者请去翻阅《Python3 反爬虫原理与绕过实战》。
既然跟 span 和 class 有关,那我们来看一下 class 属性到底设置了什么。class 名为 context_kw0 的 span 标签样式如下:
.context_kw0::before {
content: ",";
}
复制代码
再看看其他的,class 属性为 context_kw21 的 span 标签样式如下:
.context_kw21::before {
content: "名";
}
复制代码
原来被替换掉的文字出现在这里!看到这里,想必聪明的你也知道是怎么回事了!
解决这个问题的办法很简单,只需要提取出 span 标签 class 属性名称对应的 content 值,然后将其恢复到文本中即可。
属性名有个规律:context_kw + 数字。也就是说 context_kw 有可能是固定的,数字是循环出来的,或者是数组中的下标?大胆猜想一下,假设有这么一个字典:
{0: ",", 1: "的", 21: "名"}
复制代码
那么将 context_kw 与字典的键组合,就得到了 class 的名称,对应的值就作为 content,这好像很接近了。中高级爬虫工程师心中都明白:在网页中,能干出如此之事唯有借助 JavaScript。不明白的读者请去翻阅《Python3 反爬虫原理与绕过实战》。
那就搜一下吧!
唤起浏览器调试工具的全局搜索功能,输入 context_kw 并会车。然后在搜索结果中寻找看上去有用的信息,例如:
发现 JavaScript 代码中出现了 context_kw,关键的信息是 .context_kw + i + _0xea12('0x2c')。代码还混淆了一下!看不出的读者可以找作者韦世东报名《JavaScript 逆向系列课》,学完就能够很快找到看上去有用的代码,并且看懂代码的逻辑。
这里手把手带读一下这些 JavaScript 代码。第一段,也就是 977 行代码原文如下:
var _0xa12e = ['appendChild', 'fromCharCode', 'ifLSL', 'undefined', 'mPDrG', 'DWwdv', 'styleSheets', 'addRule', '::before', '.context_kw', '::before{content:\x20\x22', 'cssRules', 'pad', 'clamp', 'sigBytes', 'YEawH', 'yUSXm', 'PwMPi', 'pLCFG', 'ErKUI', 'OtZki', 'prototype', 'endWith', 'test', '8RHz0u9wbbrXYJjUcstWoRU1SmEIvQZQJtdHeU9/KpK/nBtFWIzLveG63e81APFLLiBBbevCCbRPdingQfzOAFPNPBw4UJCsqrDmVXFe6+LK2CSp26aUL4S+AgWjtrByjZqnYm9H3XEWW+gLx763OGfifuNUB8AgXB7/pnNTwoLjeKDrLKzomC+pXHMGYgQJegLVezvshTGgyVrDXfw4eGSVDa3c/FpDtban34QpS3I=', 'enc', 'Latin1', 'parse', 'window', 'location', 'href', '146385F634C9CB00', 'decrypt', 'ZeroPadding', 'toString', 'split', 'length', 'style', 'type', 'setAttribute', 'async', 'getElementsByTagName', 'NOyra', 'fgQCW', 'nCjZv', 'parentNode', 'insertBefore', 'head'];
(function (_0x4db306, _0x3b5c31) {
var _0x24d797 = function (_0x1ebd20) {
while (--_0x1ebd20) {
_0x4db306['push'](_0x4db306['shift']());
}
};
复制代码
往下延伸阅读,还能看到 CryptoJS 这个词,看到它就应该晓得代码中使用了一些加密解密的操作。
第二段,1133 行代码原文如下:
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')]);
}
}
复制代码
这里循环的是 words,然后将 words 元素的下标和对应元素组合,这和我们猜想的是非常接近的,现在要找到 words。
怎么找?
又不会吗?
搜索就可以了,顺着搜索结果看,找到了定义 words 的代码:
var secWords = decrypted[_0xea12('0x16')](CryptoJS['enc']['Utf8'])[_0xea12('0x17')](',');
var words = new Array(secWords[_0xea12('0x18')]);
复制代码
按照这个方法,我们最后发现 CSS 的 content 的内容都是数组 _0xa12e 中一个经过加密的元素先经过 AES 解密再经过一定处理后得到的值。
捋清楚逻辑之后,就可以开始抠出我们需要的 JS 代码了。
这个代码虽然经过混淆,但还是比较简单的,所以具体的抠代码步骤就不演示了,这里提示一下在抠出代码之后两个需要改写的点。
第一个是下图中的异常捕获,这里判断了当前的 URL 是否为原网站的,但调试时,在 Node 环境下执行是没有 window 对象、document 对象的,如果不做修改会出现异常,所以需要把带有这些对象的代码注释掉,例如下面 if 判断语句:
try {
if (top[_0xea12('0x10')][_0xea12('0x11')][_0xea12('0x12')] != window[_0xea12('0x11')]['href']) {
top['window'][_0xea12('0x11')]['href'] = window[_0xea12('0x11')][_0xea12('0x12')];
}
复制代码
其他的地方还需要自己踩坑。
修改完后就可以获取到所有被替换过的字符了,接下来只需要把它们替换进 HTML 里就可以还原出正常的页面,replace 就不演示了噢。
例子中用到的是 ::before,下方文字描述了它的作用:
在 CSS 中,::before 用于创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。
引用自:developer.mozilla.org/zh-CN/docs/…
举个例子,新建一个 HTML 文档,并在里面写上如下内容:
<q>大家好,我是咸鱼</q>,<q>我是 程序员中的一员</q>
复制代码
然后为 q 标签设置样式:
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
复制代码
完整代码如下(写给没有 HTML 基础的朋友):
<style>
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
</style>
<q>大家好,我是咸鱼</q>,<q>我是 程序员中的一员</q>
复制代码
我们在样式中,为 q 标签加上了 ::before 和 ::after 属性,并设置了 content 和对应的颜色。于是乎,在被q 标签包裹着的内容前会出现蓝色的 《 符号,而后面会出现红色的 》 符号。
简单易懂吧!
本文简单介绍了隐式 Style–CSS 在反爬虫中的应用,并通过一个简单的实例学习了如何应对这种情况,相信尝试过的你已经清楚地知道下次碰到这种反爬的时候该如何破解了。
当然呢,这个例子还不够完善,没有完全覆盖到隐式 Style–CSS 在反爬虫中的所有应用方式,如果读者朋友对这类反爬虫有兴趣的话,不妨多找几个例子自己动手试试,也欢迎通过留言区与我交流讨论。
最后,小编想说:我是一名python开发工程师,
整理了一套最新的python系统学习教程,
想要这些资料的可以关注私信小编“01”即可(免费分享哦)希望能对你有所帮助
*请认真填写需求信息,我们会在24小时内与您取得联系。