Wir geben heute bekannt, dass Turnstile in die Web Application Firewall (WAF) von Cloudflare integriert wurde. Damit können Webadministratoren ab sofort ein Turnstile-Code-Snippet in ihre Website einbinden und dann die Cloudflare-WAF zur Verwaltung dieser Anfragen konfigurieren. Mithilfe von WAF-Regeln lässt dieses Verfahren absolut individuell gestalteten. Sie können beispielsweise einem von Turnstile authentifizierten Nutzer erlauben, ohne weitere Challenges mit allen API-Endpunkten einer Applikation zu interagieren. Es ist auch möglich, bestimmte sensible Endpunkte wie den Login-Bereich so zu konfigurieren, dass dafür immer eine Challenge angezeigt wird.
\n
\n
Fetch Requests kommen in der Cloudflare-WAF auf den Prüfstand
Millionen von Websites, die durch die Cloudflare-WAF geschützt werden, nutzen die von uns angebotenen Lösungen JS Challenge, Managed Challenge und Interactive Challenge, um Bot-generierten Traffic aus dem Datenverkehr herauszufiltern. Bei jeder dieser Challenge-Kategorien fängt Cloudflare die entsprechende Anfrage ab und antwortet mit einer vom Browser gerenderten HTML-Seite. Auf dieser wird dem Nutzer eine einfache Aufgabe (die Challenge) gestellt. Löst er diese korrekt, weist er damit nach, dass er ein Mensch ist. Er erhält dann ein cf_clearance-Cookie. Dieses verrät Cloudflare, dass ein Nutzer eine Challenge gemeistert hat, um welche Art von Challenge es sich gehandelt hat und wann sie abgeschlossen wurde. Ein solches Freigabe-Cookie kann nicht zwischen Nutzern ausgetauscht werden und ist nur für den Zeitraum gültig, den der Cloudflare-Kunde unter „Security Settings“ (Sicherheitseinstellungen) festgelegt hat.
Dieses Verfahren funktioniert gut – es sei denn, ein Browser empfängt eine Challenge für eine Fetch Request und hat zuvor noch keine Challenge bestanden. Bei einer Fetch Request oder XMLhttpRequest (XHR) erwartet der Browser, dass einfacher Text (im JSON- oder XML-Format) zurückgegeben wird. Deshalb ist er nicht in der Lage, den zur Ausführung einer Challenge erforderlichen HTML-Code zu rendern.
Nehmen wir beispielsweise an, die Besitzerin einer Pizzeria hat in React ein Online-Bestellformular mit einer Zahlungsseite erstellt. Von dieser werden Daten an einen API-Endpunkt übermittelt, der Zahlungen verarbeitet. Ruft ein Nutzer das Webformular zur Eingabe seiner Kreditkartendaten auf, muss er eine Managed Challenge bestehen. Übermittelt er seine Kreditkartendaten dagegen per Fetch Request, führt der Browser den für die Durchführung der Challenge erforderlichen Code nicht aus. Der einzig mögliche Umgang der Pizzariabesitzerin mit verdächtigen Anfragen besteht darin, diese zu blockieren. Da davon aber auch legitime Anfragen betroffen sein können, ist ein solches Vorgehen unter Umständen geschäftsschädigend.
Hier kommt nun Turnstile ins Spiel. Denn damit lässt sich eine Cloudflare-Challenge in jedem beliebigen Bereich einer Website einbetten. Bisher war Turnstile nur in der Lage, ein Einmal-Token auszugeben. Um Kunden Challenges für diese Fetch Requests zu ermöglichen, kann Turnstile nun aber ein Freigabe-Cookie für die Domain ausgeben, bei der der Dienst eingebettet ist. Kunden können ihre Challenge auf der HTML-Seite vor einem Fetch Request ausspielen und so eine Vorabfreigabe des Besuchers für die Interaktion mit der Zahlungs-API vornehmen lassen.
Zurück zu unserem Pizzeria-Beispiel: Eine solche Vorabfreigabe für die Integration von Turnstile in die Cloudflare-WAF bietet drei große Vorteile:
Bessere Nutzererfahrung: Die eingebettete Challenge von Turnstile kann im Hintergrund ausgeführt werden, während der Besucher seine Zahlungsdaten eingibt.
Abwehr einer größeren Zahl von Anfragen an der Edge: Turnstile gibt jetzt ein Freigabe-Cookie für die Domain aus, in die der Dienst eingebettet ist. Damit kann unsere Pizzeriabesitzerin mithilfe einer benutzerdefinierten Regel für jede Anfrage an die Zahlungs-API eine Managed Challenge anzeigen lassen. So ist Cloudflare in der Lage, direkt auf die Zahlungs-API abzielende automatisierte Angriffe zu stoppen, bevor sie diese erreichen.
(Optional) Absicherung der Aktion und des Nutzers: Um sich die Vorabfreigabe zunutze zu machen, sind keine Anpassungen am Backend-Quellcode erforderlich. Eine stärkere Integration von Turnstile erhöht aber die Sicherheit der eingebundenen API. Die Pizzeriabesitzerin kann ihr Zahlungsformular so anpassen, dass der erhaltene Turnstile-Token validiert wird. So wird die individuelle Validierung jedes Zahlungsversuchs durch Turnstile sichergestellt, wodurch der Zahlungsendpunkt vor Session Hijacking (Kapern einer Sitzung) geschützt ist.
Ein Turnstile-Widget mit aktivierter Vorabfreigabe (Pre-Clearance) stellt weiterhin Turnstile-Token aus. Deshalb können die Kunden selbst entscheiden, ob ein Endpunkt so wichtig ist, dass jede Anfrage einer gesonderten Sicherheitsüberprüfung unterzogen werden muss. Andernfalls erfolgt diese nur einmal pro Sitzung. Von einem Turnstile-Widget generierte Freigabe-Cookies werden automatisch auf die Cloudflare-Zone angewandt, in die das Turnstile-Widget eingebettet ist – eine Konfiguration ist dafür nicht erforderlich. Die Gültigkeitsdauer des Token wird weiterhin durch die zonenspezifische „Challenge-Passage“ (Challenge Zeitfenster)-Zeit gesteuert.
Um das Ganze zu konkretisieren, schauen wir uns als Nächstes eine einfache Implementierung an. Wir haben eine einfache Demo-Applikation eingerichtet, in der ein Frontend emuliert wird, das mit einem Backend auf einem /your-api-Endpunkt kommuniziert.
Dazu wurde der folgende Quellcode verwendet:
Wir haben eine Schaltfläche erstellt. Wird diese angeklickt, stellt Cloudflare eine fetch()-Anfrage an den /your-api-Endpunkt. Das Ergebnis wird im Antwort-Container angezeigt.
Nehmen wir nun an, dass eine Cloudflare-WAF-Regel eingerichtet wurde, die den /your-api-Endpunkt mit einer Managed Challenge schützt.
Diese Regel hat zur Folge, dass die gerade beschriebene Anwendung aus dem zuvor erläuterten Grund (der Browser erwartet eine JSON-Antwort, empfängt aber stattdessen die Challenge-Seite als HTML) mit ihrer Anfrage scheitert.
\n \n \n \n \n
Unter der Registerkarte „Network“ (Netzwerk) ist zu sehen, dass auf die Anfrage an /your-api die Fehlermeldung 403 ausgegeben wurde.
\n \n \n \n \n
Bei näherer Betrachtung zeigt der Cf-Mitigated-Header, dass die Antwort von der Cloudflare-Firewall einer Challenge unterzogen wurde, da der Besucher bisher noch keine Challenge gelöst hat.
\n \n \n \n \n
Um dieses Problem in unserer Anwendung zu beheben, haben wir für den Turnstile-Website-Schlüssel (sitekey), den wir verwenden möchten, ein Turnstile-Widget im Vorabfreigabe-Modus eingerichtet.
\n \n \n \n \n
In unserer Anwendung überschreiben wir die Funktion fetch(), damit Turnstile aufgerufen wird, sobald eine Cf-Mitigated-Antwort empfangen wurde.
\n \n \n \n \n
Das obenstehende Snippet enthält so einiges: Zuerst erstellen wir ein verstecktes überlagerndes Element (Overlay) und überschreiben die fetch()-Funktion des Browsers. Die fetch()-Funktion wird so geändert, dass der Cf-Mitigated-Header auf das Vorhandensein von „challenge“ hin überprüft wird. Wird eine Challenge ausgegeben, ist das erste Ergebnis negativ. Stattdessen wird in unserer Webanwendung ein Turnstile-Overlay (mit aktivierter Vorabfreigabe) angezeigt. Wenn die Turnstile-Challenge erfolgreich absolviert wurde, versuchen wir es erneut mit der vorherigen Anfrage, nachdem Turnstile das cf_clearance-Cookie erhalten hat, um die Cloudflare-WAF passieren zu können.
\n
<script>\nturnstileLoad = function () {\n // Save a reference to the original fetch function\n const originalFetch = window.fetch;\n\n // A simple modal to contain Cloudflare Turnstile\n const overlay = document.createElement('div');\n overlay.style.position = 'fixed';\n overlay.style.top = '0';\n overlay.style.left = '0';\n overlay.style.right = '0';\n overlay.style.bottom = '0';\n overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';\n overlay.style.border = '1px solid grey';\n overlay.style.zIndex = '10000';\n overlay.style.display = 'none';\n overlay.innerHTML = '<p style="color: white; text-align: center; margin-top: 50vh;">One more step before you proceed...</p><div style=”display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;” id="turnstile_widget"></div>';\n document.body.appendChild(overlay);\n\n // Override the native fetch function\n window.fetch = async function (...args) {\n let response = await originalFetch(...args);\n\n // If the original request was challenged...\n if (response.headers.has('cf-mitigated') && response.headers.get('cf-mitigated') === 'challenge') {\n // The request has been challenged...\n overlay.style.display = 'block';\n\n await new Promise((resolve, reject) => {\n turnstile.render('#turnstile_widget', {\n 'sitekey': ‘YOUR_TURNSTILE_SITEKEY',\n 'error-callback': function (e) {\n overlay.style.display = 'none';\n reject(e);\n },\n 'callback': function (token, preClearanceObtained) {\n if (preClearanceObtained) {\n // The visitor successfully solved the challenge on the page. \n overlay.style.display = 'none';\n resolve();\n } else {\n reject(new Error('Unable to obtain pre-clearance'));\n }\n },\n });\n });\n\n // Replay the original fetch request, this time it will have the cf_clearance Cookie\n response = await originalFetch(...args);\n }\n return response;\n };\n};\n</script>\n<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=turnstileLoad" async defer></script>
\n
Wurde das Turnstile-Widgets ordnungsgemäß beantwortet, verschwindet das Overlay und das angeforderte API-Ergebnis wird angezeigt:
\n \n \n \n \n \n
\n
Vorabfreigabe-Funktion für alle Cloudflare-Kunden verfügbar
Jeder Cloudflare-Nutzer – gleichgültig, ob er unserer kostenloses Angebot oder eine Bezahloption verwendet – kann Turnstile im verwalteten Modus für eine unbegrenzte Anzahl von Anfragen geführenfrei einsetzen. Wenn Sie Cloudflare-User sind und für Ihre kritischen API-Endpunkte das Sicherheitsniveau erhöhen und die Nutzererfahrung verbessern möchten, können Sie in unserem Dashboard ein Turnstile-Widget mit Vorabfreigabe (Pre-Clearance) erstellen.
"],"published_at":[0,"2023-12-18T14:00:17.000+00:00"],"updated_at":[0,"2024-10-09T23:26:38.797Z"],"feature_image":[0,"https://cf-assets.www.cloudflare.com/zkvhlag99gkb/1pHoSlfEzyVOnlUR775FF0/1782f465f6c776a461e64fb567ad7b65/integrating-turnstile-with-the-cloudflare-waf-to-challenge-fetch-requests.png"],"tags":[1,[[0,{"id":[0,"6Mp7ouACN2rT3YjL1xaXJx"],"name":[0,"Sicherheit"],"slug":[0,"security"]}],[0,{"id":[0,"11uq7RpwEtvy8Ic53C6cMR"],"name":[0,"CAPTCHA"],"slug":[0,"captcha"]}],[0,{"id":[0,"4l3WDYLk6bXCyaRc9pRzXa"],"name":[0,"Bots (DE)"],"slug":[0,"bots"]}],[0,{"id":[0,"1mgoRLcodl1ettELWixzCH"],"name":[0,"Turnstile"],"slug":[0,"turnstile"]}],[0,{"id":[0,"6QktrXeEFcl4e2dZUTZVGl"],"name":[0,"Produkt-News"],"slug":[0,"product-news"]}],[0,{"id":[0,"4HIPcb68qM0e26fIxyfzwQ"],"name":[0,"Entwickler"],"slug":[0,"developers"]}],[0,{"id":[0,"7aCmhopZM6Wjggr7YnTxHZ"],"name":[0,"Micro-frontends"],"slug":[0,"micro-frontends"]}]]],"relatedTags":[0],"authors":[1,[[0,{"name":[0,"Adam Martinetti"],"slug":[0,"adam-martinetti"],"bio":[0,null],"profile_image":[0,"https://cf-assets.www.cloudflare.com/zkvhlag99gkb/3sL65Jw7yfClw41pjnBfKp/75bfcc0615d0f01e0631ab0139900cd2/adam-martinetti.jpg"],"location":[0,null],"website":[0,null],"twitter":[0,"@adamemcf"],"facebook":[0,null]}],[0,{"name":[0,"Benedikt Wolters"],"slug":[0,"benedikt"],"bio":[0,null],"profile_image":[0,"https://cf-assets.www.cloudflare.com/zkvhlag99gkb/4YEnfGK1q6irUDXgMXL6Kh/6ec78c81de34a419e7f062742413fadf/benedikt.png"],"location":[0,null],"website":[0,"https://benedikt-wolters.de"],"twitter":[0,"@worengawins"],"facebook":[0,null]}],[0,{"name":[0,"Miguel de Moura"],"slug":[0,"miguel"],"bio":[0,"Miguel de Moura - https://migueldemoura.com"],"profile_image":[0,"https://cf-assets.www.cloudflare.com/zkvhlag99gkb/3nNlmzB7pOU5pz8fFkpD66/cf45cd827b2c9360226305f245693057/miguel.jpg"],"location":[0,null],"website":[0,"https://migueldemoura.com"],"twitter":[0,"@miguel_demoura"],"facebook":[0,null]}]]],"meta_description":[0,"By editing or creating a new Turnstile widget with “Pre-Clearance” enabled, Cloudflare customers can now use Turnstile to issue a challenge when a page’s HTML loads, and enforce that all valid responses have a valid Turnstile token. They can then write a Cloudflare WAF rule to challenge all requests to their API. The Cloudflare WAF will check for a valid clearance cookie before sending requests to the API."],"primary_author":[0,{}],"localeList":[0,{"name":[0,"Integrating Turnstile with the Cloudflare WAF to challenge fetch requests Config"],"enUS":[0,"English for Locale"],"zhCN":[0,"Translated for Locale"],"zhHansCN":[0,"No Page for Locale"],"zhTW":[0,"Translated for Locale"],"frFR":[0,"Translated for Locale"],"deDE":[0,"Translated for Locale"],"itIT":[0,"No Page for Locale"],"jaJP":[0,"Translated for Locale"],"koKR":[0,"Translated for Locale"],"ptBR":[0,"Translated for Locale"],"esLA":[0,"No Page for Locale"],"esES":[0,"Translated for Locale"],"enAU":[0,"No Page for Locale"],"enCA":[0,"No Page for Locale"],"enIN":[0,"No Page for Locale"],"enGB":[0,"No Page for Locale"],"idID":[0,"No Page for Locale"],"ruRU":[0,"No Page for Locale"],"svSE":[0,"No Page for Locale"],"viVN":[0,"No Page for Locale"],"plPL":[0,"Translated for Locale"],"arAR":[0,"No Page for Locale"],"nlNL":[0,"No Page for Locale"],"thTH":[0,"No Page for Locale"],"trTR":[0,"No Page for Locale"],"heIL":[0,"No Page for Locale"],"lvLV":[0,"No Page for Locale"],"etEE":[0,"No Page for Locale"],"ltLT":[0,"No Page for Locale"]}],"url":[0,"https://blog.cloudflare.com/integrating-turnstile-with-the-cloudflare-waf-to-challenge-fetch-requests"],"metadata":[0,{"title":[0,"Integration von Turnstile in die Cloudflare-WAF schützt vor Fetch Requests"],"description":[0,"By editing or creating a new Turnstile widget with “Pre-Clearance” enabled, Cloudflare customers can now use Turnstile to issue a challenge when a page’s HTML loads, and enforce that all valid responses have a valid Turnstile token. They can then write a Cloudflare WAF rule to challenge all requests to their API. The Cloudflare WAF will check for a valid clearance cookie before sending requests to the API."],"imgPreview":[0,"https://cf-assets.www.cloudflare.com/zkvhlag99gkb/4CYK7IKnygEyB1nKTJOaXi/a9b7824864b16acfb74163e18291310e/integrating-turnstile-with-the-cloudflare-waf-to-challenge-fetch-requests-fAxVMG.png"]}]}],"locale":[0,"de-de"],"translations":[0,{"posts.by":[0,"VON"],"footer.gdpr":[0,"DSGVO"],"lang_blurb1":[0,"Dieser Beitrag ist auch auf {lang1} verfügbar."],"lang_blurb2":[0,"Dieser Beitrag ist auch auf {lang1} und {lang2} verfügbar."],"lang_blurb3":[0,"Dieser Beitrag ist auch auf {lang1}, {lang2}, und {lang3} verfügbar."],"footer.press":[0,"Presse"],"header.title":[0,"Der Cloudflare-Blog"],"search.clear":[0,"Löschen"],"search.filter":[0,"Filtern"],"search.source":[0,"Quelle"],"footer.careers":[0,"Stellenausschreibungen"],"footer.company":[0,"Unternehmen"],"footer.support":[0,"Support"],"footer.the_net":[0,"theNet"],"search.filters":[0,"Filter"],"footer.our_team":[0,"Unser Team"],"footer.webinars":[0,"Webinare"],"page.more_posts":[0,"Weitere Beiträge"],"posts.time_read":[0,"Lesezeit: {time} Min."],"search.language":[0,"Sprache"],"footer.community":[0,"Community"],"footer.resources":[0,"Ressourcen"],"footer.solutions":[0,"Lösungen"],"footer.trademark":[0,"Markenzeichen"],"header.subscribe":[0,"Abonnieren"],"footer.compliance":[0,"Compliance"],"footer.free_plans":[0,"Free-Tarife"],"footer.impact_ESG":[0,"Impact/ESG"],"posts.follow_on_X":[0,"Folgen auf X"],"footer.help_center":[0,"Hilfe-Center"],"footer.network_map":[0,"Netzwerkkarte"],"header.please_wait":[0,"Bitte warten"],"page.related_posts":[0,"Verwandte Beiträge"],"search.result_stat":[0,"Ergebnisse {search_range} von {search_total} für {search_keyword}"],"footer.case_studies":[0,"Kundenreferenzen"],"footer.connect_2024":[0,"Connect 2024"],"footer.terms_of_use":[0,"Nutzungsbedingungen"],"footer.white_papers":[0,"Studien"],"footer.cloudflare_tv":[0,"Cloudflare TV"],"footer.community_hub":[0,"Community-Hub"],"footer.compare_plans":[0,"Zum Tarifvergleich"],"footer.contact_sales":[0,"Kontakt zum Vertrieb"],"header.contact_sales":[0,"Kontakt zum Vertrieb"],"header.email_address":[0,"E-Mail-Adresse"],"page.error.not_found":[0,"Seite nicht gefunden"],"footer.developer_docs":[0,"Dokumentation für Entwickler"],"footer.privacy_policy":[0,"Datenschutzrichtlinie"],"footer.request_a_demo":[0,"Demo anfragen"],"page.continue_reading":[0,"Weiterlesen"],"footer.analysts_report":[0,"Analyseberichte"],"footer.for_enterprises":[0,"Für Unternehmen"],"footer.getting_started":[0,"Erste Schritte"],"footer.learning_center":[0,"Lernzentrum"],"footer.project_galileo":[0,"Projekt „Galileo“"],"pagination.newer_posts":[0,"Neuere Beiträge"],"pagination.older_posts":[0,"Ältere Beiträge"],"posts.social_buttons.x":[0,"Auf X diskutieren"],"search.icon_aria_label":[0,"Suche"],"search.source_location":[0,"Quelle/Standort"],"footer.about_cloudflare":[0,"Über Cloudflare"],"footer.athenian_project":[0,"Projekt Athenian"],"footer.become_a_partner":[0,"Partner werden"],"footer.cloudflare_radar":[0,"Cloudflare Radar"],"footer.network_services":[0,"Netzwerkservices"],"footer.trust_and_safety":[0,"Vertrauen und Sicherheit"],"header.get_started_free":[0,"Kostenlos loslegen"],"page.search.placeholder":[0,"Cloudflare-Website durchsuchen"],"footer.cloudflare_status":[0,"Cloudflare-Status"],"footer.cookie_preference":[0,"Cookie-Einstellungen"],"header.valid_email_error":[0,"Muss eine gültige E-Mail sein."],"search.result_stat_empty":[0,"Ergebnisse {search_range} von {search_total}"],"footer.connectivity_cloud":[0,"Connectivity Cloud"],"footer.developer_services":[0,"Dienste für Entwickler"],"footer.investor_relations":[0,"Anlegerbeziehungen"],"page.not_found.error_code":[0,"Fehlercode: 404"],"search.autocomplete_title":[0,"Suchanfrage eingeben. Zum Absenden Eingabetaste drücken."],"footer.logos_and_press_kit":[0,"Logos und Pressekit"],"footer.application_services":[0,"Anwendungsservices"],"footer.get_a_recommendation":[0,"Empfehlung erhalten"],"posts.social_buttons.reddit":[0,"Auf Reddit diskutieren"],"footer.sse_and_sase_services":[0,"SSE- und SASE-Dienste"],"page.not_found.outdated_link":[0,"Möglicherweise haben Sie einen veralteten Link verwendet oder die Adresse falsch eingegeben."],"footer.report_security_issues":[0,"Sicherheitsprobleme berichten"],"page.error.error_message_page":[0,"Leider können wir die von Ihnen gewünschte Seite nicht finden."],"header.subscribe_notifications":[0,"Jetzt abonnieren, um Benachrichtigungen über neue Beiträge zu erhalten:"],"footer.cloudflare_for_campaigns":[0,"Cloudflare for Campaigns"],"header.subscription_confimation":[0,"Abonnement bestätigt. Danke fürs Abonnieren!"],"posts.social_buttons.hackernews":[0,"Diskutieren Sie auf Hacker News"],"footer.diversity_equity_inclusion":[0,"Diversität, Gleichberechtigung und Inklusion"],"footer.critical_infrastructure_defense_project":[0,"Projekt zur Verteidigung kritischer Infrastruktur"]}]}" ssr="" client="load" opts="{"name":"PostCard","value":true}" await-children="">
Cloudflare-Kunden haben jetzt die Möglichkeit, mit Turnstile beim Laden des HTML-Codes einer Seite eine Aufgabe (Challenge) ausgeben zu lassen und durchzusetzen, dass alle gültigen Antworten über einen gültigen Turnstile-Token verfügen. ...
Sie brauchen eine kurze Zusammenfassung der vielen Neuigkeiten unserer Birthday Week oder eine kleine Erinnerung dazu? Dann ist dieser Rückblick das Richtige für Sie...
Jede Website kann eine einfache API nutzen, um CAPTCHAs durch unsere unsichtbare Alternative zu ersetzen – gleichgültig, ob sie sich im Cloudflare-Netzwerk befindet oder nicht...
Wir haben beschlossen, keine CAPTCHAs mehr zu verwenden. Bevor wir darüber sprechen, wie wir das geschafft haben und wie Sie uns helfen können, wollen wir mit einer einfachen Frage beginnen. Warum in aller Welt wird CAPTCHA überhaupt noch verwendet...
Wählen Sie alle Busse aus. Klicken Sie Fahrräder an. Gibt es auf diesem Foto eine Ampel? So lächerlich diese Fragen auch klingen, Sie haben garantiert schon einmal eine davon gesehen. ...