CAPTCHAとそのスパム防止における役割を理解する

CAPTCHA(コンピュータと人体アパートを指示するために完全に自動化されたパブリックターニングテスト)は、自動乱用からWebフォームを保護するための不可欠なツールになりました。 スパムボットと悪意のあるスクリプトは、しばしばコンタクトフォーム、ログインページ、コメントセクションをターゲットにし、不要なコンテンツを送信したり、攻撃を立ち上げたりします。 うまく設計されたCAPTCHAは、ほとんどの人がすぐに完了し、本物のユーザーを破壊することなく自動化トラフィックを効果的にフィルタリングするチャレンジを失敗させるボットを強制します。

現代のCAPTCHA実装は、かつて技術を定義した歪んだテキスト画像を超えて進化してきました。 JavaScriptの広範な採用により、開発者は数学の問題、画像のパズル、ドラッグアンドドロップタスクなどのインタラクティブな課題を作成できるようになりました。ボットがバイパスするのは、ユーザーフレンドリーでより困難です。この記事では、バニラJavaScriptを使用してCAPTCHAを実装する方法を探求し、追加のスパム防止技術を統合し、reCAPTCHAのようなサードパーティサービスを使用するときに決定します。

ScratchからJavaScript CAPTCHA を作成する

JavaScript でカスタム CAPTCHA を作成すると、ユーザーエクスペリエンスとセキュリティ ロジックを完全に制御できます。以下では、数学の問題、スライダ、画像識別の 3 つの一般的なアプローチについて説明します。各メソッドは、通常の HTML、CSS、および JavaScript で実装でき、その後、サーバー側の検証フローに統合されます。

方法1:数学問題CAPTCHA

CAPTCHAは、ユーザーが解決しなければならないランダムな算術操作を示します。 これは、低リスクの形態でうまく機能しますが、単純な数字でHTMLを解析したり、光学的文字認識(OCR)を使用できる高度なボットに対して安全ではありません。

HTML構造

<form id="contactForm">
 <div id="captchaContainer">
 <p id="captchaQuestion">Loading...</p>
 <input type="number" id="captchaAnswer" placeholder="Your answer" required />
 </div>
 <button type="submit">Submit</button>
</form>

JavaScript ロジック

let captchaAnswer = 0;

function generateMathCaptcha() {
 const num1 = Math.floor(Math.random() * 20) + 1;
 const num2 = Math.floor(Math.random() * 10) + 1;
 const operator = ['+', '-', '*'][Math.floor(Math.random() * 3)];
 let expression = `${num1} ${operator} ${num2}`;
 captchaAnswer = eval(expression);
 document.getElementById('captchaQuestion').textContent = `What is ${expression}?`;
}

document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 const userAnswer = parseInt(document.getElementById('captchaAnswer').value, 10);
 if (userAnswer === captchaAnswer) {
 // Proceed with form submission
 console.log('CAPTCHA passed');
 } else {
 alert('Incorrect answer. Please try again.');
 generateMathCaptcha();
 document.getElementById('captchaAnswer').value = '';
 }
});

window.addEventListener('load', generateMathCaptcha);

[:]]] 数学のCAPTCHAは、JavaScriptを実行し、応答を計算するボットに脆弱です。 セキュリティを改善するために、サーバー側の検証(後で議論)と組み合わせ、スクリプトが正しい答えを抽出するのを困難にする方法で生成されたチャレンジを難読化することを検討してください。

方法2:スライダーCAPTCHA

スライダーの課題は、ユーザーが特定の位置にトラックに沿ってボタンをドラッグする必要があります。 この技術は、人間のマウスの動きやタイミングを検出し、単純なボットがエミュレートするのを困難にしています。 しかし、高度なボットはドラッグイベントをシミュレートすることができます。

基本実装[]

<div id="sliderCaptcha">
 <div id="sliderTrack">
 <div id="sliderThumb">→</div>
 </div>
 <p id="sliderStatus">Slide to verify</p>
</div>

、、および(またはタッチ等価)のイベントリスナーを追加します。 親指のオフセットを追跡し、ターゲットポジションに比較します。 一般的なトリックは、各ページのロードにターゲットポジションを設定し、最終的な位置と移動パターンの両方を検証することです。

[]セキュリティノート:[]]]。 ボットはマウスイベントをプログラム的にトリガーできるため、スライダーCAPTCHAは、移動速度、合計の長さ、および最終位置を記録するサーバー側のチェックとペアリングする必要があります。 ボットは、しばしば自然加速および減速プロファイルを生成できません。

方法3:画像選択CAPTCHA

Image-based CAPTCHAs は、特定のカテゴリに一致するすべての画像を選択するためにユーザーに尋ねます (例えば、「トラフィックライトですべての平方を選択します」)。 歪んだテキストよりもユーザーフレンドリーですが、それらは、イメージと回答のサーバー側のストレージを必要とするため、ゼロから実装する複雑です。 このアプローチのためのサードパーティサービスを使用することを検討してくださいが、それは事前保存された画像とランダム化された正しいセットで行うことができます。

