日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 前端技术 > javascript >内容正文

javascript

01-探寻 JavaScript 反爬虫的根本原因

發(fā)布時(shí)間：2023/12/16 javascript 27 豆豆
生活随笔 收集整理的這篇文章主要介紹了 01-探寻 JavaScript 反爬虫的根本原因 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

你好，我是悅創(chuàng)。

本系列教程開(kāi)始之前呢，我要先跟你探討一下：反爬蟲(chóng)是什么

首先，反爬蟲(chóng)這件事在目前來(lái)講，并沒(méi)有明確的定義。（整個(gè)業(yè)內(nèi)都沒(méi)有一個(gè)明確的定義）那由于各方角色不同，或者用的編程語(yǔ)言或者工具不同，所以對(duì)于反爬蟲(chóng)的看法也各持己見(jiàn)。

那么，在咱們這個(gè)系列課程中呢，我需要大家保持一個(gè)相同的觀點(diǎn)：

我們約定，限制爬蟲(chóng)程序訪問(wèn)服務(wù)器資源和獲取數(shù)據(jù)行為的稱為 反爬蟲(chóng)。

限制手段包括但不限于：請(qǐng)求限制、拒絕響應(yīng)、客戶端身份驗(yàn)證、文本混淆和使用動(dòng)態(tài)渲染技術(shù)。

這些限制根據(jù)出發(fā)點(diǎn)可以分為：主動(dòng)型反爬蟲(chóng)和被動(dòng)型反爬蟲(chóng)。

Ps：

主動(dòng)型反爬蟲(chóng)指的是，有意而為之，特意為我們（爬蟲(chóng)工程師）準(zhǔn)備的一些限制手段。

例如說(shuō)：IP 限制、Cookies 校驗(yàn)、登錄頁(yè)面的驗(yàn)證碼或者是注冊(cè)頁(yè)面的驗(yàn)證碼等等

被動(dòng)型反爬蟲(chóng)指的是，當(dāng)用戶操作某樣功能引起是的一個(gè)功能機(jī)制。

例如說(shuō)：下拉加載、懸停（預(yù)覽）、以及一些網(wǎng)頁(yè)數(shù)據(jù)的計(jì)算等等，這些是以提升用戶體驗(yàn)為主要目的，但是它們也造成了——爬蟲(chóng)對(duì)這些數(shù)據(jù)的獲取的一個(gè)限制效果。

這節(jié)課主要分為 4 個(gè)知識(shí)點(diǎn)。

