记一次svg反爬学习

网址：http://www.porters.vip/confusion/food.html

打开开发者工具后

页面源码并不是真实的数字，随便点一个d标签查看其样式

我们需要找到两个文件，food.css和food.svg文件，点开第一个红框会在Sources面板打开该文件，鼠标放到food.css文件名上，显示的就是food.css的地址

鼠标放到第二个红框的url上面，得到的就是food.svg的地址，也可以右键Copy link address获取地址

svg_url = 'http://www.porters.vip/confusion/font/food.svg'
css_url = 'http://www.porters.vip/confusion/css/food.css'

这里我们打开svg的地址后是这样的

我们会看到四行毫无规律的数字，查看源码发现又是一堆看着像加密的代码（其实不是，这里是svg-font的坐标）

然后打开css文件

这里的background的css渲染数字的坐标

到此，需要解释一下为什么会有两个坐标，及字符定位的问题：

浏览器根据css样式中设定的坐标和元素宽高来确定svg中对应的数字。

接下来我们就只获取下面图中的电话号码

因为获取d标签的class属性比较容易，这里就简单构造一个电话号SVG列表

获取svg文件和css文件，以及构造电话号svg列表（这里比较简单，没什么解释的）

def get_file(url):
    resp = requests.get(url=url)
    content = resp.text
    return content

svg_url = 'http://www.porters.vip/confusion/font/food.svg'
css_url = 'http://www.porters.vip/confusion/css/food.css'
css_content = get_file(css_url)
svg_content = get_file(svg_url)

# 获取源码中电话号的SVG列表
svg_list = ['vhkbvu', 'vhk08k', 'vhk08k', 'vhk84t', 'vhk6zl', 'vhkqsc', 'vhkqsc', 'vhk6zl']
for svg_name in svg_list:
　　print(svg_name)
　　...

在上一步，我们已经可以通过循环拿到每一个svg_name，接下来就是通过正则获取css文本中，对应的svg_name的样式（坐标）

def get_css_coordinates(css_content, svg_name):
    res = re.findall('\.%s\s{\s+background:\s-(\d+)px\s-(\d+)px;\s}' % svg_name, css_content)
    if bool(res):
        x, y = res[0]
　　　　 return (int(x), int(y))

得到css_x和css_y坐标后，拿着css_y坐标去定位上面svg文件中四行数字，获取css_x，css_y坐标对应的数字

from parsel import Selector
def get_svg_text_content(svg_content, css_y):
    # 获取svg中字符的font-size属性，后面会用到
    font_size = svg_content.split('font-size:')[1].split('px;')[0]
    svg_data = Selector(svg_content)
    # 获取svg文件 text元素的y属性列表
    svg_y_list = svg_data.xpath('//text/@y').getall()
    # 取到大于css_y且最近的一个
    new_svg_y_list = [svg_y for svg_y in svg_y_list if css_y <= int(svg_y)]
    # print(new_svg_y_list[0])
    # 获取目标svg_y在原svg_y_list中的下标
    index = svg_y_list.index(new_svg_y_list[0])
    # print(svg_data.xpath('//text/text()').getall())
    text_content = svg_data.xpath('//text/text()').getall()[index]
    return text_content, font_size

解释一下，在上面所示代码中，在电话号svg列表中第一个元素vhkbvu，对应的css_y的值为97，而我们获得的svg_y_list为 ['38', '83', '120', '164']，在此列表大于97且最近接的就是120，

因此我们确定svg_y的值为120，同时也确定了我们需要的是第三行数据，通过svg_y，也就是纵坐标的值已经确定

现在我们获取到了text_content为：671260781104096663000892328440489239185923，也就是上图中的第三个text标签中的文本，而font-size为14px

font-size也可以打开svg文件后找到style，查看里面font-size的值

下面我们来确定横坐标，横坐标确定后，我们就可以找到具体的数字值，从而完成破解

def get_char(text_content, css_x, font_size):
    text_chars = list(text_content)
    # 利用x轴的坐标确定是第几个元素
    n = css_x // int(font_size)
    print(text_chars[n])
    return text_chars[n]

至此，我们的svg反爬破解完成，下面是完整代码

import requests
import re
from parsel import Selector

def get_file(url):
    resp = requests.get(url=url)
    # print(resp.text)
    content = resp.text
    return content

def get_css_coordinates(css_content, svg_name):
    res = re.findall('\.%s\s{\s+background:\s-(\d+)px\s-(\d+)px;\s}' % svg_name, css_content)
    if bool(res):
        x, y = res[0]
        return (int(x), int(y))

def get_svg_text_content(svg_content, css_y):
    # 获取svg中字符的font-size属性，后面会用到
    font_size = svg_content.split('font-size:')[1].split('px;')[0]
    svg_data = Selector(svg_content)
    # 获取svg文件 text元素的y属性列表
    svg_y_list = svg_data.xpath('//text/@y').getall()
    # 取到大于css_y且最近的一个
    new_svg_y_list = [svg_y for svg_y in svg_y_list if css_y <= int(svg_y)]
    # print(new_svg_y_list[0])
    # 获取目标svg_y在原svg_y_list中的下标
    index = svg_y_list.index(new_svg_y_list[0])
    # print(svg_data.xpath('//text/text()').getall())
    text_content = svg_data.xpath('//text/text()').getall()[index]
    return text_content, font_size

def get_char(text_content, css_x, font_size):
    text_chars = list(text_content)
    # 利用x轴的坐标确定是第几个元素
    n = css_x // int(font_size)
    print(text_chars[n])
    return text_chars[n]

def get_phone():
    result = ''
    svg_url = 'http://www.porters.vip/confusion/font/food.svg'
    css_url = 'http://www.porters.vip/confusion/css/food.css'
    css_content = get_file(css_url)
    svg_content = get_file(svg_url)

    # 获取源码中电话号的SVG列表
    svg_list = ['vhkbvu', 'vhk08k', 'vhk08k', 'vhk84t', 'vhk6zl', 'vhkqsc', 'vhkqsc', 'vhk6zl']
    for svg_name in svg_list:
        coordinate = get_css_coordinates(css_content, svg_name)
        if coordinate is not None:
            css_x, css_y = coordinate
            print(css_x, css_y)
            text_content, font_size = get_svg_text_content(svg_content, css_y)
            num = get_char(text_content, css_x, font_size)
            result += num
    print(result)

if __name__ == '__main__':
    get_phone()

最后说明：此案例只是我在学习《Python3反爬虫原理与绕过实战》里面svg反爬的学习心得以及实践，供参考，不喜勿喷