將Turnstile與Cloudflare WAF集成以質(zhì)詢(xún)fetch請(qǐng)求

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

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

質(zhì)詢(xún)Cloudflare WAF中的fetch請(qǐng)求

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

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

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

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

Turnstile Pre-Clearance模式

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

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

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

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

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

實(shí)施具Pre-Clearance功能的Turnstile

讓我們通過(guò)一個(gè)基本的實(shí)施來(lái)具體說(shuō)明這一點(diǎn)。在開(kāi)始之前，我們?cè)O(shè)置了一個(gè)簡(jiǎn)單的演示應(yīng)用程序，在/your-api端點(diǎn)上模擬前端與后端通信。

為此，我們編寫(xiě)了以下代碼：

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

現(xiàn)在，我們假設(shè)我們?cè)O(shè)置了一個(gè)Cloudflare WAF規(guī)則，通過(guò)托管質(zhì)詢(xún)來(lái)保護(hù)/your-api端點(diǎn)。

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

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

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

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

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

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

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

所有Cloudflare客戶(hù)均可使用Pre-Clearance

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