目錄

  • （反爬蟲(chóng)）Web 網(wǎng)頁(yè)的基本構(gòu)成
  • 瀏覽器的組件和作用
  • HTML DOM與網(wǎng)頁(yè)渲染過(guò)程
  • 編程語(yǔ)言或工具與瀏覽器的差異
    • 1. Web 網(wǎng)頁(yè)的基本構(gòu)成

    這是瀏覽器打開(kāi)網(wǎng)頁(yè)后的一個(gè)截圖，從截圖當(dāng)中我們可以看到有：導(dǎo)航欄、logo、搜索框、備案號(hào)相關(guān)信息等等，那么組成這個(gè)頁(yè)面的主要元素就是 文字和圖片 。當(dāng)然，頁(yè)面的元素遠(yuǎn)遠(yuǎn)不止這些，像優(yōu)酷、網(wǎng)易或者愛(ài)奇藝、搜狗等等，網(wǎng)站當(dāng)中還有音頻和視頻。

    接下來(lái)我們一起來(lái)看一下一個(gè)網(wǎng)頁(yè)的基本構(gòu)成：

    （圖片來(lái)源-網(wǎng)絡(luò)）

    從左到右分別是：HTML、JavaScript、CSS、媒體資源、Other（和其他的一些東西）

    • HTML：HTML 是超文本標(biāo)記語(yǔ)言，在文檔當(dāng)中它被 html 標(biāo)簽對(duì)包裹的文本（<html>-</html>）就是 HTML 文檔或者是 HTML 的代碼。
    • JavaScript：JavaScript 是一種解釋型語(yǔ)言，在文檔當(dāng)中被 script 標(biāo)簽對(duì)（），包裹的文本就是 JavaScript 的代碼。
    • CSS：CSS是層疊樣式表，在文檔中被 style 標(biāo)簽包裹著的就是 CSS 樣式的代碼。

    那么之后的：圖片視頻音頻和字體，這些都屬于媒體或者多媒體資源。（例如：表示圖片的標(biāo)簽通常是 img 標(biāo)簽，然后其中的 src 指向的就是 具體資源路徑

    操作：打開(kāi)瀏覽器觀察資源加載

    按以下步驟來(lái)：

  • 打開(kāi)瀏覽器
  • 訪問(wèn)：https://www.baidu.com/
  • 打開(kāi)瀏覽器的開(kāi)發(fā)者工具（F12）
  • 切換到 NetWork 面板

  • 接下來(lái)刷新一些網(wǎng)頁(yè)或者輸入：Python 搜索

    • 現(xiàn)在，我們來(lái)看看到底加載哪些內(nèi)容。

    這時(shí)候我們會(huì)發(fā)現(xiàn)，當(dāng)我們?cè)L問(wèn)百度這個(gè)網(wǎng)站的時(shí)候，加載的資源有：文檔、css文件、圖片（png、jpg）、js等

    2. 瀏覽器的組件和作用

    我們常用的瀏覽器共有五個(gè)組件和三個(gè)解釋器，這五個(gè)組件分別是：用戶界面、瀏覽器引擎、渲染引擎、數(shù)據(jù)存儲(chǔ)、網(wǎng)絡(luò)，三個(gè)解釋器分別是：HTML 解釋器、JavaScript 解釋器、CSS 解釋器。

    那么瀏覽器之所以能夠理解 HTML、CSS、JavaScript 代碼，并且按照一定的規(guī)則排版，就是這個(gè)三個(gè)解釋器的功勞。

    組件這邊，用戶界面組件的主要作用是顯示操作界面，瀏覽器引擎的主要作用就是：負(fù)責(zé)將用戶的操作傳遞給對(duì)應(yīng)的渲染引擎，渲染引擎的主要作用是調(diào)用，**這三個(gè)解釋器去解釋對(duì)應(yīng)的文檔中的代碼。然后根據(jù)解釋器的結(jié)果重新排版頁(yè)面。**數(shù)據(jù)存儲(chǔ)組件它的作用是：**在本地存儲(chǔ)一些體積較小的數(shù)據(jù)，如 Cookies、Storage對(duì)象等。**網(wǎng)絡(luò)組件：它會(huì)自動(dòng)加載 HTML 文檔中所需要的其他資源。

    剛才帶大家了解了瀏覽器的五大組件和三大解釋器，我們可以在腦海中填補(bǔ)瀏覽器的結(jié)構(gòu)圖。 也就是說(shuō)平常使用的瀏覽器，實(shí)際上是由一堆組件構(gòu)成的一個(gè)工具。

    那么其中各個(gè)組件各司其職，例如：渲染組件、渲染引擎 它會(huì)調(diào)用三個(gè)解釋器去解釋并理解代碼當(dāng)中的一些意圖。

    3. HTML DOM 與網(wǎng)頁(yè)渲染過(guò)程

    HTML DOM 是文檔對(duì)象模型，它是中立于平臺(tái)和語(yǔ)言之間的一個(gè)接口。它允許程序動(dòng)態(tài)的更新文檔內(nèi)容，文檔結(jié)構(gòu)和樣式。換一句話來(lái)說(shuō)：程序可以通過(guò) DOM 來(lái)改變頁(yè)面顯示的內(nèi)容，HTML 文檔中的每一個(gè)標(biāo)簽對(duì)，都是一個(gè) DOM 節(jié)點(diǎn)（例如：title 標(biāo)簽，對(duì)應(yīng)一個(gè) DOM節(jié)點(diǎn)，那么 year 標(biāo)簽對(duì)應(yīng)的也是一個(gè) DOM 節(jié)點(diǎn)）看一下上面右邊的那張圖，我們平時(shí)看到的一層一層、層層嵌套的 HTML 標(biāo)簽，實(shí)際上就是一個(gè)父子關(guān)系的一個(gè) DOM 節(jié)點(diǎn)。JavaScript 代碼和 CSS 樣式，可以改變頁(yè)面當(dāng)中文字或圖片的位置、顏色或者內(nèi)容，但要注意的是：它們改變的只是頁(yè)面顯示的內(nèi)容，并不是能夠真正的去改變 HTML 文檔本身。它們只是改變了瀏覽器中的 DOM，這個(gè)觀點(diǎn)非常重要。（大家一定要理解）

    操作：打開(kāi)瀏覽器編輯 HTML

    這里我們打開(kāi)瀏覽器來(lái)做一個(gè)小實(shí)驗(yàn)，這里我們借助 W3school 的在線編輯器來(lái)運(yùn)行 HTML 代碼。

    <html><!-- <style> .last{color:red; } </style>--> <body><p id="first">這是段落。</p><p>這是段落。</p><p>這是段落。</p><p class="last">段落元素由 p 標(biāo)簽定義</p> </body> <!-- <script>first = document.getElementById("first");first.innerHTML = "我說(shuō)這是什么就是什么"; </script> --> </html>

    我們可以看一下上面的代碼，這些代碼都包裹在 html 標(biāo)簽對(duì)當(dāng)中。那么 body 標(biāo)簽當(dāng)中包裹著的就是 HTML 的代碼，<style></style> 標(biāo)簽對(duì)包裹著的是 CSS 樣式，<script></script> 標(biāo)簽對(duì)包裹的是 JavaScript 代碼 在 HTML 中這個(gè)是注釋符：<!----> 被注釋符注釋掉的，不會(huì)在代碼中起作用。

    我們先運(yùn)行以下代碼：

    <html> <body> <p id="first">這是段落。</p> <p>這是段落。</p> <p>這是段落。</p> <p class="last">段落元素由 p 標(biāo)簽定義</p> </body></html>

    我們來(lái)看看運(yùn)行結(jié)果：

    我們可以看到，右側(cè)的內(nèi)容顯示區(qū)域，顯示了 HTML 文檔當(dāng)中定義的內(nèi)容。

    我接下來(lái)來(lái)運(yùn)行以下代碼：

    <html> <style> .last{color:red; } </style><body><p id="first">這是段落。</p><p>這是段落。</p><p>這是段落。</p><p class="last">段落元素由 p 標(biāo)簽定義</p> </body> </html>

    我們這時(shí)候可以看到最后的那一段文字的顏色，已經(jīng)被改變了。

    同樣我們加上 JavaScript 代碼看看：

    <html><style> .last{color:red; } </style><body><p id="first">這是段落。</p><p>這是段落。</p><p>這是段落。</p><p class="last">段落元素由 p 標(biāo)簽定義</p> </body><script>first = document.getElementById("first");first.innerHTML = "我說(shuō)這是什么就是什么"; </script></html>

    我們發(fā)現(xiàn)右側(cè)內(nèi)容區(qū)域的第一行內(nèi)容已經(jīng)被改變，那么問(wèn)題來(lái)了：為什么內(nèi)容區(qū)域的文字和顏色都發(fā)生了變化，但代碼中的 body 標(biāo)簽包裹著的這些文字或者這些文本，都沒(méi)有發(fā)生任何的變化呢？

    左側(cè)的代碼仍然是：**這是段落。**而顯示給我們看的就是：我說(shuō)這是什么就是什么。這時(shí)候想一下，思考一下：為什么會(huì)是這個(gè)樣子的呢？

    其實(shí)，這正是之前所說(shuō)的：它們其實(shí)就是 JavaScript 于 CSS 的改變的，也就是說(shuō)瀏覽器當(dāng)中的 DOM 節(jié)點(diǎn)是由 CSS 和 JavaScript 的改變，最終改變的不是 HTML 代碼，或者它的文檔中的內(nèi)容，改變的其實(shí)是瀏覽器中 DOM 排版，要注意的是：這個(gè)變化是發(fā)生在 瀏覽器的顯示層面 實(shí)際上 HTML 的根本沒(méi)有發(fā)生任何的變化。

    上面我說(shuō)到了頁(yè)面的渲染過(guò)程，能夠說(shuō)明剛才我們做的實(shí)驗(yàn)得到的結(jié)果。

    上圖的步驟可以讓你更加的清晰。

    從開(kāi)始，用戶輸入了一個(gè)網(wǎng)址（這是在用戶界面組件當(dāng)中進(jìn)行的一個(gè)操作），那么當(dāng)用戶回車之后便進(jìn)入了瀏覽器引擎的工作流程當(dāng)中，接著就會(huì)根據(jù) HTML 文檔當(dāng)中的內(nèi)容去加載對(duì)應(yīng)的資源（例如：圖片、視頻、音頻、文字等等），這時(shí)候其實(shí)渲染引擎和三大解釋器已經(jīng)開(kāi)始工作了，要不然瀏覽器也不知道到底需要去加載什么樣的資源，那么資源的加載和代碼的解釋是同步進(jìn)行的。最后渲染引擎按照三大解釋器的解釋結(jié)果來(lái)操作 DOM，也就是重新把頁(yè)面內(nèi)容進(jìn)行排版，把排版得到的結(jié)果呈現(xiàn)給用戶（也就是我們看到的網(wǎng)頁(yè)內(nèi)容）以上就是瀏覽器的一個(gè)工作流程。

    4. 編程語(yǔ)言或工具與瀏覽器的差異

    操作：用瀏覽器打開(kāi)指定網(wǎng)址

    這里我們需要打開(kāi)瀏覽器，然后訪問(wèn)一個(gè)網(wǎng)站（例如：GitChat）

    可以看到瀏覽器訪問(wèn)之后可以，我們得到的是一個(gè)錯(cuò)落有致，排版精美的一個(gè)頁(yè)面。那么我們?cè)囈辉囉么a或者用工具來(lái)請(qǐng)求一下同樣的網(wǎng)址，看看會(huì)得到什么樣的結(jié)果，打開(kāi) IDE 也就是 Pycharm。

    這里我們使用 requests 庫(kù)向 GitChat發(fā)出網(wǎng)絡(luò)請(qǐng)求。并且打印請(qǐng)求得到的內(nèi)容。

    # !/usr/bin/python3 # -*- coding: utf-8 -*- # @Author：AI悅創(chuàng) @DateTime ：2020/1/12 13:53 @Function ：功能 Development_tool ：PyCharm # code is far away from bugs with the god animal protecting # I love animals. They taste delicious. import requestsurl = 'https://gitbook.cn/'html = requests.get(url).text print(html)# -------------輸出------------- "C:\Program Files\Python37\python.exe" "D:/daima/pycharm_daima/JavaScript 逆向課程/01-探尋 JavaScript 反爬蟲(chóng)的根本原因/test_1.py" <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=no"><title>GitChat</title><meta name="description" content="GitChat 是一款基于微信平臺(tái)的知識(shí)分享產(chǎn)品。通過(guò)這款產(chǎn)品我們希望改變IT知識(shí)的學(xué)習(xí)方式。"><meta name="robots" content="index,follow"><meta name="keywords" content="GitChat,機(jī)器學(xué)習(xí),大數(shù)據(jù),程序員,用戶體驗(yàn),軟件開(kāi)發(fā),知識(shí)付費(fèi),技術(shù)分享"><meta name="baidu-site-verification" content="BRkuL6TTfM"><link href="/dist/site/gitbook/bundle1.css" rel="stylesheet"><script src="/dist/site/gitbook/js1.js"></script><script src="/dist/js/jquery.lazyload.min.js"></script><link href="/css/gitbook/common/common.css" rel="stylesheet"><script src="/dist/gitbook/js/common.js"></script><link rel="icon" type="image/png" href="https://images.gitbook.cn/FrfR1mB39xM-U6iSAmDCpxWVxvoa" sizes="16x16"><link rel="icon" type="image/png" href="https://images.gitbook.cn/FrfR1mB39xM-U6iSAmDCpxWVxvoa" sizes="32x32"></head><link href="/dist/site/gitchat/bundle2.css" rel="stylesheet"><link rel="stylesheet" href="/dist/gitchat/css/mazi.css"><link rel="stylesheet" href="/dist/css/bootstrap.min.css"><link rel="stylesheet" href="/dist/gitbook/css/indexGitChat.css"><script src="/dist/js/ScrollMagic.min.js"></script><body><link rel="stylesheet" href="/dist/gitbook/css/mMaziJade.css"><div class="container_view"><link rel="stylesheet" href="/css/gitbook/topV6.css"><link rel="stylesheet" href="/dist/gitbook/css/topV6.css"><div id="header" class="headroom hidden-md hidden-lg hidden-sm top_box"><div style="float: left;-webkit-animation-name:none;animation-name:none;" class="container hidden-md hidden-lg hidden-sm"><ul id="gn-menu" class="gn-menu-main"><li class="gn-trigger"><a class="gn-icon gn-icon-menu"><span>Menu</span></a><nav class="gn-menu-wrapper"><div class="gn-scroller"><ul style="border-bottom:0" class="gn-menu"><li><a href="/" class="icon lnr-home">首 頁(yè)</a></li><li><a href="/gitchat/columns" class="icon lnr-rocket">專 欄</a></li><li><a href="/gitchat/series/list" class="icon lnr-diamond">專 題</a></li><li><a href="/gitchat/geekbooks" class="icon lnr-book">電子書(shū)</a></li><li><a href="/books/5b398139328f856827673b50/index.html" class="icon lnr-earth">關(guān)于我們</a></li><li><a class="icon lnr-text-align-justify">活動(dòng)分類</a><div class="activity_type clearfix"><a href="/gitchat/categories/58e84f875295227534aad506/1">前端</a><a href="/gitchat/categories/58e84f53ec8e9e7b34457809/2">人工智能</a><a href="/gitchat/categories/58e84f6bad952d6b3428af9a/3">架構(gòu)</a><a href="/gitchat/categories/5953698a3d38293ecceacb89/4">區(qū)塊鏈</a><a href="/gitchat/categories/58e84f1584c651693437f27c/5">職場(chǎng)</a><a href="/gitchat/categories/59c491948fee063dc3c447ab/6">編程語(yǔ)言</a><a href="/gitchat/categories/58e84f31ad952d6b3428af99/7">技術(shù)管理</a><a href="/gitchat/categories/58e84f7bec8e9e7b3445780d/8">大數(shù)據(jù)</a><a href="/gitchat/categories/591171a3e692d5280d8157b6/9">移動(dòng)開(kāi)發(fā)</a><a href="/gitchat/categories/58e84f2284c651693437f27d/10">產(chǎn)品與運(yùn)營(yíng)</a><a href="/gitchat/categories/58e84f425295227534aad502/11">測(cè)試</a><a href="/gitchat/categories/591f073981be962a981acf18/12">安全</a><a href="/gitchat/categories/5901bd477b61a76bc4016423/13">運(yùn)維</a></div><div style="margin:0 auto;width:90%;margin-top: 180px;"></div></li></ul></div></nav></li>>嚴(yán)選</span></div><div class="chat_list"><a href="/gitchat/activity/5e17e817c01d3c1ce1be3e2f" target="_blank" class="chat_item"> 內(nèi)容太多省略！ 內(nèi)容太多省略！ 內(nèi)容太多省略！ 內(nèi)容太多省略！ 內(nèi)容太多省略！ 內(nèi)容太多省略！ 內(nèi)容太多省略！ 內(nèi)容太多省略！}) function changeHomeColumn(num) {$('#syncColumn').addClass("syncColumn");$.ajax({url: "/gitchat/homepage/change/column/" + num,type: "GET",contentType: "application/json; charset=utf-8",success: function (data, status) {if (status == 'success' && data.code == 0) {$('#homeColumns').html('');$('#homeColumns').append(data.data);$('#changeColumns').attr('onclick', 'changeHomeColumn(' + data.next + '); return false;')$('#syncColumn').removeClass("syncColumn");}}}); }</script></html>Process finished with exit code 0

    我們得到的就是 HTML 代碼，沒(méi)有經(jīng)過(guò)渲染。

    接下來(lái)我們借助工具來(lái)操作一下，工具：PostMan

    這樣在下面就會(huì)得到我們的響應(yīng)正文，可以看到和 Python 代碼的結(jié)果是完全一樣的，并沒(méi)有排版過(guò)，也沒(méi)有請(qǐng)求到任何圖片之類的資源。所以，我們請(qǐng)求得到的只是 HTML代碼。實(shí)際上就是 GitChat的源代碼，我們可以在谷歌瀏覽器訪問(wèn)網(wǎng)頁(yè)之后，右鍵選擇顯示網(wǎng)頁(yè)源代碼看到得到的頁(yè)面也是和我們前面得到的代碼時(shí)一樣的。

    剛剛我們用了幾種不同的方式來(lái)訪問(wèn)了我們的 GitChat我們用一張圖來(lái)解析：

    由圖可知，我們?yōu)g覽器可以得到其他所需要的內(nèi)容，而工具得到的只是 HTML。

    這其實(shí)也就是：瀏覽器與其他工具的差異。準(zhǔn)確來(lái)說(shuō)，是因?yàn)槠渌ぞ弋?dāng)中沒(méi)有 JavaScript 解釋器，這里要注意 CSS 和 JavaScript 的情況時(shí)一樣的也就是說(shuō)可以利用其他工具當(dāng)中沒(méi)有 CSS 解釋器和渲染引擎的特點(diǎn)來(lái)實(shí)現(xiàn)反爬蟲(chóng)。實(shí)際工作中由非常多這樣的應(yīng)用，例如我們常常聽(tīng)到的字體反爬蟲(chóng)、文本偏移反爬蟲(chóng)和文本混淆反爬蟲(chóng)手段等等。

    總結(jié)

    以上是生活随笔為你收集整理的01-探寻 JavaScript 反爬虫的根本原因的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

    如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。