正文

呦~，这不svg映射反爬么，这你都会？厉害厉害|案例25(代码片段)

梦想橡皮擦  梦想橡皮擦  2023-01-28  504

关键词：

在正式学习本篇博客前，先要了解一下什么是 SVG（Scalable Vector Graphics），它是一种矢量图形格式，可以用来在网页上创建可伸缩的图形。

使用 SVG 技术实现反爬虫的方法有以下几种：

验证码：使用 SVG 创建验证码图形，用户需要识别图形中的文字或数字来完成验证。
图形拼图：将一张图片分成多个小图片，用户需要将小图片拼回原图才能访问网站。
滑动验证：使用 SVG 创建滑块，用户需要拖动滑块到特定位置才能访问网站。
点击验证：使用 SVG 创建图形，用户需要点击图形中的特定区域才能访问网站。
机验证：使用 SVG 创建图形，让用户输入图形中特定的信息，验证用户是否是人类。

阅读本篇博客前，需要提前了解一下如何在 Python 中生成 SVG 图片，这一点可以参考下述博客。

Python 生成 svg 图片，一篇博客带你掌握 Python 与 svg 之间的操作

SVG反爬

生成 SVG 数字图片

在编写反爬案例时，可以提前生成一张 SVG 图片，其中包含 0~9 这 10 个数字，然后按照一定间隔进行排序。

import svgwrite
import random

dwg = svgwrite.Drawing('random_numbers.svg', size=(200, 20), profile='tiny')

nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

random.shuffle(nums)
for i, num in enumerate(nums):
    text = dwg.add(dwg.text(str(num), insert=(i * 20, 20), fill='black', font_size=16))

dwg.save()

图片生成使用的是 svgwrite 模块，然后通过打乱 nums 列表，生成一个新的列表排序，最后进行文字渲染。

上述图片每个数字的间隔是 20 像素，基于该点，整理出一个位置和数字的字典。

字典

位置和数字的对应关系字典：

nums_dict = 
    1: 0,
    8: 1,
    0: 2,
    3: 3,
    5: 4,
    6: 5,
    7: 6,
    9: 7,
    2: 8,
    4: 9

字典中每个元素的第一项是数字，第二项是对应的索引，如果希望获取数字 2 的索引位置，只需要调用 nums_dict[2] 即可实现。

SVG 数字图片在网页中的应用

下面实现 SVG 在网页中的应用，其核心用到的是 CSS 背景偏移。

首先在 span 标签中展示数字 1，基于上述 svg 图片进行实现，数字 1 所在的索引位置是 0，所以代码如下所示。

以下代码使用的是 flask 中的 jija2 模板

<style type="text/css">
    .svg_img
        display: inline-block;
        width: 10px;
        height: 26px;
        background: red url('url_for("static",filename="images/random_numbers.svg")') no-repeat;
        background-position:0 0;
        line-height: 20px;
    
</style>

HTML 标签位置代码为：

<div class="container">
  <span class="svg_img"></span>
</div>

运行代码，在浏览器可以看到一个红色背景的图片，其中显示数字 1。

前文重点就是将 SVG 设置为背景图片，然后使用背景偏移，即 background-position:0 0; 进行图片部分区域展示。

用相同的办法，展示出一个完整的数字来，例如 13579，编写如下代码。

<div class="container">
  <span class="svg_img" style=" background-position:0 0;"></span>
  <span class="svg_img" style=" background-position:-60px 0;"></span>
  <span class="svg_img" style=" background-position:-80px 0;"></span>
  <span class="svg_img" style=" background-position:-120px 0;"></span>
  <span class="svg_img" style=" background-position:-140px 0;"></span>
</div>

此时可以在网页显示一个标准的数字。（红色背景仅供测试使用）

接下来对渲染逻辑做一下总结。

前台渲染逻辑

由于 SVG 中每个数字的间隔是 20px，所以渲染对应数字，只需要用 20px 乘以其索引位置即可，由于是左侧偏移，故还需要用到负号（-），表示左移。

拿到该逻辑之后，就可以在 Flask 后台设置数字，前台进行渲染了，例如随机选一个数字 279387，然后编写 flask 的后台代码。

flask 后台逻辑编写

首先将数字 279387 转换为列表，然后传递道视图模板中，同时还要传递数字与位置对应关系字典。

@antispider.route('/rank')
def games():
    nums_dict = 
        1: 0,
        8: 1,
        0: 2,
        3: 3,
        5: 4,
        6: 5,
        7: 6,
        9: 7,
        2: 8,
        4: 9
    
    mynum = 279387

    # 将数字转换为列表，便于后续迭代
    nums_list = list(map(int, str(mynum)))

    return render_template("antispider/game.html", nums_list=nums_list, nums_dict=nums_dict)

模板中使用循环实现即可。

<div class="container">
  % for num in nums_list %

  <span
    class="svg_img"
    style=" background-position:-nums_dict[num]*20 px 0;"
  ></span>
  % endfor %
</div>

运行代码，任意数字使用 svg 渲染道前台的案例就完成了。

集成 SVG 反爬案例到爬虫训练场

理论学习完毕，就可以进行相应实践了，将 SVG 反爬集成到项目中。

访问地址为：pachong.vip/as/rank

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

全网 6000+人正在学习的爬虫专栏 👇👇👇👇👇👇👇

