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

今日、CAPTCHAはWebサイトのセキュリティに不可欠な部分です。何百万もの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サイトに統合することをサポートする理由は他にもたくさんあります。次のコードでこれを行うことができます。

HTMLCAPTCHAコード

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

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="center">
<h1 id="captchaHeading">Captcha Validator Using HTML, CSS and JavaScript</h1>
<div id="captchaBackground">
<span id="captcha">captcha text</span>
<input id="textBox" type="text" name="text">
<div id="buttons">
<input id="submitButton" type="submit">
<button id="refreshButton" type="submit">Refresh</button>
</div>
<span id="output"></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

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

  • <h1 id = "captchaHeading"> <h1> :この要素は、CAPTCHAフォームの見出しを表示するために使用されます。
  • <span id = "captcha"> </ span> :この要素は、CAPTCHAテキストを表示するために使用されます。
  • <input id = "textBox" type = "text" name = "text"> -この要素は、CAPTCHAを入力するための入力ボックスを作成するために使用されます。
  • <input id = "submitButton" type = "submit"> :このボタンはフォームを送信し、CAPTCHAと入力されたテキストが同じかどうかを確認します。
  • <button id = "refreshButton" type = "submit"> </ button> :このボタンは、CAPTCHAを更新するために使用されます。
  • <span id = "output"> </ span> :この要素は、入力されたテキストに従って出力を表示するために使用されます。
  • <div class = "center"> </ div> :これは他のすべての要素を含む親要素です。

CSSおよびJavaScriptファイルは、 <link rel = "stylesheet" type = "text / css" href = "styles.css">および<scriptsrc = "script.js"> </ script>要素を介してこのHTMLページにリンクされています。それぞれ。リンクタグをheadタグ内に追加し、 scriptタグを本文の最後に追加する必要があります。

このコードを既存の形式の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: 200px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
margin-bottom: 1em;
font-size: 30px;
letter-spacing: 3px;
color: #08e5ff;
}
.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 box-shadowプロパティを使用して、フォームコンテナにエレガントな外観を与えることもできます

JavaScriptCAPTCHAコード

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

 // document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
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)]);
}
captchaText.innerHTML = emptyArr.join('');

// 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 === captchaText.innerHTML) {
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 === captchaText.innerHTML) {
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)]);
}
captchaText.innerHTML = refreshArr.join('');
output.innerHTML = "";
});

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

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

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

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

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

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