HTML、CSS、JavaScriptを使用してCAPTCHA検証フォームを作成する

今日、CAPTCHAはウェブサイトのセキュリティの不可欠な部分です。何百万ものCAPTCHAテストが毎日オンラインで完了しています。

WebサイトにCAPTCHA検証を実装していない場合、スパマーのターゲットとして設定されて、大きな問題が発生する可能性があります。

ここでは、CAPTCHAについて知っておく必要のあるすべてのことと、HTML、CSS、およびJavaScriptを使用してCAPTCHAをWebサイトに簡単に実装する方法について説明します。

CAPTCHAとは何ですか？

CAPTCHAは、「コンピューターと人間を区別するための完全に自動化されたパブリックチューリングテスト」の略です。この用語は、2003年にルイス・フォン・アン、マヌエル・ブラム、ニコラス・J・ホッパー、ジョン・ラングフォードによって造られました。これは、ユーザーが人間であるかどうかを判断するために使用されるチャレンジ/レスポンステストの一種です。

CAPTCHAは、ボットが実行するのは難しいが、人間にとっては比較的簡単な課題を提供することにより、Webサイトにセキュリティを追加します。たとえば、複数の画像のセットから車のすべての画像を識別することは、ボットにとっては困難ですが、人間の目には十分に単純です。

CAPTCHAのアイデアは、チューリングテストに端を発しています。チューリングテストは、機械が人間のように考えることができるかどうかをテストする方法です。興味深いことに、CAPTCHAテストは「逆チューリングテスト」と呼ぶことができます。この場合、コンピューターが人間に挑戦するテストを作成するからです。

なぜあなたのウェブサイトはCAPTCHA検証を必要としますか？

CAPTCHAは主に、ボットがスパムやその他の有害なコンテンツを含むフォームを自動的に送信するのを防ぐために使用されます。グーグルのような会社でさえ、システムがスパム攻撃を受けるのを防ぐためにそれを使用しています。あなたのウェブサイトがCAPTCHA検証の恩恵を受ける理由のいくつかは次のとおりです。

CAPTCHAは、偽のアカウントを作成することにより、ハッカーやボットが登録システムにスパムを送信するのを防ぐのに役立ちます。それらが阻止されない場合、彼らはそれらのアカウントを悪意のある目的に使用する可能性があります。
CAPTCHAは、ハッカーが何千ものパスワードを使用してログインを試みるために使用するWebサイトからのブルートフォースログイン攻撃を禁止できます。
CAPTCHAは、誤ったコメントを提供することにより、ボットがレビューセクションをスパムするのを制限できます。
CAPTCHAは、再販のために多数のチケットを購入する人がいるため、チケットのインフレを防ぐのに役立ちます。 CAPTCHAは、無料イベントへの誤った登録を防ぐこともできます。
CAPTCHAは、サイバー犯罪者が危険なコメントや有害なWebサイトへのリンクを含むブログをスパムすることを制限できます。

CAPTCHA検証をWebサイトに統合することをサポートする理由は他にもたくさんあります。次のコードでこれを行うことができます。

Windows10で古いゲームをプレイする方法

HTMLCAPTCHAコード

HTML（HyperText Markup Language）は、Webページの構造を記述します。次のHTMLコードを使用して、CAPTCHA検証フォームを構成します。

  
  
  
  
  
  
  
  
  
 captcha text  
  
  
  
 Refresh

このコードは主に7つの要素で構成されています。

：この要素は、CAPTCHAフォームの見出しを表示するために使用されます。
：この要素は、CAPTCHAテキストを表示するために使用されます。
-この要素は、CAPTCHAを入力するための入力ボックスを作成するために使用されます。
：このボタンはフォームを送信し、CAPTCHAと入力されたテキストが同じかどうかを確認します。
：このボタンは、CAPTCHAを更新するために使用されます。
：この要素は、入力されたテキストに従って出力を表示するために使用されます。
：これは、他のすべての要素を含む親要素です。

CSSファイルとJavaScriptファイルは、を介してこのHTMLページにリンクされています。とそれぞれ要素。追加する必要があります リンク 内部のタグ頭タグと脚本の最後にあるタグ体。

このコードを既存の形式のWebサイトと統合することもできます。

関連している： HTML Essentialsチートシート：タグ、属性など

CSSCAPTCHAコード

CSS（Cascading Style Sheets）は、HTML要素のスタイルを設定するために使用されます。次のCSSコードを使用して、上記のHTML要素のスタイルを設定します。

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');  
body {  
 background-color: #232331;  
 font-family: 'Roboto', sans-serif;  
}  
#captchaBackground {  
 height: 220px;  
 width: 250px;  
 background-color: #2d3748;  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 flex-direction: column;  
}  
#captchaHeading {  
 color: white;  
}  
#captcha {  
 height: 80%;  
 width: 80%;  
 font-size: 30px;  
 letter-spacing: 3px;  
 margin: auto;  
 display: block;  
 top: 0;  
 bottom: 0;  
 left: 0;  
 right: 0;  
}  
.center {  
 display: flex;  
 flex-direction: column;  
 align-items: center;  
}  
#submitButton {  
 margin-top: 2em;  
 margin-bottom: 2em;  
 background-color: #08e5ff;  
 border: 0px;  
 font-weight: bold;  
}  
#refreshButton {  
 background-color: #08e5ff;  
 border: 0px;  
 font-weight: bold;  
}  
#textBox {  
 height: 25px;  
}  
.incorrectCaptcha {  
 color: #FF0000;  
}  
.correctCaptcha {  
 color: #7FFF00;  
}

