將Turnstile與Cloudflare WAF集成以質詢fetch請求

很高興地與大家分享：我們現已全面推出了Cloudflare Turnstile，為世界各地的網站所有者提供了一種簡單的方法來抵御機器人，而無需發(fā)布驗證碼。Turnstile允許任何網站所有者通過簡單的代碼片段在其網站上嵌入無障礙的Cloudflare質詢，從而輕松幫助確保只有人類流量才能通過。除了保護網站的前端之外，Turnstile還使網絡管理員能夠強化后臺運行的瀏覽器啟動（AJAX）API調用。這些API通常由動態(tài)單頁Web應用程序使用，例如使用React、Angular、Vue.js創(chuàng)建的應用程序。

我們已將Turnstile與Cloudflare Web應用程序防火墻（WAF）集成。這意味著Web管理員可以將Turnstile代碼片段添加到其網站，然后配置Cloudflare WAF來管理這些請求。這可以使用WAF規(guī)則完全自定義；例如，您可以允許經過Turnstile身份驗證的用戶與應用程序的所有API端點進行交互，而無需面臨更多質詢，或者您可以配置某些敏感端點（例如登錄）以始終發(fā)出質詢。

質詢Cloudflare WAF中的fetch請求

受Cloudflare WAF保護的數百萬個網站利用我們的JS質詢、托管質詢和交互式質詢來阻止機器人，同時允許人類通過。對于每一個質詢，Cloudflare都會攔截匹配的請求并使用瀏覽器呈現的HTML頁面進行響應，用戶在其中完成基本任務以證明他們是人類。當用戶成功完成質詢時，他們會收到cf_clearance cookie，該cookie告訴Cloudflare用戶已成功通過質詢、質詢類型以及完成時間。clearance cookie不能在用戶之間共享，并且僅在Cloudflare客戶在其安全設置儀表板中設置的時間內有效。

此過程運作良好，除非瀏覽器收到fetch請求的質詢并且瀏覽器之前未通過質詢。在fetch請求或XML HTTP請求（XHR）中，瀏覽器期望返回簡單文本（JSON或XML格式），并且無法呈現運行質詢所需的HTML。

舉個例子，我們假設一家比薩店老板在React中構建了一個在線訂購表單，其中包含一個支付頁面，該頁面將數據提交到處理支付的API端點。當用戶查看Web表單以添加其信用卡詳細信息時，他們可以通過托管質詢，但當用戶通過發(fā)出fetch請求提交其信用卡詳細信息時，瀏覽器將不會執(zhí)行運行質詢所需的代碼。披薩店老板處理可疑（但可能合法）請求的唯一選擇是阻止這些請求，這存在誤報的風險，可能導致餐廳失去銷售。

這就是Turnstile可以提供幫助的地方。Turnstile允許互聯網上的任何人在其網站上的任何位置嵌入Cloudflare質詢。在此之前，Turnstile的輸出只是一次性使用的令牌。為了使客戶能夠對這些fetch請求發(fā)出質詢，Turnstile現在可以為其嵌入的域發(fā)出一個clearance cookie?？蛻艨梢栽趂etch請求之前在HTML頁面中發(fā)出質詢，預先允許訪問者與支付API進行交互。

Turnstile Pre-Clearance模式

回到我們的披薩店示例，使用Pre-Clearance將Turnstile與Cloudflare WAF集成有三大優(yōu)勢：

1.改善用戶體驗：當訪問者輸入付款信息時，Turnstile的內嵌質詢可在后臺運行。

2.在邊緣阻止更多請求：由于Turnstile現在為其嵌入的域發(fā)出了一個clearance cookie，因此披薩店老板可以使用自定義規(guī)則為支付API的每個請求發(fā)出托管質詢。這可確保嘗試直接針對支付API的自動攻擊在到達API之前就被Cloudflare阻止。

3.（可選）保護操作和用戶的安全：無需更改后端代碼即可獲得Pre-Clearance的好處。然而，進一步的Turnstile集成將提高集成API的安全性。披薩店老板可以調整其付款形式以驗證收到的Turnstile令牌，確保每次付款嘗試均由Turnstile單獨驗證，以保護其付款端點免受會話劫持。

啟用Pre-Clearance的Turnstile小部件仍會發(fā)出Turnstile令牌，這讓客戶可以根據端點的重要性，靈活地決定是需要對每個請求進行安全檢查，還是每個會話僅進行一次安全檢查。Turnstile小部件發(fā)出的clearance cookie會自動應用于Turnstile小部件嵌入的Cloudflare區(qū)域，無需進行配置。令牌的有效許可時間仍受區(qū)域特定“質詢通道”時間控制。

實施具Pre-Clearance功能的Turnstile

讓我們通過一個基本的實施來具體說明這一點。在開始之前，我們設置了一個簡單的演示應用程序，在/your-api端點上模擬前端與后端通信。

為此，我們編寫了以下代碼：

我們創(chuàng)建了一個按鈕。單擊后，Cloudflare會向/your-api端點發(fā)出fetch（）請求，并在響應容器中顯示結果。

現在，我們假設我們設置了一個Cloudflare WAF規(guī)則，通過托管質詢來保護/your-api端點。

由于這條規(guī)則，我們剛剛編寫的應用程序將因前面描述的原因而失敗（瀏覽器期望JSON響應，但收到HTML形式的質詢頁面）。

如果我們檢查“網絡”選項卡，我們可以看到對/your-api的請求已得到403響應。

經檢查，Cf-Mitiated標頭顯示該響應受到Cloudflare防火墻的質詢，因為訪問者之前尚未解決質詢。

為了在我們的應用程序中解決這個問題，我們在Pre-Clearance模式下為我們想要使用的Turnstile站點密鑰設置了一個Turnstile小部件。

在我們的應用程序中，一旦收到Cf-Mitiated響應，我們就會重寫fetch（）函數來調用Turnstile。

上面的代碼段中發(fā)生了很多事情：首先，我們創(chuàng)建了一個隱藏的覆蓋元素，并覆蓋了瀏覽器的fetch（）函數。對fetch（）函數進行了修改，以反省“質詢”的Cf-Mitigated標頭。如果發(fā)出質詢，初始結果將是不成功的；取而代之的是，我們的Web應用程序中將出現Turnstile覆蓋層（已啟用Pre-Clearance）。完成Turnstile質詢后，我們將在Turnstile獲得cf_clearance cookie以通過Cloudflare WAF后重試之前的請求。

解決Turnstile小部件后，覆蓋層消失，并且成功顯示請求的API結果：

所有Cloudflare客戶均可使用Pre-Clearance

每個擁有Free級別或其級別以上計劃的Cloudflare用戶都可以在托管模式下免費使用Turnstile，請求數量不限。如果您是Cloudflare用戶，希望提高關鍵API端點的安全性和用戶體驗，請立即前往我們的儀表板并創(chuàng)建具有Pre-Clearance功能的Turnstile小部件。