hue厉害啊

可以看日志mr日志可以看执行计划分析数据倾斜，性能瓶颈的利器啊可以看表结构查看详情

python基础测试题，这你都不会就不再说python简单了

单选题（2.5分*20题）1.下列哪个表达式在Python中是非法的？BA.x=y=z=1B.x=(y=z+1)C.x,y=y,xD.x+=y2.pythonmy.pyv1v2命令运行脚本，通过fromsysimportargv如何获得v2的参数值?CA.argv[0]B 查看详情

一些厉害的网站

笛卡尔坐标系： https://www.desmos.com/用于找规律：http://oeis.org/一个数的各种性质：http://zh.numberempire.com/建图、树专用：https://csacademy.com/app/graph_editor/ 查看详情

2021最新java开发者学习路线，太厉害了！(代码片段)

...需要一个过程，那就是从头到尾依次执行。任何资源都会为这个程序服务，这必然就会存在浪费资源的情况。这里说的浪费资源指的是资源空闲，没有充分使用的情况。操作系统为我们的程序带来了并发性，... 查看详情

厉害了，dubbo正式毕业！

厉害了，2019/05/21Apache软件基金会发表博文，宣布Dubbo在2019/05/20这天正式毕业，成为Apache的顶级项目。参考：https://blogs.apache.org/foundation/entry/the-apache-software-foundation-announces52不过Github的名称还没改过来，还是叫incubator-dubbo，坐等... 查看详情

精进——如何成为很厉害的人（采铜）

...能在新的一年读更多的书，新年更上一层楼，成为一个很厉害的人～《精进——如何成为一个很厉害的人》是本周读完的一本书，祝各位看到这篇文章的朋友新春快乐！鸡年大吉！干货输出Day1导语“精进”来源佛教... 查看详情

我的论坛上传图片为啥压缩太厉害?

如何让图片真实显示?现在上传后的图片都被压缩得太厉害,非常不清晰,谢谢!参考技术A上传的图片是不会被压缩的。你点那个图片就能看到原图。你现在看到的只是缩列图。查看原帖>>本回答被提问者采纳查看详情

妈呀！这东西太厉害了！俺服了？

妈呀！这东西太厉害了！俺服了？是什么东西有这么大的魔力呢？让众多的人都觉得厉害，让很多的家长觉得值呢？千万精品淘宝店的的店长就为您讲解一下这东西主要是依赖于现代化的网络和手机来实现相应的功能，那么... 查看详情

如何成为很厉害的程序员？这几点很重要

前几天我儿子问我说：“怎么成为一个很厉害的程序员？”从我开始学编程起，我也很羡慕那些比我厉害的人，虽然偶像一直在变，但也恰恰说明了我在进步，因为慢慢地我离我羡慕的那种人越来越近࿰... 查看详情

怎样才是很厉害的人（转）

...这样。转自：https://www.zhihu.com/question/22921426「怎样才是很厉害的人？」「自然是有好看的身材以及容颜被很多人喜欢有很多厉害又有趣的朋友有对的人嘻嘻哈哈打打闹闹笑笑人生」详见:你查看详情

超厉害的旋转的太极源码

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">#box{width:420px;height:420px;/*background-color:gray;*/margin:0auto;posit 查看详情

深入理解javascript王福朋，厉害了word哥

...anceof这种原先只靠死记硬背的概念彻底搞明白了。真的是厉害了word哥。查看详情

gba鬼武者策略版哪几个角色最厉害最好用最厉害啊！！！！！！！！！！！！！！！！！！急！！！！！

那个角色最厉害啊！！！！！！！！！！！！！！还有幻魔的那个空间里面有什么东西啊！！！！！！！！我听说有厉害的武器那里究竟有什么？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？... 查看详情

英语厉害的都进来

*IfyouareunabletomounttheDVD,makesurethat/etc/fstab'sentryforyourcdromhastypeauto.*Whenawhitewindowpopsupduringinstallationyoumustcloseit*Thegameneedsacrack*Iftheinstallerasksyoufordisc1whileinstalling,trycopyingthesetupfilestoyourhomefolderandinstallfromthere*Placed3dx9_29.dllandgdiplus.dllinWi... 查看详情

执行vba代码时工作表抖动的厉害如何避免

参考技术A你是说屏幕刷新吧，关闭即可，Application.ScreenUpdating=False记得处理完最后加上Application.ScreenUpdating=True可以大幅提升处理速度查看详情

一台“厉害”的打印机

...xff0c;开启云端打印新模式本文分享自华为云社区《一台“厉害”的打印机：云+IoT，开启云端打印新模式》，作者：华为IoT云服务。后疫情时代生活的各方面都在往线上模式延展而在不被人注意的角落里打印机... 查看详情

传统武术家为什么看起来厉害？谈实战的重要性

...受呢？就是看着传统武术家表演示范的时候，很厉害。那么是不是真的厉害？不好意思，真的不厉害。举例来说：闭眼反应。当拳头过来的时候，人的自然反应就是闭眼。要克服这个反应，必须经过长... 查看详情

道德经~最厉害的人要战胜的，不是别人，而是自己

...败者。流传千古的名著《道德经》却告诉我们，真正厉害的人，并不是能战胜他人的人。一个能战胜他人的人，虽然厉害，却比不上另一种人。是哪种人呢？我们查看详情