sell安全
verified_user

Turnstile

證明訪客是真人 —— 而且通常不用他們點任何東西。

Free無限次請求
No puzzles隱形驗證
300s權杖有效時間
lightbulb

Turnstile 是什麼?

Turnstile 是 Cloudflare 免費的 CAPTCHA 替代品。CAPTCHA 就是那種「選出所有紅綠燈」的測驗。Turnstile 用來確認訪客是真人,而且通常不用他們解任何題目。

它不用拼圖,而是在背景跑一些小小的隱形 JavaScript 檢查,收集瀏覽器的訊號。靠這些訊號判斷訪客可不可信,只有在情況可疑時才會跳出一個簡單的勾選框。

sensor_occupied

把它想成…

一扇會默默感應到真人走近就自動開啟的門 —— 對比舊式閘門,每個人都得停下來、笨拙地塞代幣才能過。

help

為什麼用它?

sentiment_satisfied

更好的體驗

沒有令人抓狂的圖片九宮格。多數使用者什麼都不用做就過關了。

lock_person

隱私優先

不像某些靠廣告賺錢的 CAPTCHA,它不會跨網站追蹤使用者,也不會蒐集資料拿去賣。

smart_toy

擋住機器人

擋下灌爆的假註冊、垃圾留言,以及自動化的表單濫用。

accessibility_new

無障礙

符合 WCAG 2.2 AA 無障礙標準,身障使用者也能順利使用。

rocket_launch

怎麼加上去?

Turnstile 分兩部分:頁面上的小工具(前端 client side)和伺服器上的驗證檢查(後端 server side)。兩邊都一定要做 —— 絕對不能只信前端。

  1. 建立一個 widget

    在 Cloudflare 儀表板進入 Turnstile → Add widget。輸入你的網域並挑一種 widget 類型。你會拿到兩把金鑰:Sitekey(公開,放在頁面上)和 Secret key(私密,放在你的伺服器)。

  2. 把 widget 嵌進頁面

    在 <head> 加入 Turnstile 的 script,再把一個 class 為 cf-turnstile、帶上你 sitekey 的 div 放進表單裡。通過驗證後,它會自動產生一個名叫 cf-turnstile-response 的隱藏欄位。

    html
    <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>
  3. 在伺服器端驗證權杖

    表單送出後,把 cf-turnstile-response 這個權杖(token)連同你的 Secret key 一起送到 Cloudflare 的 Siteverify API。只有當回應的 success 為 true 時才接受這筆表單。

    js
    // 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
science

本機開發用的測試金鑰

開發時用 sitekey 1x00000000000000000000AA(永遠通過)搭配 secret 1x0000000000000000000000000000000AA,就不會觸發真正的驗證。上線前記得換回你真正的金鑰。

school

重點概念

vpn_key

Sitekey(網站金鑰)

放在頁面上的公開金鑰,放進 HTML 沒問題。

password

Secret key(密鑰)

只在伺服器端用來驗證權杖的私密金鑰。一定要保密!

toll

Token(權杖)

訪客通過後 widget 發的一次性通行證。有效 300 秒,只能用一次。

check_circle

Siteverify(驗證 API)

你伺服器呼叫的 Cloudflare API,用來確認權杖是真的。

visibility

Managed(智慧型)widget

預設模式 —— 依風險自行決定要不要跳出勾選框。

visibility_off

Invisible(隱形)widget

完全在背景運作,畫面上看不到任何元件。

tips_and_updates

小提示與計費

shield

一定要在伺服器端驗證

聰明的機器人可以偽造前端 widget。真正保護你的是伺服器上的 Siteverify 檢查 —— 千萬別省略。

  • Turnstile 免費且驗證次數無上限,連 Free 方案也是。
  • 不需要把整個網站都接過 Cloudflare 代理 —— 任何網站都能用。
  • 權杖 300 秒後失效,且只能驗證一次,所以要儘快驗證。
  • 用 data- 屬性挑 widget 尺寸(normal、flexible、compact)與主題(auto/light/dark)。