不止是CSS偏移反爬虫

墨蓝 2023-07-23 03:45 2阅读 0赞

### 文章目录 ###

*   *  CSS偏移反爬虫
     *   *  案例分析
         *  代码说明
         *  效果展示
     *  关注不迷路哦

## CSS偏移反爬虫 ##

CSS偏移反爬虫指的是利用CSS样式将乱序的文字排本为人类正常阅读顺序的行为。这个概念不是很好理解，我们可以通过对比两端文字来加深对这个概念的理解。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg3MDY0Ng_size_16_color_FFFFFF_t_70]

*  HTML文本中的文字：我的学号是 1308205，我在北京大学读书。
 *  浏览器显示的文字：我的学号是 1380205，我在北京大学读书。

### 案例分析 ###

爬虫取到的学号是1308205，但用户在浏览器中看到的却是1380205.如果不细心观察，爬虫工程师很容易被爬取结果糊弄。这种混淆方法和图片伪装一样，是不会影响用户阅读的。让人好奇的是，浏览器如何将HTML文本中的数字按照开发者的意愿排序或放置呢？这种放置规则是如何运行的呢？我们可以通过一个具体的例子来了解CSS偏移反爬虫的应用和绕过方法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg3MDY0Ng_size_16_color_FFFFFF_t_70 1]

### 代码说明 ###

"""
    示例：CSS偏移反爬虫示例
    网址：http://www.porters.vip/confusion/flight.html
    任务：爬取航班查询和机票销售网站页面中的航站名称，
    所属航空公司和票价。
    """
    import requests
    import re
    from parsel import Selector
    
    class Css(object):
        def __init__(self):
            self.url = 'http://www.porters.vip/confusion/flight.html'
            self.headers = {
                "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36"
            }
    
        def get_response_from_page(self, url):
            response = requests.get(url, headers=self.headers)
            if response.status_code == 200:
                return response
            else:
                return False
    
        def get_contnet_from_page(self):
            response = self.get_response_from_page(self.url).text
            sel = Selector(response)
            em = sel.css('em.rel').extract()
            for element in em:
                element = Selector(element)
                #定位所以的<b>标签
                element_b = element.css('b').extract()
                # print(element_b)
                bl = Selector(element_b.pop(0))
                base_price = bl.css('i::text').extract()
                print(base_price)
                alternate_price = []
                for eb in element_b:
                    eb = Selector(eb)
                    #提取<b>标签的style属性
                    style = eb.css('b::attr("style")').get()
                    #获得具体的位置
                    position = ''.join(re.findall(r'left:(.*?)px',style))
                    #获取该标签下的数字
                    value = eb.css('b::text').get()
                    #将<b>标签的位置信息和数字以字典的格式添加到替补票价列表中
                    alternate_price.append({'position':position,'value':value})
                for al in alternate_price:
                    position = int(al.get('position'))
                    value = al.get('value')
                    #判断位置的数值是否正整数
                    puls = True if position >= 0 else False
                    #计算下标，以16px为基准
                    index = int(position / 16)
                    #替换第一对<b>标签值列表中的元素，也就是完整值覆盖操作
                    base_price[index] = value
                print(base_price)
    
    
    if __name__ == '__main__':
        css = Css()
        css.get_contnet_from_page()

### 效果展示 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg3MDY0Ng_size_16_color_FFFFFF_t_70 2]

## 关注不迷路哦 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg3MDY0Ng_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg3MDY0Ng_size_16_color_FFFFFF_t_70]: /images/20230528/465a50038fa0404d9bf46158479b254d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg3MDY0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230528/1b060594a9964680a0793ac90a317cc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg3MDY0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230528/9714f88a016d4d02a8461ae50b901308.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg3MDY0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230528/9bb19fdc964a4c6ebbcfb3c118b0aa01.png