Kit / Kit/convertkit-react

reCaptcha Iframe loads without proper styling preventing users from verifying

Open
#26 0 comments 0 reactions 0 assignees View on GitHub
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.

iframe display issue screenshot

iframe console errors

```
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.