Open taewookimfardark opened 2 weeks ago
brendanm-stripe
commented
1 week ago Hey there, can you confirm you've configured your page's CSP according to our guidance here: https://docs.stripe.com/security/guide?csp=csp-js#content-security-policy
Note especially:
If you’re using a payment method with redirect functions (for example, 3D Secure, ad Sofort), include https://hooks.stripe.com as a frame-src directive.
taewookimfardark
commented
1 week ago Hello.
Yes, I'm using nextjs for my application and i set below header to next.config.js
const cspHeader = " connect-src 'self' https://api.stripe.com https://maps.googleapis.com; frame-src 'self' https://js.stripe.com https://hooks.stripe.com; script-src 'self' https://js.stripe.com https://maps.googleapis.com 'unsafe-inline' 'unsafe-eval'; "
This was my header but same problem.
And from my understanding, that is a setting of my application but this error is from iframe inside strips application.
When i try to pay with card,
<iframe frameborder="0" allowtransparency="true" scrolling="no" name="hcaptcha-invisible" referrerpolicy="no-referrer" aria-hidden="true" tabindex="-1" src="https://js.stripe.com/v3/hcaptcha-invisible-466d3344250c97f09a7e54580bb00dda.html#debugMode=false&parentOrigin=http%3A%2F%2Flocalhost%3A3000" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; visibility: hidden !important; position: fixed !important; height: 1px !important; pointer-events: none !important; user-select: none !important;" data-initialized="true"></iframe>
this iframe is made automatically, and
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-1bd1ss83rhoRESXnUSD+xUzVPZzKrKQPYKkWOj5TJIc='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present
this error occurs inside that iframe and it disappeared and Authorization is failed
What happened?
I'm trying to confirm setupIntent using PaymentElement. But especially for certain card information, It produces an error and authentication is failed. What i found out is that, It only happens when bank requires 3d secure 2. Inside stripe elements, When i try to confirm setup using stripe.confirmSetup, It appends iframe which has origin https://js.stripe.com/v3/three-ds-2-fingerprint-84662d8c8bf3cc3220ca2f3241e594c1.html#intentId={intentId}&locale={langauge}&hosted=false&referrer={referrer}&controllerId=__privateStripeController79216. And inside this page, It throws an error as below.
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-1bd1ss83rhoRESXnUSD+xUzVPZzKrKQPYKkWOj5TJIc='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is presentMy web application is based on nextjs and stripe version is "@stripe/react-stripe-js": "^2.7.1" "@stripe/stripe-js": "^3.0.0"
Environment
No response
Reproduction
No response