WordPress 管理画面のログイン制限とは?
#WordPress #コーディング #ディレクション
2024.11.30
ウェブサイトのメールフォームがスパムボットによって不正利用されるのを防ぐためには、適切な対策が必要です。この記事では、無料かつ効果的なスパム対策ツール「hCaptcha」を導入する方法を詳しく解説します。
hCaptchaは、Google reCAPTCHAの代替となるセキュリティツールです。hCaptchaを使用することで、ボットによるフォーム送信を防ぎつつ、ユーザーエクスペリエンスを維持できます。また、プライバシーに配慮して設計されているため、ユーザーデータの取り扱いに敏感な場合にも安心して利用できます。
hCaptchaの利点は、Googleが利用できない地域(中国本土)などでも同様に利用できる点です。
フォームに以下のコードを追加します:
<form action="submit_form.php" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<!-- hCaptchaウィジェット -->
<div class="h-captcha" data-sitekey="あなたのサイトキー"></div>
<button type="submit">送信</button>
</form>
<!-- hCaptchaスクリプト -->
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
ここで、data-sitekey
には取得した「サイトキー」を設定します。
フォーム送信をフロントエンド(クライアント側)で制御する場合、JavaScriptでhCaptchaのトークンが正しく生成されたかどうかを確認します。この方法ではサーバー側のAPI検証が省略されるため、軽いフォーム用途に適していますが、完全なセキュリティは保証されません。
以下のコードで実装できます:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hCaptcha連携フォーム</title>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
<script>
function validateForm(event) {
const hcaptchaResponse = document.querySelector('[name="h-captcha-response"]').value;
if (!hcaptchaResponse) {
event.preventDefault();
alert("hCaptchaを完了してください。");
}
}
</script>
</head>
<body>
<form action="submit_form.php" method="post" onsubmit="validateForm(event)">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
<!-- hCaptchaウィジェット -->
<div class="h-captcha" data-sitekey="あなたのサイトキー"></div>
<button type="submit">送信</button>
</form>
</body>
</html>
onsubmit="validateForm(event)"
で、送信時にhCaptchaトークン(h-captcha-response
)をチェック。event.preventDefault()
を使用して送信を停止し、警告を表示します。注意: フロントエンドだけでのチェックは簡易的な方法です。悪意のあるユーザーがチェックを回避する可能性があるため、セキュリティが重要なフォームではバックエンド側での検証を併用してください。
以下は、PHPを使用してhCaptchaトークンを検証するコードの例です:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$secret_key = 'あなたのシークレットキー';
$hcaptcha_response = $_POST['h-captcha-response'];
$response = file_get_contents(
"https://hcaptcha.com/siteverify?secret=$secret_key&response=$hcaptcha_response"
);
$response_data = json_decode($response);
if ($response_data->success) {
echo "フォーム送信が成功しました!";
} else {
echo "hCaptchaの検証に失敗しました。もう一度お試しください。";
}
}
?>
hCaptchaは簡単に導入でき、スパム対策として非常に効果的です。フロントエンドだけでのチェックも可能ですが、セキュリティを強化するためにはサーバー側での検証を併用することをおすすめします。
どちらの方法でも、hCaptchaを使用することで、ボットからの攻撃を防ぎ、ユーザー体験を維持することができます。