好みに応じて、このコードにCSSプロパティを追加または削除します。また、フォームコンテナを使用してエレガントな外観を与えることもできます。 CSSボックスシャドウプロパティ。

JavaScriptCAPTCHAコード

JavaScript 静的なWebページに機能を追加するために使用されます。次のコードを使用して、CAPTCHA検証フォームに完全な機能を追加します。

// document.querySelector() is used to select an element from the document using its ID  
let captchaText = document.querySelector('#captcha');  
var ctx = captchaText.getContext('2d');  
ctx.font = '30px Roboto';  
ctx.fillStyle = '#08e5ff';  
  
let userText = document.querySelector('#textBox');  
let submitButton = document.querySelector('#submitButton');  
let output = document.querySelector('#output');  
let refreshButton = document.querySelector('#refreshButton');  
  
// alphaNums contains the characters with which you want to create the CAPTCHA  
let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];  
let emptyArr = [];  
// This loop generates a random string of 7 characters using alphaNums  
// Further this string is displayed as a CAPTCHA  
for (let i = 1; i <= 7; i++) {  
 emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);  
}  
var c = emptyArr.join('');  
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);  
  
// This event listener is stimulated whenever the user press the 'Enter' button  
// 'Correct!' or 'Incorrect, please try again' message is  
// displayed after validating the input text with CAPTCHA  
userText.addEventListener('keyup', function(e) {  
 // Key Code Value of 'Enter' Button is 13  
 if (e.keyCode === 13) {  
 if (userText.value === c) {  
 output.classList.add('correctCaptcha');  
 output.innerHTML = 'Correct!';  
 } else {  
 output.classList.add('incorrectCaptcha');  
 output.innerHTML = 'Incorrect, please try again';  
 }  
 }  
});  
// This event listener is stimulated whenever the user clicks the 'Submit' button  
// 'Correct!' or 'Incorrect, please try again' message is  
// displayed after validating the input text with CAPTCHA  
submitButton.addEventListener('click', function() {  
 if (userText.value === c) {  
 output.classList.add('correctCaptcha');  
 output.innerHTML = 'Correct!';  
 } else {  
 output.classList.add('incorrectCaptcha');  
 output.innerHTML = 'Incorrect, please try again';  
 }  
});  
// This event listener is stimulated whenever the user press the 'Refresh' button  
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button  
refreshButton.addEventListener('click', function() {  
 userText.value = '';  
 let refreshArr = [];  
 for (let j = 1; j <= 7; j++) {  
 refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);  
 }  
 ctx.clearRect(0, 0, captchaText.width, captchaText.height);  
 c = refreshArr.join('');  
 ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);  
 output.innerHTML = '';  
});

これで、完全に機能するCAPTCHA検証フォームができました。完全なコードを確認したい場合は、クローンを作成できます。このCAPTCHAのGitHubリポジトリ-バリデータープロジェクト。リポジトリのクローンを作成した後、HTMLファイルを実行すると、次の出力が得られます。

電話でのデフォルトの意味

入力ボックスに正しいCAPTCHAコードを入力すると、次の出力が表示されます。

入力ボックスに間違ったCAPTCHAコードを入力すると、次の出力が表示されます。

CAPTCHAでウェブサイトを安全にする

これまで、多くの組織や企業は、WebサイトにCAPTCHAフォームがないために、データ侵害やスパム攻撃などの大きな損失を被っています。 CAPTCHAをWebサイトに追加することを強くお勧めします。これは、Webサイトがサイバー犯罪者になるのを防ぐためのセキュリティレイヤーを追加するためです。

Googleはまた、スパムや悪用からWebサイトを保護するのに役立つ「reCAPTCHA」と呼ばれる無料サービスを開始しました。 CAPTCHAとreCAPTCHAは似ているように見えますが、まったく同じではありません。 CAPTCHAは、多くのユーザーにとってイライラし、理解するのが難しいと感じることがあります。しかし、なぜそれらが困難にされるのかについては重要な理由があります。

共有共有つぶやき Eメール CAPTCHAはどのように機能し、なぜそれほど難しいのですか？

CAPTCHAとreCAPTCHAはスパムを防ぎます。それらはどのように機能しますか？そして、なぜCAPTCHAを解決するのがとても難しいと思いますか？

次を読む 関連トピック

プログラミング
HTML
JavaScript
CSS

著者について ユブラジチャンドラ（60件の記事が公開されました）

Yuvrajは、インドのデリー大学のコンピュータサイエンス学部生です。彼はフルスタックWeb開発に情熱を注いでいます。執筆していないときは、さまざまなテクノロジーの深さを探っています。

YuvrajChandraのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください