#Éamonn
cosmic prairie
marsh glade
foggy timber
Cheers
molten python
Hi! I'm taking over this thread.
foggy timber
NP 🙂
molten python
Can you share more details on how you are integrating with Stripe? And also the exact CORS errors you see?
foggy timber
PHP application. And I will see either:
Content Security Policy: The page's settings blocked the loading of a resource at inline ("script-src").
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://m.stripe.com/6. (Reason: CORS request did not succeed). Status code: (null).
Uncaught (in promise) undefined
molten python
Thanks! And when does this error happens? Is it just when loading the page with Stripe.js, or are you doing something specific?
foggy timber
Yup, on load and after processing a payment (the reponse is not received).
molten python
Got it. And you are using the PaymentElement on your page?
foggy timber
Yep.
molten python
Thanks for all the information. I'm not super familiar with CORS, so give me a few minutes to look into this.
foggy timber
NP. Thanks
molten python
Have you tried what is mentioned on this page (in the "Stripe.js" tab)? https://stripe.com/docs/security/guide#content-security-policy
foggy timber
OK - I don't have the frame-src or the connect-src. let me try those right now...
Nope, that's not working for me. Now I'm getting a server error, and the console is reporting: Content Security Policy: The page's settings blocked the loading of a resource at [my-domain] ("connect-src"). Let me check the server log...
Ya, server is just complaining about the HTML. I'm not sure about how to load the connect-src or the frame-src. Are they included in the Content-Security-Policy meta tag?
Coz that's what I'm doing...
molten python
Ya, server is just complaining about the HTML
What's the error you see?
foggy timber
PHP Warning: Undefined array key "HTTP_HOST" in /var/www/html/ds_core/Config.php on line 13
It's just not loading. I've reverted...
molten python
Found this on a StackOverflow:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://api.stripe.com; frame-src 'self' https://js.stripe.com https://hooks.stripe.com; script-src 'self' https://js.stripe.com 'unsafe-inline'"/>
https://stackoverflow.com/questions/58053101/django-stripe-js-blocking-of-inline-script
Can you share how it looks like on your end?
foggy timber
I wonder if the order matters. Let me try again with them included and I will share the string.
No - still borked. String is currently:
default-src 'self' 'unsafe-inline' https://www.google.com/ https://google.com https://fonts.googleapis.com https://fonts.gstatic.com https://cdnjs.cloudflare.com/ajax/libs/Chart.js/ https://js.stripe.com/ https://unpkg.com https://cdn.tiny.cloud blob: data:image ; connect-src https://api.stripe.com ; frame-src https://js.stripe.com https://hooks.stripe.com ; script-src 'self' 'unsafe-inline' https://stripe.com/ https://.stripe.com/ https://.stripe.com/* https://js.stripe.com/ https://cdnjs.cloudflare.com/ajax/libs/Chart.js/ https://www.google.com/ https://www.gstatic.com/ https://www.google.com/recaptcha/api.js https:://calendar.google.com https://unpkg.com https://cdn.tiny.cloud ; object-src 'none' ; media-src 'self' blob:
molten python
That's a hard string to parse with all these &apos.
Is this something you set directly in AWS?
foggy timber
Sorry, I just threw in a write-to-file function for it that converts them. They are rendered as apostrophes in the HTML tag.
I define them in my code, if that's what you're asking
molten python
Can you share the string actually rendered in your HTML?
foggy timber
default-src 'self' 'unsafe-inline' https://www.google.com/ https://google.com https://fonts.googleapis.com https://fonts.gstatic.com https://cdnjs.cloudflare.com/ajax/libs/Chart.js/ https://js.stripe.com/ https://unpkg.com https://cdn.tiny.cloud blob: data:image ; connect-src https://api.stripe.com ; frame-src https://js.stripe.com https://hooks.stripe.com ; script-src 'self' 'unsafe-inline' https://stripe.com/ https://.stripe.com/ https://.stripe.com/* https://js.stripe.com/ https://cdnjs.cloudflare.com/ajax/libs/Chart.js/ https://www.google.com/ https://www.gstatic.com/ https://www.google.com/recaptcha/api.js https:://calendar.google.com https://unpkg.com https://cdn.tiny.cloud ; object-src 'none' ; media-src 'self' blob:
I wonder if it's not CORS at all - could it be something in my .htaccess? Or SSL certification?
OK - I just commented out the CSP tag entirely, and I'm still getting the errors. It must be something else. Have you any idea as to where I could check next?
molten python
and I'm still getting the errors
Can you share the exact errors you are getting?
foggy timber
Content Security Policy: The page's settings blocked the loading of a resource at inline ("script-src").
Content Security Policy: The page's settings observed the loading of a resource at inline ("script-src"). A CSP report is being sent.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://m.stripe.com/6. (Reason: CORS request did not succeed). Status code: (null).
molten python
Well, it looks like the issue is CORS. The string you shared above is quite different from the one mentioned in the SackOverflow I linked earlier.
default-src 'self'; connect-src 'self' https://api.stripe.com; frame-src 'self' https://js.stripe.com https://hooks.stripe.com; script-src 'self' https://js.stripe.com 'unsafe-inline'
foggy timber
But if I don't deploy a CSP at all, how am I still getting CORS errors?
When I process a payment, the error is
Uncaught (in promise) FetchError: Error fetching https://r.stripe.com/0: NetworkError when attempting to fetch resource.: <multiple stripe URLS>
austere bay
you can ignore that really if it's not causing uesr-facing erorrs
I'm aware we have misconfigurations in our own internal domains that can cause us to spam errors to merchant's consoles unfortunately, I've raised it internally a number of times
r.stripe.com is used for internal tracking/machine learning(https://stripe.com/docs/disputes/prevention/advanced-fraud-detection) and failures on it don't matter and don't impact your ability to take payments or anything else
foggy timber
That's fine, but the garbled response means my own system doesn't respond correctly - i.e. issue a success message and generate a receipt. Can I assume a successful transaction if I receive anything other than an object with an error property?
From:
stripe.handleCardPayment(client_secret, card).then(function(result)
austere bay
what garbled response?
Can I assume a successful transaction if I receive anything other than an object with an error property?
yes, if we're talking aboutresult, which is what the Promise resolves with and your code works with
foggy timber
Apologies, I don't mean 'garbled', but I think the response is getting lost somewhere. I need to log several steps to see what's happening.
result is what I'm referring to. I'll go from there so. Thanks for the help!
austere bay
no worries. But yeah none of this should be visible to your code or have customer-facing impact or change how your code gets response from our functions or APIs
if that does seem to be the case, please let me know so we can investigate. But in general this should just be something that appears in the browser console and that we need to clean up/polish (we have a few different domains that talk to each other for metrics/fraud prevention and the CSP policies might be misconfigured)