From e5fa754324ede2267f07efc1218a98dd07ff819c Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Tue, 15 Oct 2024 15:47:21 +0300 Subject: [PATCH 1/2] Add the render query param on the script --- .changeset/serious-moose-design.md | 5 +++++ packages/clerk-js/src/utils/captcha/turnstile.ts | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/serious-moose-design.md diff --git a/.changeset/serious-moose-design.md b/.changeset/serious-moose-design.md new file mode 100644 index 00000000000..ff67e5a8fd9 --- /dev/null +++ b/.changeset/serious-moose-design.md @@ -0,0 +1,5 @@ +--- +"@clerk/clerk-js": patch +--- + +Add the `render=explicit` parameter to the Turnstile script. diff --git a/packages/clerk-js/src/utils/captcha/turnstile.ts b/packages/clerk-js/src/utils/captcha/turnstile.ts index 78a26cc57d7..289df8ecc0c 100644 --- a/packages/clerk-js/src/utils/captcha/turnstile.ts +++ b/packages/clerk-js/src/utils/captcha/turnstile.ts @@ -3,7 +3,9 @@ import type { CaptchaWidgetType } from '@clerk/types'; import { CAPTCHA_ELEMENT_ID, CAPTCHA_INVISIBLE_CLASSNAME } from './constants'; -const CLOUDFLARE_TURNSTILE_ORIGINAL_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js'; +// We use the explicit render mode to be able to control when the widget is rendered. +// CF docs: https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#disable-implicit-rendering +const CLOUDFLARE_TURNSTILE_ORIGINAL_URL = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit'; interface RenderOptions { /** @@ -87,7 +89,7 @@ async function loadCaptchaFromCloudflareURL() { return await loadScript(CLOUDFLARE_TURNSTILE_ORIGINAL_URL, { defer: true }); } catch (err) { console.warn( - 'Clerk: Failed to load the CAPTCHA script from Clouflare. If you see a CSP error in your browser, please add the necessary CSP rules to your app. Visit https://clerk.com/docs/security/clerk-csp for more information.', + 'Clerk: Failed to load the CAPTCHA script from Cloudflare. If you see a CSP error in your browser, please add the necessary CSP rules to your app. Visit https://clerk.com/docs/security/clerk-csp for more information.', ); throw err; } From 410626fc8127239eef8fa35793e333e1fe3ea569 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Tue, 15 Oct 2024 16:22:11 +0300 Subject: [PATCH 2/2] Update .changeset/serious-moose-design.md Co-authored-by: panteliselef --- .changeset/serious-moose-design.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/serious-moose-design.md b/.changeset/serious-moose-design.md index ff67e5a8fd9..9d29e0cf281 100644 --- a/.changeset/serious-moose-design.md +++ b/.changeset/serious-moose-design.md @@ -2,4 +2,4 @@ "@clerk/clerk-js": patch --- -Add the `render=explicit` parameter to the Turnstile script. +Add the `?render=explicit` query parameter to the Turnstile script.