猿人学第四题--雪碧图--样式干扰

前言

        这道题js逆向方面非常简单，就一个md5加密，可以python写，也可以js调用，主要考

点是对css的熟悉程度，前端页面的了解，以及python基本操作的编写熟练程度。

 一、考题分析

        打开网页，检查元素会发现上面的数字是一个一个的图片拼接成的。检查数据包返回的也是包含base64的图片数据。定位到数据包启动器里的request行里的success成功请求到到数据后的处理，有前端css知识的可以看出j_key的首位是个’.'， 在css里 $(.xxx)就是匹配class=xxx的节点，所以$(j_key).css('display', 'none')的意思就是把class=j_key的标签的display设置成none，就是不显示。

        hex_md5就是md5加密，可以python改写，扣js的话其js就在上面，全扣下来什么都不用不就可以执行，我喜欢扣js，扣下来编个函数来调用很简单，复制j_key的定义作为返回值。

function j_key(key,value){
                return hex_md5(btoa(key + value).replace(/=/g, ''))
            }

        把响应体里的info值存成html格式，格式化下你会发现，一共有10个td标签，每一个就是对应一个数字组合，每一个img其属性有src，class，style。src就是0-9中某个数字的图片，class的就是对应的是否显示这个图片数字，style对应的图片显示位置。

        需要解决的问题：

        每个td标签里哪些数字图片显示，数字图片的排序，数字图片与数字的对应关系，数字图片转数字。这些基本上都是python基础知识的操作。

二、python编写

（1）请求网页返回info和j_key

def get_html(i, JsCode):
    response = requests.get(f"https://match.yuanrenxue.cn/api/match/4?page={i}", headers=headers, cookies=cookies)
    info = response.json()['info']
    with open('1.html','w',encoding='utf-8') as f:
        f.write(info)
    key = response.json()['key']
    value = response.json()['value']
    j_key = JsCode.call('j_key', key, value)
    return info, j_key

（2）数字图片与数字的对应关系

首先找出十个数字的base64图片，我的做法是利用集合元素的不重复性，把一页里所有src的值放到一个集合里，一般情况下刚好十个，逐个打印出来，分别粘贴到浏览器地址栏看其显示的数字，然后编写数字图片与数字对应的字典。

def get_num_dict(info):
    tree = etree.HTML(info)
    src = tree.xpath('//@src')
    num_set = set(src)    
    for i in num_set:
        print(i)

(3)处理每个数字组合

def one_nums(img_list, j_key):    
    num_list = []              #接收显示的数字与位置
    last_nums = []          #接受排完序的数组
    i = 0      #因为数字图片没显示一个就要加一次图片的宽度，因此要定义i来自增与位置相加
    for img in img_list:
        src = img.xpath('@src')[0]
        class_ = img.xpath('@class')[0].split(' ')[-1]
        style = img.xpath('@style')[0].replace('left:', '').replace('px', '')
        if j_key != class_:  #这个两个不等就说明数字图片会显示
            num_list.append((num_dict[src], float(style) + i)) #float(style) + i解决数字的排序，越大越靠后。
            i += 11.5
    num_sort = sorted(num_list, key=lambda x: (x[1]))  #按照x[1],既是float(style) + i重新排列列表
    for num in num_sort:
        last_nums.append(num[0])       #提取数字组成列表    
    return int(''.join(last_nums))        #列表转数字

（4）处理一页的数字组合

def get_one_page_num(info, j_key):
    tree = etree.HTML(info)
    td_list = tree.xpath('//td')
    page_num = []
    for td in td_list:
        img_list = td.xpath('./img')
        page_num.append(one_nums(img_list, j_key))
    return page_num

最后编写个for拿到所有数字就可以解决问题了。