diff --git a/src/content/docs/workers/examples/turnstile-html-rewriter.mdx b/src/content/docs/workers/examples/turnstile-html-rewriter.mdx index 075ca432742fdaf..05ee91234faa4af 100644 --- a/src/content/docs/workers/examples/turnstile-html-rewriter.mdx +++ b/src/content/docs/workers/examples/turnstile-html-rewriter.mdx @@ -23,7 +23,8 @@ import { TabItem, Tabs } from "~/components"; ```js export default { async fetch(request, env) { - const SITE_KEY = env.SITE_KEY + const SITE_KEY = env.SITE_KEY; // The Turnstile Sitekey of your widget (pass as env or secret) + const TURNSTILE_ATTR_NAME = 'your_id_to_replace'; // The id of the element to put a Turnstile widget in let res = await fetch(request) // Instantiate the API to run on specific elements, for example, `head`, `div` @@ -32,17 +33,15 @@ export default { // `.on` attaches the element handler and this allows you to match on element/attributes or to use the specific methods per the API .on('head', { element(element) { - // In this case, you are using `append` to add a new script to the `head` element element.append(``, { html: true }); }, }) .on('div', { element(element) { - - // You are using the `getAttribute` method here to retrieve the `id` or `class` of an element - if (element.getAttribute('id') === ) { - element.append(`
`, { html: true }); + // Add a turnstile widget element into if an element with the id of TURNSTILE_ATTR_NAME is found + if (element.getAttribute('id') === TURNSTILE_ATTR_NAME) { + element.append(`
`, { html: true }); } }, }) @@ -57,7 +56,9 @@ export default { ```ts export default { async fetch(request, env): Promise { - const SITE_KEY = env.SITE_KEY + const SITE_KEY = env.SITE_KEY; // The Turnstile Sitekey of your widget (pass as env or secret) + const TURNSTILE_ATTR_NAME = 'your_id_to_replace'; // The id of the element to put a Turnstile widget in + let res = await fetch(request) // Instantiate the API to run on specific elements, for example, `head`, `div` @@ -73,9 +74,8 @@ export default { }) .on('div', { element(element) { - - // You are using the `getAttribute` method here to retrieve the `id` or `class` of an element - if (element.getAttribute('id') === ) { + // Add a turnstile widget element into if an element with the id of TURNSTILE_ATTR_NAME is found + if (element.getAttribute('id') === TURNSTILE_ATTR_NAME) { element.append(`
`, { html: true }); } }, @@ -94,6 +94,7 @@ from js import HTMLRewriter, fetch async def on_fetch(request, env): site_key = env.SITE_KEY + attr_name = env.TURNSTILE_ATTR_NAME res = await fetch(request) class Append: @@ -112,7 +113,7 @@ async def on_fetch(request, env): # Instantiate the API to run on specific elements, for example, `head`, `div` head = create_proxy(Append()) - div = create_proxy(AppendOnID("NAME_OF_ATTRIBUTE")) + div = create_proxy(AppendOnID(attr_name)) new_res = HTMLRewriter.new().on("head", head).on("div", div).transform(res) return new_res @@ -128,7 +129,7 @@ This is only half the implementation for Turnstile. The corresponding token that ```js -async function handlePost(request) { +async function handlePost(request, env) { const body = await request.formData(); // Turnstile injects a token in `cf-turnstile-response`. const token = body.get('cf-turnstile-response'); @@ -137,10 +138,10 @@ async function handlePost(request) { // Validate the token by calling the `/siteverify` API. let formData = new FormData(); - // `secret_key` here is set using Wrangler secrets - formData.append('secret', secret_key); + // `secret_key` here is the Turnstile Secret key, which should be set using Wrangler secrets + formData.append('secret', env.SECRET_KEY); formData.append('response', token); - formData.append('remoteip', ip); + formData.append('remoteip', ip); //This is optional. const url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'; const result = await fetch(url, { @@ -155,16 +156,26 @@ async function handlePost(request) { } // The Turnstile token was successfully validated. Proceed with your application logic. // Validate login, redirect user, etc. - return await fetch(request) + + // Clone the original request with a new body + const newRequest = new Request(request, { + body: request.body, // Reuse the body + method: request.method, + headers: request.headers + }); + + return await fetch(newRequest); } export default { async fetch(request, env) { - const SITE_KEY = env.SITE_KEY + const SITE_KEY = env.SITE_KEY; // The Turnstile Sitekey of your widget (pass as env or secret) + const TURNSTILE_ATTR_NAME = 'your_id_to_replace'; // The id of the element to put a Turnstile widget in + let res = await fetch(request) if (request.method === 'POST') { - return handlePost(request) + return handlePost(request, env) } // Instantiate the API to run on specific elements, for example, `head`, `div`