24. CSS偏移反爬见过没,打开本文你就能学会 | 爬虫训练场

Posted 梦想橡皮擦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了24. CSS偏移反爬见过没,打开本文你就能学会 | 爬虫训练场相关的知识,希望对你有一定的参考价值。

本篇博客实现 CSS 偏移反爬案例,核心用到 CSS 定位样式,防止爬虫采集。
案例已更新到 爬虫训练场

文章目录

CSS 偏移原理

该反爬手段主要思想如下所示,这里用图片进行展示。

在项目中,我们将返回两组数字,分别如下:

  1. 第一组数字为生成的假数字,后续将被偏移覆盖的数字
  2. 第二组数字为真数字,但是仅包含【被替换】假数字位置上的数字。

第二句话有点绕,举例理解。

第一个数字返回 2351,第二个数字返回 162,我们需要将 1 盖住 3,将 6 盖住 5,将 2 盖住 1。
而这套逻辑在 CSS 中需要依赖定位进行实现。

假设我们将 2351 这个整体的数字,拆解成单一数字,那每个的偏移定位如下所示。

  • 2:left = 0,top=0;
  • 3:left = 50,top = 0;
  • 5:left = 100,top = 0;
  • 1:left = 150,top = 0;

在这种情况下,如果希望第二组数字的 1 盖住 3,那需要偏移 150px,依次类推即可,接下来我们在代码中进行实践,具体如下。

代码实现 CSS 偏移

在 Python Flask 中建立任意视图文件,输入如下代码即可。

% extends "base.html" % % block style %
<style>
  .prc_wp b 
    position: absolute;
    letter-spacing: 0;
    word-spacing: 0;
    display: inline-block;
    top: 0;
    background: #fff;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-align: center;
    vertical-align: baseline;
    font-weight: normal;
    font-style: normal;
  
  .prc_wp b i 
    font-style: normal;
    font-weight: normal;
    text-align: center;
    display: inline-block;
    overflow: hidden;
    vertical-align: baseline;
  
</style>

% endblock style % % block content %

<div class="container">
  <span class="prc_wp" style="width:64px;height: 26px;display:inline-block;">
    <em class="rel" style="position:relative;padding-left: 1px;"
      ><b style="width:64px;left:-64px"
        ><i title="1033" style="width: 16px;">1</i
        ><i title="1033" style="width: 16px;">0</i
        ><i title="1033" style="width: 16px;">7</i
        ><i title="1033" style="width: 16px;">6</i></b
      ><b title="1033" style="width: 16px;left:-16px">3</b
      ><b title="1033" style="width: 16px;left:-32px">3</b></em
    ></span
  >
</div>

% endblock %

阅读代码可以发现,我们首先使用 i 标签渲染出一个数字,即 1076,然后在其后跟两个数字,分别是 33,接下来使用偏移量实现第一个 3 盖住 6,第二个 3 盖住 7,最终得到目标数字 1033。

此时如果有爬虫程序来进行采集,此时需要对数字进行解析,才可以得到正确结果,否则获取到的是 1076,或者 107633 等内容。

Python 端数字的生成

CSS 偏移规则编写完毕,后台的数字生成,也需要用逻辑实现,因为需要计算被替换的数字和对应偏移量等信息。

其重点逻辑罗列如下。

  1. 随机获取要替换几个数字,例如数字为 495,我们需要获取替换 2 个数字。

由于数字无法进行获取长度,随机取值等操作,所以需要先将其转换为列表。

# 将数字转换为字符列表,便于进行切割
num = 495
num_str = list(str(num))

然后使用 random 模块获取目标替换数字个数。

# 随机获取替换几个数字,最大是数字长度,最小是1
replace_count = random.randint(1, len(num_str))
  1. 有目标数字个数之后,就可以使用 random.sample() 函数从列表中随机获取数字。
# 随机抽取要被替换的数字
wait_replace_num = random.sample(num_str, replace_count)

由于顺序不确定,所以还需要同步获取到提取到数字的索引。

# 获取要被替换数字的索引位置
index_num = [num_str.index(wait_num) for wait_num in wait_replace_num]
  1. 随机生成数字,基于刚刚的 replace_count 值进行生成。
# 随机生成数字,数量参考 replace_count
b = [random.choice(range(0, 9)) for _ in range(0, replace_count)]
  1. 将新生成的数字替换到原数字列表中,便于去前台渲染数据。

基于索引进行替换。

# 生成新数字,然后替换前文生成的字符列表
for i, v in enumerate(index_num):
    num_str[v] = b[i]

将新数字转换为整数列表。

# 新数字已经生成 ,前台正常渲染即可
new_num = list(map(int, num_str))
  1. 建立原数字中被替换内容与索引的对应关系,该对应关系用于最终的 CSS 偏移遮盖。
# 原数字的对应关系
number_relation = list(zip(index_num, wait_replace_num))

本案例到此结束,已更新到 爬虫训练场 欢迎大家访问学习。
项目同步到代码仓库 https://gitcode.net/hihell/spider_playground

📢📢📢📢📢📢
💗 你正在阅读 【梦想橡皮擦】 的博客
👍 阅读完毕,可以点点小手赞一下
🌻 发现错误,直接评论区中指正吧
📆 橡皮擦的第 829 篇原创博客

从订购之日起,案例 5 年内保证更新

以上是关于24. CSS偏移反爬见过没,打开本文你就能学会 | 爬虫训练场的主要内容,如果未能解决你的问题,请参考以下文章

Python反爬,JS反爬串讲,从MAOX眼X开始,本文优先解决反爬参数 signKey

学会二阶思维,你就能像巴菲特一样思考了

模块化全幅索尼E卡口相机见过没?

python版的羊了个羊,你见过没?

学会了这套方法论,你就能更高效地解决问题

学会了这套方法论,你就能更高效地解决问题