在前端中,字体图标具有 轻量、灵活、兼容性好等优点,但是没想到有公司拿他做反爬手段。例如抖音。
下面看下他怎么做的。
我们直接打开页面,在我画箭头的数字地方,抖音都应用了字体图标反爬。
接下来打开调试控制台,找到相应的css。点击最右侧的css样式链接。
“@font-face”是前端中定义字体图标的固定写法。我们直接找到后缀为.svg的url链接,下载下来
svg文字下载下来,用notepad打开
font-family定义了字体库的名称,下面划红框的才是关键,看不懂?没关系。
打开网站http://fontello.com/.把我们下载的svg文件拖上去。
初始打开Custom Icons下面是空白,把svg文件拖上去,才会显示字体图标。
接下来,关键的步骤,制作映射关系。
把notepad中的unicode的数字复制出来当做key,在网站上看到的数字当成value,注意是有顺序的,notepad中的顺序是自上而下,网页中的字体图标顺序是自左往右。
制作好如下所示:
font_map = {
"58882": "1",
"58883": "0",
"58884": "3",
"58885": "2",
"58886": "4",
"58887": "5",
"58888": "6",
"58889": "9",
"58890": "7",
"58891": "8",
"58892": "4",
"58893": "0",
"58894": "1",
"58895": "5",
"58896": "2",
"58897": "3",
"58898": "6",
"58899": "7",
"58900": "8",
"58901": "9",
"58902": "0",
"58903": "2",
"58904": "1",
"58905": "4",
"58906": "3",
"58907": "5",
"58908": "7",
"58909": "8",
"58910": "9",
"58911": "6",
}
制作完毕,我们就可以做转换啦。
接下来请求网页,拿到响应信息,把要的提取的数字用xpath叉出来,叉出来的文字显示的是unicode编码,取它的ascii编码的值,然后从font_map中拿出响应的数字即可。到这里就转换成功啦。
下面贴转换函数
def font_convert(temp: list) -> str:
fonts = []
for i in temp:
t = i.strip()
if not t:
continue
elif t in [".", "w"]:
fonts.append(t)
else:
fonts.append(font_map[str(ord(t))])
return "".join(fonts)
最终效果: