1. 前言#
一つのウェブページについて、私たちはそれが構造的に優れており、内容が明確であることを望みます。これにより、検索エンジンがそれを正確に認識できます。
一方、いくつかのシナリオでは、コンテンツが簡単に取得されないことを望みます。たとえば、電子商取引サイトの取引額や教育サイトの質問などです。これらのコンテンツは、通常、製品の命綱であり、効果的に保護する必要があります。これが「ウェブクローラとアンチクローラ」の話題の由来です。
2. 一般的なアンチクローラ戦略#
しかし、完璧なアンチクローラを実現するウェブサイトはありません。
ページがユーザーに正常に表示されることを望む場合、同時にクローラにチャンスを与えないようにするために、人間とロボットを識別する必要があります。そのため、エンジニアたちはさまざまな試みを行っています。これらの戦略のほとんどはバックエンドで使用され、現在一般的で効果的な手段です。例えば：
- User-Agent + Referer の検出
- アカウントと Cookie の検証
- CAPTCHA
- IP 制限
一方、クローラは人間に非常に近いものになることができます。例えば：
- Chrome Headless や PhantomJS を使用してブラウザ環境をシミュレートする
- Tesseractを使用して CAPTCHA を認識する
- プロキシ IP は淘宝で購入できます
だからこそ、100％のアンチクローラ戦略は存在しません。より多くの作業が必要であり、難易度の問題です。
しかし、フロントエンドエンジニアとして、私たちはゲームの難易度を上げることができます。面白いアンチクローラ戦略を設計することができます。
3. フロントエンドとアンチクローラ#
3.1 font-face 組み立て式#
例：猫眼映画
猫眼映画では、興行収入データは純粋な数字ではありません。
ページでは、font-face を使用して文字セットを定義し、unicode を使用して表示をマッピングしています。つまり、画像認識を除いて、文字セットを取得する必要があります。
3.2 background 組み立て式#
例：美団
font と同様の戦略を使用して、美団では background 組み立てを使用しています。数字は実際には画像であり、異なる background オフセットに基づいて異なる文字が表示されます。
3.3 文字の挿入式#
一部の WeChat 公式アカウントの記事では、さまざまな文字が挿入され、スタイルを使用してこれらの文字を非表示にしています。
この方法は驚くべきものですが、識別とフィルタリングの難しさはそれほど大きくありません。さらに改善することもできますが、それは一種のアイデアです。
3.4 疑似要素の非表示式#
例：Autohome
Autohome では、重要なメーカー情報を疑似要素の content に配置しています。
これも一つのアイデアです。ウェブページをクロールするためには、CSS を解析する必要があり、疑似要素の content を取得する必要があります。これにより、クローラの難易度が上がります。
3.5 要素の位置オーバーレイ式#
例：Qunar
数学が好きな Qunar も、4 桁の航空券価格について、最初に 4 つのiタグをレンダリングし、次に 2 つのbタグを使用して絶対位置オフセットを設定し、意図的に間違ったiタグを覆い隠して正しい価格を視覚的に表示します。
3.6 iframe の非同期読み込み式#
NetEase Cloud Music のページを開くと、ほとんどの HTML ソースコードにはiframeが 1 つだけあり、その src は空白のabout:blankです。その後、JavaScript が実行され、ページ全体のフレームワークが非同期で iframe に挿入されます。
3.7 文字の分割式#
例：全网代理 IP
プロキシ IP 情報を表示するページでは、IP の保護も困難です。
IP の数字と記号を DOM ノードに分割し、混乱させる数字を挿入します。クローラがこの戦略を知らない場合、値を正常に取得したと思うかもしれません。しかし、クローラが気づいた場合、解決は非常に簡単です。
3.8 文字セットの置換式#
同様に、Qunar のモバイル版もクローラを欺くことができます。
HTML には明らかに 3211 と書かれていますが、視覚的には 1233 が表示されます。実際には、文字セットを再定義し、3 と 1 の順序を交換しています。
以上