CSS常见反爬技术

目录

• 利用字体
  • 反爬原理
  • 应对措施
  • 难点：
• 利用背景
  • 反爬原理
  • 应对措施
• 利用伪类
  • 反爬原理
  • 应对措施
• 利用元素定位
  • 反爬原理
  • 应对措施
• 利用字符切割
  • 反爬原理
  • 应对措施

利用字体

反爬原理

反爬原理：
1、主要利用font-family属性，例如设置为my-font
2、在HTML里面不常见（不可读）的unicode
3、在CSS字体（my-font）中将其映射到常见（可读）到字体，例如数字
4、爬虫在抓取数据的时候只能抓到unicode，而不是真实的数据

应对措施

1、下载woff字体文件，转化为tff文件
2、用百度字体编辑器打开tff文件，并确定其unicode与其实际的映射关系
3、将下载的HTML内容按照映射关系替换
4、解析HTML并获取正确的数据

难点：

有些网站会动态生成woff，这种反爬措施比较难以自动化绕开

利用背景

反爬原理

1、数据利用图片背景（雪碧图坐标）展示给用户，而不是直接文本展示
2、图片包含一张雪碧图，数据利用背景偏移量来获取（雪碧图坐标）
3、爬虫在抓取的时候看不到实际值，而只是图片

应对措施

1、下载雪碧图，手动检查数据对应的坐标值
2、找到数据对应的坐标值的映射关系
3、找到映射关系，转化为真实数据

利用伪类

反爬原理

1、不直接将内容展现到html的元素中
2、通过伪类的content属性将要展示的值展示出来

例如：鼠标悬浮的时候展示数据

应对措施

1、利用pyppeteer或者selenium这样的自动化测试工具
2、在页面上执行下面的JS代码，即可获取content
注意：before是伪类，也可能是after

JS代码：
const el = document.querySelector("类选择器")
const styles = getComputedStyle(el,'before')
console.log(styles.content)  # 打印数据值

利用元素定位

反爬原理

1、利用绝对定位，将数据用其他符号替换，偏移量
2、替换的符号随机的
3、如果直接抓取，将抓到错误的信息

应对措施

计算出替换的元素偏移量，与被替换的元素相对比，还原实际值

利用字符切割

反爬原理

1、将字符串用标签分割
2、由于是内联块级（inline-block）,可以一行展示
3、通常还混淆有不现实的标签（display:none）

应对措施

1、将内联块级标签的innerText拼接起来
2、注意过滤掉所有的display:none的属性