簡略化例:[

<div id="imageGrid">
 <img src="cat.jpg" class="captcha-image" data-kind="animal">
 <img src="car.jpg" class="captcha-image" data-kind="vehicle">
 <img src="dog.jpg" class="captcha-image" data-kind="animal">
 <img src="tree.jpg" class="captcha-image" data-kind="plant">
</div>
<p>Select all images that show an animal.</p>

JavaScript は選択した画像を収集し、送信時に 属性を検証します。ボットが HTML を単に読み込むのを防ぐため、属性値はサーバーから暗号化または動的に生成されるべきです。

追加の技術でセキュリティを強化

クライアント側CAPTCHAは防空性ではありません。ボットはリバースエンジニアリングのJavaScript、ヘッドレスブラウザを実行したり、高度なAIを使用することもできます。したがって、フロントエンドのCAPTCHAをサーバー側とクライアント側の強化と組み合わせてください。

ハニポットフィールド

ヒトが見えない、または満たされない、ボットが頻繁に自動補完される、ハニポットは隠されているフォームフィールドです。 や のようなスタイルでフィールドを追加します。 サーバーでは、ハニポットが空でない投稿を拒否します。

<input type="text" name="website" style="display:none" autocomplete="off">

時間ベースの検証

ボットは、読み返しに数秒かかるミリ秒単位でフォームを送信できます。フォーム生成時間を JavaScript で記録します()。送信とともに送信します。サーバーでは、合理的なしき値よりも早く到着する投稿を拒否します(例:単純なフォームの場合は2秒、5秒)。

const FORM_GENERATED = Date.now();
// On submit:
const submissionTime = Date.now() - FORM_GENERATED;
// Include in form data and validate server-side

サーバー側検証必須

[]クライアント側検証だけでは信頼できます。[ 常に、サーバー上でCAPTCHAの応答を検証します。 チャレンジクライアント側を生成した場合は、チャレンジパラメータ(例、数字、演算子)をサーバーに送信し、期待する答えを再入力する必要があります。 より良いまだ、サーバー上のチャレンジを生成し、クライアントに送信し、応答サーバー側を検証します。 これは、悪意のあるユーザーを、常にCAPHAを渡すことを防止します。

math CAPTCHA のサーバー側フローの例:

  1. サーバは2つのランダムな数字と演算子を生成し、セッションで期待される答えを保存します(またはそれを暗号化します)。
  2. クライアントに質問を送信します。
  3. 回答を提出する
  4. サーバは保存された回答を受け取り、比較します。マッチ、プロセスフォームの場合。

外部サービスでCAPTCHAを実装

生産拠点では、機械学習ベースの画像認識を含む自動攻撃に対する堅牢な保護を提供する、十分に確立されたCAPTCHAサービスを使用して検討してください。 2つの一般的な選択肢は]Google reCAPTCHAと]]hCaptcha[]です。 彼らは両方の無料のティアとJavaScriptライブラリを介して簡単に統合を提供します。

reCAPTCHA v3 の例:[

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
 document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 grecaptcha.ready(() => {
 grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then((token) => {
 // Append token to form and submit
 document.getElementById('recaptchaToken').value = token;
 document.getElementById('contactForm').submit();
 });
 });
 });
</script>

これらのサービスは、ボット検出、適応的課題、およびアクセシビリティのあらゆる重荷を運ぶ。 彼らはまた、トラフィックを監視し、しきい値を調整するためのダッシュボードを提供します。 しかし、彼らは、サービスのサーバーへのインターネット接続を必要とし、プライバシーの懸念(特にreCAPTCHAのクッキーの使用)を上げる可能性があります。 取引オフがあなたの聴衆のために受け入れられているかどうかを評価します。

実用統合ガイドについては、【】Google reCAPTCHA 開発者向けドキュメント[を参照してください。

CAPTCHAインテグレーションのベストプラクティス

  • []アクセシビリティ:]] CAPTCHAの代替品が障害のあるユーザーのために利用可能であることを確認します。 画面リーダーによって処理できるオーディオの課題やテキストベースの質問は、WCAGガイドラインに準拠するために不可欠です。
  • []攻撃的強化:[]]は、単純なHTMLフォームで始まり、CAPTCHAのJavaScriptを追加します。 JavaScriptが無効になっている場合は、サーバー生成された画像CAPTCHAまたは隠しフィールドを介して送信された簡単な数学クエリに戻ってきます。
  • レートリミット:]] 。 CAPTCHA とさえも、サーバーに制限レートを適用します(例えば、IP アドレスあたりの投稿を1時間あたりの上限)。 これは、決定された攻撃者が CAPTCHA を手動で破ることを防ぎます。
  • [] ログと監視:] ログ CAPTCHA 障害と異常な投稿パターン。 このデータは、微調整し、新しい攻撃ベクトルを識別するのに役立ちます。
  • [] JavaScript を Obfuscate:[ CAPTCHA ロジックを縮小して、チャレンジ生成を理解するためにボットが難しくなるようにします。 防腐性がないので、リバースエンジニアリングに必要な努力を上げます。
  • [Combine 複数のテクニック:[ レイヤーされたアプローチを使用します。 蜜蜂のポット、時間チェック、スライダー、およびサーバー側の両面チェックが一体化することで、任意の単一方法よりもはるかに優れた保護を提供します。

コンテンツ

JavaScript で CAPTCHA を実装することで、インタラクティブで使いやすいアンチスパム対策を柔軟に作成できます。シンプルな数学のパズルからスライダの課題まで、サーバー側の検証、ハニポット、タイムベースのチェックと組み合わせると、これらの技術は、多くの自動攻撃を抑制できます。高トラフィックや機密フォームでは、ボット検出の継続的な改善に寄与するために、reCAPTCHA や hCaptcha などの専門サービスを統合することを検討してください。

セキュリティは、CAPTCHAメソッドが改善するので、ボットをします。定期的に実装を見直し、脅威パターンを監視し、防御力を適切に更新してください。積極的な多層アプローチを取ることで、ユーザーの体験を犠牲にすることなく、フォームをスパムフリーに保つことができます。