https://xinqilin.github.io/post/security/ Recent content in Security on Bill.Lin's Notes Hugo zh-tw Tue, 28 Apr 2026 00:00:00 +0800 https://xinqilin.github.io/post/security/cloudflare-turnstile-vue-spring-boot/ Tue, 28 Apr 2026 00:00:00 +0800 https://xinqilin.github.io/post/security/cloudflare-turnstile-vue-spring-boot/ <h2 id="為什麼選-turnstile">為什麼選 Turnstile</h2> <table> <thead> <tr> <th>方案</th> <th>價格</th> <th>使用者體驗</th> <th>隱私</th> </tr> </thead> <tbody> <tr> <td>Cloudflare Turnstile</td> <td>免費（無流量上限）</td> <td>多數情況完全無感</td> <td>不依賴 Google，不發 tracking cookie</td> </tr> <tr> <td>reCAPTCHA v3</td> <td>免費（有配額）</td> <td>無感，但 score 閾值需自行調</td> <td>Google 蒐集使用者行為</td> </tr> <tr> <td>hCaptcha</td> <td>有免費層</td> <td>可能出現拼圖互動</td> <td>較注重隱私，非 Google</td> </tr> </tbody> </table> <p>Turnstile 使用 JavaScript challenge + machine learning 評估訪客，大多數真實使用者不需要任何互動即可通過。sitekey 不需要 Cloudflare 付費計畫。</p> <hr> <h2 id="運作原理與雙端流程">運作原理與雙端流程</h2> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span><span class="lnt">12 </span><span class="lnt">13 </span><span class="lnt">14 </span><span class="lnt">15 </span><span class="lnt">16 </span><span class="lnt">17 </span><span class="lnt">18 </span><span class="lnt">19 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">Vue SPA Cloudflare CDN Spring Boot 後端 </span></span><span class="line"><span class="cl"> │ │ │ </span></span><span class="line"><span class="cl"> │ 1. 動態載入 api.js │ │ </span></span><span class="line"><span class="cl"> │─────────────────────────▶│ │ </span></span><span class="line"><span class="cl"> │ │ │ </span></span><span class="line"><span class="cl"> │ 2. widget 完成挑戰，回傳 token │ </span></span><span class="line"><span class="cl"> │◀─────────────────────────│ │ </span></span><span class="line"><span class="cl"> │ │ </span></span><span class="line"><span class="cl"> │ 3. POST /api/contact（含 cf-turnstile-response） │ </span></span><span class="line"><span class="cl"> │───────────────────────────────────────────────────▶│ </span></span><span class="line"><span class="cl"> │ │ </span></span><span class="line"><span class="cl"> │ 4. POST siteverify（帶 secret） │ </span></span><span class="line"><span class="cl"> │ ◀─────────────────────── │ </span></span><span class="line"><span class="cl"> │ │ │ </span></span><span class="line"><span class="cl"> │ 5. {&#34;success&#34;: true} │ </span></span><span class="line"><span class="cl"> │ ──────────────────────── ▶│ </span></span><span class="line"><span class="cl"> │ │ </span></span><span class="line"><span class="cl"> │ 6. 200 OK │ </span></span><span class="line"><span class="cl"> │◀───────────────────────────────────────────────────│ </span></span></code></pre></td></tr></table> </div> </div><p>三個核心事實：</p>