Turnstile
證明訪客是真人 —— 而且通常不用他們點任何東西。
Turnstile 是什麼?
Turnstile 是 Cloudflare 免費的 CAPTCHA 替代品。CAPTCHA 就是那種「選出所有紅綠燈」的測驗。Turnstile 用來確認訪客是真人,而且通常不用他們解任何題目。
它不用拼圖,而是在背景跑一些小小的隱形 JavaScript 檢查,收集瀏覽器的訊號。靠這些訊號判斷訪客可不可信,只有在情況可疑時才會跳出一個簡單的勾選框。
把它想成…
一扇會默默感應到真人走近就自動開啟的門 —— 對比舊式閘門,每個人都得停下來、笨拙地塞代幣才能過。
為什麼用它?
更好的體驗
沒有令人抓狂的圖片九宮格。多數使用者什麼都不用做就過關了。
隱私優先
不像某些靠廣告賺錢的 CAPTCHA,它不會跨網站追蹤使用者,也不會蒐集資料拿去賣。
擋住機器人
擋下灌爆的假註冊、垃圾留言,以及自動化的表單濫用。
無障礙
符合 WCAG 2.2 AA 無障礙標準,身障使用者也能順利使用。
怎麼加上去?
Turnstile 分兩部分:頁面上的小工具(前端 client side)和伺服器上的驗證檢查(後端 server side)。兩邊都一定要做 —— 絕對不能只信前端。
建立一個 widget
在 Cloudflare 儀表板進入 Turnstile → Add widget。輸入你的網域並挑一種 widget 類型。你會拿到兩把金鑰:Sitekey(公開,放在頁面上)和 Secret key(私密,放在你的伺服器)。
把 widget 嵌進頁面
在 <head> 加入 Turnstile 的 script,再把一個 class 為 cf-turnstile、帶上你 sitekey 的 div 放進表單裡。通過驗證後,它會自動產生一個名叫 cf-turnstile-response 的隱藏欄位。
<head> <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> </head> <body> <form action="/submit" method="POST"> <input type="email" name="email" placeholder="Email" required /> <!-- Replace YOUR_SITEKEY with your real sitekey --> <div class="cf-turnstile" data-sitekey="YOUR_SITEKEY" data-theme="auto"></div> <button type="submit">Sign up</button> </form> </body>在伺服器端驗證權杖
表單送出後,把 cf-turnstile-response 這個權杖(token)連同你的 Secret key 一起送到 Cloudflare 的 Siteverify API。只有當回應的 success 為 true 時才接受這筆表單。
// Node.js / server-side const token = formData.get('cf-turnstile-response'); const res = await fetch( 'https://challenges.cloudflare.com/turnstile/v0/siteverify', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ secret: process.env.TURNSTILE_SECRET_KEY, // never hardcode! response: token, }), } ); const data = await res.json(); if (!data.success) { return new Response('Failed the human check', { status: 403 }); } // data.success === true -> continue processing the form
本機開發用的測試金鑰
開發時用 sitekey 1x00000000000000000000AA(永遠通過)搭配 secret 1x0000000000000000000000000000000AA,就不會觸發真正的驗證。上線前記得換回你真正的金鑰。
重點概念
Sitekey(網站金鑰)
放在頁面上的公開金鑰,放進 HTML 沒問題。
Secret key(密鑰)
只在伺服器端用來驗證權杖的私密金鑰。一定要保密!
Token(權杖)
訪客通過後 widget 發的一次性通行證。有效 300 秒,只能用一次。
Siteverify(驗證 API)
你伺服器呼叫的 Cloudflare API,用來確認權杖是真的。
Managed(智慧型)widget
預設模式 —— 依風險自行決定要不要跳出勾選框。
Invisible(隱形)widget
完全在背景運作,畫面上看不到任何元件。
小提示與計費
一定要在伺服器端驗證
聰明的機器人可以偽造前端 widget。真正保護你的是伺服器上的 Siteverify 檢查 —— 千萬別省略。
- Turnstile 免費且驗證次數無上限,連 Free 方案也是。
- 不需要把整個網站都接過 Cloudflare 代理 —— 任何網站都能用。
- 權杖 300 秒後失效,且只能驗證一次,所以要儘快驗證。
- 用 data- 屬性挑 widget 尺寸(normal、flexible、compact)與主題(auto/light/dark)。