reCaptcha Iframe loads without proper styling preventing users from verifying
- Dominant language
- JavaScript
- Stars
- 46
- Forks
- 8
- PR merge metrics
- No merged PRs in 30d
Description
When ConvertKit decides to display a reCaptcha, the iFrame fails to load properly resulting in a cut-off input form (see screenshot below). Additionally, errors in the dev console (screenshot below) suggest the iFrame does not set the proper tags which may explain the display issue.


```
manifest.webmanifest:1 Manifest: Line: 1, column: 1, Syntax error.
three.cjs:50825 WARNING: Multiple instances of Three.js being imported.
5232 @ three.cjs:50825
[Report Only] Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
[Report Only] Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
[Report Only] Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
[Report Only] Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
[Report Only] Refused to load the script '' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
dd3ed6e5-5e75-41f8-be47-85df9032abf2:1 [Report Only] Refused to load the script 'https://cdn.convertkit.com/assets/gdpr-14b4f28cd9abaa6e8fd99b7f2c7490130cc95f58638b26b70239eb47ae592a61.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
dd3ed6e5-5e75-41f8-be47-85df9032abf2:1 [Report Only] Refused to load the script 'https://www.recaptcha.net/recaptcha/api.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
VM42:1 [Report Only] Refused to load the script 'https://app.convertkit.com/cdn-cgi/challenge-platform/scripts/invisible.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
(anonymous) @ VM42:1
about:blank:1 [Report Only] Refused to load the script 'https://app.convertkit.com/cdn-cgi/challenge-platform/h/g/scripts/jsd/b5e45436/invisible.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
api.js:1 [Report Only] Refused to load the script 'https://www.gstatic.com/recaptcha/releases/4q6CtudrwcI-LSEYlfoEbDXg/recaptcha__en.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
(anonymous) @ api.js:1
dd3ed6e5-5e75-41f8-be47-85df9032abf2:48 [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-EM3PzB6rbUinZ6wSYCkYK+ljQIH/MrHDTXcp8HSD5Y0='), or a nonce ('nonce-...') is required to enable inline execution.
dd3ed6e5-5e75-41f8-be47-85df9032abf2:74 [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-SgJWzQmk/nnYYjrwSSCNn6+qi9mr8lc5KWVRFRVGb6Y='), or a nonce ('nonce-...') is required to enable inline execution.
dd3ed6e5-5e75-41f8-be47-85df9032abf2:74 [Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-1kpvLpadmwVAgBkWkRAB5Wu2FXuyLlgO4RpHWpES3cs='), or a nonce ('nonce-...') is required to enable inline execution.
handler @ dd3ed6e5-5e75-41f8-be47-85df9032abf2:74
invisible.js:1 [Report Only] Refused to create a worker from 'https://app.convertkit.com/cdn-cgi/challenge-platform/h/g/scripts/pica.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.
eE @ invisible.js:1
about:blank:1 [Report Only] Refused to create a worker from 'https://app.convertkit.com/cdn-cgi/challenge-platform/h/g/scripts/pica.js' because it violates the following Content Security Policy directive: "script-src 'none'". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.
invisible.js:1 [Report Only] Refused to connect to 'https://app.convertkit.com/cdn-cgi/challenge-platform/h/g/cv/result/7bec4b676c0f664d' because it violates the following Content Security Policy directive: "connect-src 'none'".
eD @ invisible.js:1
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce a ConvertKit form that triggers reCaptcha and inspect the iframe styling and the reported console and Content Security Policy errors. The work is done when users can see and complete the full verification form without the reported display failure.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100