將Turnstile與Cloudflare WAF集成以質(zhì)詢fetch請求

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

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

質(zhì)詢Cloudflare WAF中的fetch請求

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

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

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

這就是Turnstile可以提供幫助的地方。Turnstile允許互聯(lián)網(wǎng)上的任何人在其網(wǎng)站上的任何位置嵌入Cloudflare質(zhì)詢。在此之前，Turnstile的輸出只是一次性使用的令牌。為了使客戶能夠?qū)@些fetch請求發(fā)出質(zhì)詢，Turnstile現(xiàn)在可以為其嵌入的域發(fā)出一個clearance cookie。客戶可以在fetch請求之前在HTML頁面中發(fā)出質(zhì)詢，預(yù)先允許訪問者與支付API進(jìn)行交互。

Turnstile Pre-Clearance模式

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

1.改善用戶體驗：當(dāng)訪問者輸入付款信息時，Turnstile的內(nèi)嵌質(zhì)詢可在后臺運行。

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

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

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

實施具Pre-Clearance功能的Turnstile

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

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

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

現(xiàn)在，我們假設(shè)我們設(shè)置了一個Cloudflare WAF規(guī)則，通過托管質(zhì)詢來保護(hù)/your-api端點。

由于這條規(guī)則，我們剛剛編寫的應(yīng)用程序?qū)⒁蚯懊婷枋龅脑蚨。g覽器期望JSON響應(yīng)，但收到HTML形式的質(zhì)詢頁面）。

如果我們檢查“網(wǎng)絡(luò)”選項卡，我們可以看到對/your-api的請求已得到403響應(yīng)。

經(jīng)檢查，Cf-Mitiated標(biāo)頭顯示該響應(yīng)受到Cloudflare防火墻的質(zhì)詢，因為訪問者之前尚未解決質(zhì)詢。

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

在我們的應(yīng)用程序中，一旦收到Cf-Mitiated響應(yīng)，我們就會重寫fetch（）函數(shù)來調(diào)用Turnstile。

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

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

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

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