[BUG]: Warnings Reported In the Console over Content Security Policy

[kangelopoulos]

What happened?

So, this is a really strange issue I can't figure out. It doesn't seem to be impacting the functionality of the components but it does seem to be preventing me from destroying the stripe elements in an on unmount or on destroy hook:

beforeDestroy() { this.card?.destroy() },

The above code block is never reached by the application after this warning prints to the console. It appears to be affecting the thread of execution or initialization of all logic for the component. This is a Nuxt application (the error occurs in both v2 and v3 of Nuxt, in every rendering mode I've tested thus far).

I am working on a Windows computer which is the only difference between my last round of testing and today. What I am seeing that is different is what kinds of iframes stripe is mounting when I initialize it on this payment update page.

Previously, there was no "hcaptcha" component in my last round of testing and this new iframe appears to be associated with the following report warning:

When I manually remove the hcaptcha in devtools, and then navigate back to a component with a stripe input, I don't see the error. We don't use hcaptcha, we use recaptcha, and this component and error appears to be originating from the stripe initialization, it isn't there before we load stripe, it is there directly after. The error references the hcaptcha script when it prints to the console.

This is in the latest version of stripe-js, but I tried to move back the current version to see if that would make a difference and it does not. Can anyone tell me what might be going on here?

Environment

Windows 11 - both Edge and Chrome

Reproduction

No response

[brendanm-stripe]

Would you be able to share a minimal repro of this on something like CodeSandbox or JSFiddle etc? Fine to hardcode test values for anything that would come from a server.

Its possible there's a CSP gap to investigate & resolve here.

[aandis]

+1

[kangelopoulos]

I will try to reproduce it!

[sfearl1]

Exact same console errors just popped up in my nuxt3 + stripe.js app last night. Using stripe address and payment elements from vue-stripe-js in my checkout page. FWIW, chrome just had a new release that contained several updates re: CSP.

Stackblitz repro below (likely need to open checkout page in new tab, 'connect to project' and then reload tab to see the CSP console errors):

https://stackblitz.com/edit/github-rjxzbw-7zenhc?file=pages%2Fcheckout.vue&view=editor https://githubrjxzbw7zenhc-1end--3000--a2aabdd9.local-credentialless.webcontainer.io/checkout

[brendanm-stripe]

Hey folks, thanks for the reports here!

This should now be resolved after investigation and fix last week. Please let us know if you continue to see these!