思路：分析精灵图—>查找定位样式—>分析定位样式规律—>分析代码—>构建替换字典—>敲代码
1.分析精灵图+查找定位样式
分析css代码，每隔一个数字定位数越来约大，第一个和第七个都是0其定位值却不一样。
1.png (352.28 KB, 下载次数: 0)
下载附件
图一
2022-8-19 18:08 上传
我们尝试将定位值修改为0看看是多少，修改之后便可知道定位值为0的图片显示为1
2.png (216.33 KB, 下载次数: 0)
下载附件
图二
2022-8-19 18:15 上传
再尝试把图片调试显示为二，便可知道图片一和二的值差为-30，再把图片的值修改为三就能看出真实定位值为-30.或者30
3.png (269.87 KB, 下载次数: 0)
下载附件
图三
2022-8-19 18:21 上传
4.png (222.67 KB, 下载次数: 0)
下载附件
图四
2022-8-19 18:21 上传
2.分析定位样式规律
由上面图可知，定位的真实值为-30或者30，因为图片在y轴0往上30个像素（正）就是从1变成0，而在y轴往下30个像素就是从1变成2
而我们现在要寻找的便是定位样式的规律，他们混淆的定位像素如何变成我们所能看懂的定位像素，比如-2070px与30px有什么关系，又与-270有什么关系。他们的图片显示都是图片0，像素却不一样。
当然规律不是凭空出现的，我们便要分析他们的代码找到规律。
3.分析代码
我这次选择的是最常用的搜索法！
5.png (42.43 KB, 下载次数: 0)
下载附件
2022-8-19 18:43 上传
发现有三个webpackJsonp文件，webpack必定有个模块加载器，我们可以在几个文件里面搜索关键词call或者apply
但是搜索之后发现有些文件不仅搜不出有的文件搜出来了也不是我们想要的。
6.png (86.04 KB, 下载次数: 0)
下载附件
2022-8-19 19:10 上传
那便继续从这些文件里面搜索background-position，毕竟混淆定位值才是我们想要拿的值。
7.png (70.27 KB, 下载次数: 0)
下载附件
图七
2022-8-19 19:15 上传
可以看到里面有个background-position，并且下面有个热门职位数量加载中..，目测这是个关键位置。
因为源代码里面也有个热门职位数量加载中..,并且还有各个定位值的静态文本
8.png (17.59 KB, 下载次数: 0)
下载附件
图八
2022-8-19 19:18 上传
便可以知道网页上的代码都是从这里动态渲染的
打上断点刷新代码断了下来，我们可以看到选中(-30 * parseInt(t - 1) - 300 * (i + 1))之后混淆定位值出现了，是-270，这个值与参数t=’0‘和i=0都有关
9.png (338.06 KB, 下载次数: 0)
下载附件
2022-8-19 19:28 上传
但是我们怎么找到关键参数t和i呢，每次放开断点之后，t和i都会产生变化
回溯函数Te发现了t值是一个值会变化的数组
10.png (341.66 KB, 下载次数: 0)
下载附件
2022-8-19 19:37 上传
下了断点之后可以在控制台调试一下Te,看看能不能找到t值从哪里来的。可以看出Te函数可以直接调出八个定位的样式值，也可以获取到我们之前所需要的t值
11.png (324.6 KB, 下载次数: 0)
下载附件
十一
2022-8-19 19:45 上传
回去调试一下看看t值是不是一样的。通过下面图可得t值是一样的
12.png (335.01 KB, 下载次数: 0)
下载附件
十二
2022-8-19 19:52 上传
重新刷新一下网页获取t值，可以发现t值是可变的，那肯定是通过XHR响应的
13.png (13.15 KB, 下载次数: 0)
下载附件
2022-8-19 19:57 上传
抓包调到XHR抓到一个有时间戳的包查看值跟刚刚刷新的值是一样的
14.png (50.79 KB, 下载次数: 0)
下载附件
十四
2022-8-19 20:00 上传
现在t值有了，i是for循环产生的，便可以通过(-30 * parseInt(t - 1) - 300 * (i + 1))获取到混淆的定位值
4.构建替换字典
首先我们通过调试知道
30是0
60是9
90是8
120是7
150是6
180是5
210是4
240是3
270是2
300是1
0是1
-30是2
-60是3
-90是4
-120是5
-150是6
-180是7
-210是8
-240是9
-270是0
就可以构建字典，找出网站定位（会随机改变的，有正有负数）与图片定位（固定的）的关系
把值分列出来找对应关系
-270 ———0
-600 ———1
-1140 ———9
-1320 ———5
-1470 ———0
-1920 ———5
-2160 ———3
-2640 ———9
我们便可以通过上面推出下面(值已经通过xhr更新了)，300是一个循环，同时通过(-30 * parseInt(t - 1) - 300 * (i + 1))推出和上面的值逆向推出下面的方式
300x1-270————————30——————0
300x2-600————————0——————1
300x3-1140———————— -240——————9
300x4-1320———————— -120——————5
300x5-1470———————— 30——————0
300x6-1920———————— -120——————5
300x7-2280———————— -180——————7
300x8-2400———————— 0——————1
真实定位值都有了，便可以敲代码了
5.敲代码
[Python] 纯文本查看 复制代码import re
import requests
# import execjs
import json
import time,math
#获取时间戳 -^^-就算是吊车尾，也要做一个为第一而活的吊车尾
ts = time.time()
millis = int(round(time.time() * 1000))
# 获取t值 -^^-就算是吊车尾，也要做一个为第一而活的吊车尾
url="https://tuiguang.shixiseng.com/proxy-prefix/new-intern-api-host/api/interns/v3.0/interns/intern_total?build_time="+str(millis)
html1 = requests.get(url)
re2 = re.compile('{"code":100,"msg":{"total":(.*?)}}')
re2 = re2.findall(html1.text)
# 构建字典 -^^-就算是吊车尾，也要做一个为第一而活的吊车尾
zd={
'30':'0',
'60':'9',
'90':'8',
'120':'7',
'150':'6',
'180':'5',
'210':'4',
'240':'3',
'270':'2',
'300':'1',
'0':'1',
'-30':'2',
'-60':'3',
'-90':'4',
'-120':'5',
'-150':'6',
'-180':'7',
'-210':'8',
'-240':'9',
'-270':'0'
}
#字典替换并且下载 -^^-就算是吊车尾，也要做一个为第一而活的吊车尾
for i in range(0,7):
try:
re3 = re.compile('\d')
re3 = re3.findall(re2[0])
t = re3
jg = str(300 * (i + 2) + (-30 * (int(t) - 1) - 300 * (i + 2)))
with open('实习僧1' + '.txt', mode="a", encoding='utf-8')as f:
f.write(jg.replace(jg, zd[jg]))
except:
break
5.作者有话说
其实有心人都已经看出那个有时间戳的url里面的值就是我们所需要的值，根本就不需要什么字体反反爬，但是我觉得吧这个应该属于这个网站的bug，不然他这雪碧图反爬就摆着好看啊。而我们这篇文章就是关于雪碧图字体反爬的。就算看到了我们也要假装没有看到，然后把雪碧图字体反爬好好练一遍。其实，鼠鼠也是写文章的时候才发现的，真的是栓Q。
