フォームを保護する

このチュートリアルでは、Cloudflare Turnstile を組み込み、ログイン、サインアップ、お問い合わせなどのウェブフォームを保護します。クライアント側に Turnstile ウィジェットを実装し、サーバー側では Siteverify API で Turnstile トークンを検証します。

始める前に

Cloudflare アカウントが必要です。
保護したいフォームがあるウェブアプリケーションが必要です。
HTML と、Node.js や Python など、使うサーバー側言語の基本知識が必要です。

Turnstile のサイトキーとシークレットキーを取得する

Cloudflare ダッシュボードで、Turnstile ページを開きます。 Turnstile を開く ↗
新しい Turnstile ウィジェットを作成します。
次の手順で使うため、サイトキーとシークレットキーをコピーします。

HTML フォームに Turnstile ウィジェットを追加する

フォームに Turnstile ウィジェットを追加します。
<YOUR-SITE-KEY> を Cloudflare のサイトキーに置き換えます。
Turnstile ウィジェットの div に data-callback 属性を追加します。チャレンジが成功すると、この JavaScript 関数が呼ばれます。
送信ボタンは最初は無効にしておきます。

例html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Contact Form</title>
		<script
			src="https://challenges.cloudflare.com/turnstile/v0/api.js"
			async
			defer
		></script>
		<script>
			function enableSubmit() {
				document.getElementById("submit-button").disabled = false;
			}
		</script>
	</head>
	<body>
		<form id="contact-form" action="/submit" method="POST">
			<input type="text" name="name" placeholder="Name" required />
			<input type="email" name="email" placeholder="Email" required />
			<textarea name="message" placeholder="Message" required></textarea>

			<!-- Turnstile widget -->
			<div
				class="cf-turnstile"
				data-sitekey="<YOUR-SITE-KEY>"
				data-callback="enableSubmit"
			></div>

			<button type="submit" id="submit-button" disabled>Submit</button>
		</form>
	</body>
</html>

サーバー側で Turnstile トークンを検証する

クライアント側から送られた Turnstile トークンを検証する必要があります。以下は Node.js の例です。

Node.js の例js

const express = require("express");
const axios = require("axios");
const bodyParser = require("body-parser");
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.post("/submit", async (req, res) => {
	const turnstileToken = req.body["cf-turnstile-response"];
	const secretKey = "your-secret-key";

	try {
		const response = await axios.post(
			"https://challenges.cloudflare.com/turnstile/v0/siteverify",
			null,
			{
				params: {
					secret: secretKey,
					response: turnstileToken,
				},
			},
		);

		if (response.data.success) {
			// Token is valid, proceed with form submission
			const name = req.body.name;
			const email = req.body.email;
			const message = req.body.message;
			// Your form processing logic here
			res.send("Form submission successful");
		} else {
			res.status(400).send("Turnstile verification failed");
		}
	} catch (error) {
		res.status(500).send("Error verifying Turnstile token");
	}
});

app.listen(3000, () => {
	console.log("Server is running on port 3000");
});

注意点

Turnstile トークンの検証は、正しく扱うことが重要です。このセクションでは、押さえておくべきポイントを説明します。

フォーム入力後にトークンを検証する

ユーザーがフォームに入力し、送信を選択したあとで、Turnstile トークンを検証してください。
ユーザーがデータを入力する前にトークンを検証すると、攻撃者は有効なトークンを取得したあとでフォーム送信を操作し、保護を回避できる可能性があります。

正しい処理の流れ

ユーザーがフォームを送信したら、フォームデータと Turnstile トークンの両方をサーバーへ送ります。
サーバー側では、先に Turnstile トークンを検証します。
検証レスポンスに応じて、フォームデータを処理するかどうかを決めます。