fix(website): remove invalid Turnstile size 'invisible', hide container via CSS#1590
Conversation
…ptions Cloudflare Turnstile does not accept 'invisible' as a size value; the valid options are 'normal', 'compact', and 'flexible'. Passing 'invisible' throws a TurnstileException in recent Turnstile script versions, breaking the pack form. The invisible behaviour is already achieved via execution: 'execute', which defers the challenge until mintToken() is called. The size parameter is only needed when rendering a visible widget.
…ible Without a size value, Turnstile renders a visible widget inside the container div. Collapse it with position: absolute; width/height: 0; overflow: hidden; visibility: hidden so no layout space is consumed and the widget stays inert.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
💤 Files with no reviewable changes (1)
📝 WalkthroughWalkthroughThe PR fixes a Cloudflare Turnstile initialization error by replacing the unsupported ChangesTurnstile widget size compatibility fix
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the Cloudflare Turnstile integration by removing the 'invisible' size option and updating the type definitions to include 'flexible' sizing. It also introduces a .turnstile-container CSS class to hide the widget while keeping it in the DOM for programmatic execution. Feedback suggests that using zero dimensions and hidden visibility might trigger Turnstile's anti-tamper checks, recommending an off-screen positioning strategy instead to ensure the widget initializes correctly.
|
Hi @serhiizghama ! The Cloudflare console config on our side might also be off, so we'll take a look as a follow-up. |
2 participants
Problem
Cloudflare Turnstile throws a
TurnstileErrorwhensize: 'invisible'is passed torender():This breaks the Pack form on repomix.com for affected users (reported in #1551).
The valid values for the
sizeparameter are'normal','compact', and'flexible'. The value'invisible'was never a documented Turnstile option and is rejected by recent Turnstile script versions.Solution
useTurnstile.ts— removesize: 'invisible'from therender()options. The non-interactive behaviour is already provided byexecution: 'execute', which defers the challenge untilmintToken()is called.useTurnstileScript.ts— update theTurnstileRenderOptions.sizetype to match the actual API ('normal' | 'compact' | 'flexible').TryIt.vue— add a.turnstile-containerCSS rule (position: absolute; width/height: 0; overflow: hidden; visibility: hidden) so the widget does not consume layout space or appear visually when rendered without a size.Testing
npm run lint— no errorsnpm run test— all 1312 tests passsize: 'invisible'Fixes #1551