#toxiCity

1 messages · Page 1 of 1 (latest)

deep pineBOT
eternal dirge
#

Hi there!

balmy vessel
#

Hey Man!

eternal dirge
#

Can you clarify what are you doing when you see this error?

balmy vessel
#

I deployed to production and gets this error whenever I am loading the card payment setup

eternal dirge
balmy vessel
#

Whenever I am loading this element

unknown.png
eternal dirge
#

Got it, this is the Payment Element. So it displays properly on the page, but you get errors in the console?

balmy vessel
#

on production this element doesnt load

#

it only works on development

#

Hello?

eternal dirge
#

Thanks, for the information! Give me a few minutes to look into this.

balmy vessel
#

ok

#

Thanks

balmy vessel
#

🤔

silent crest
#

Hi there 👋 I'm jumping in as my teammate needed to step away. Please bear with me a moment while I catch up on the context here.

balmy vessel
#

ok

silent crest
#

Is the site where you're seeing this publicly accessible, and if so could you share a link to it?

balmy vessel
#

try this

#

I tried setting Content-Security-Policy meta on index.html on the react app

#

also tried connect.js.stripe and so on but still doesnt work

silent crest
#

Looks like that page is behind a login wall

balmy vessel
#

Just create a sample password

#

This is for our client registration process

silent crest
#

Is that page accessible over https?

balmy vessel
#

not yet

#

this is a test environment and we are not yet connecting to prod domain

silent crest
#

Okay, the errors I'm seeing here don't match the ones that you shared initially. Earlier in the thread you mentioned that you deployed to production, is this that site?

balmy vessel
#

yes

#

What error are you seeing now?

silent crest
balmy vessel
#

what browser are you using?

silent crest
#

Chrome

balmy vessel
#

I am using firefox

#

either way, it still doesnt load the payment element

#

Do you know what I can do to fix this?

silent crest
#

I'm not sure off-hand (sorry, CSP is not one of my strong points) but I do think it's related to the CSP policy not getting set correctly as I'm seeing errors being raised about your site not being able to load it's own resources.

balmy vessel
#

Can you connect me to someone who knows how to handle this?

silent crest
#

I've asked a teammate that is more familiar with React to take a look when they get a moment, but since it looks like this is impacting the loading of more than just Stripe resources the issue may be outside of our areas of knowledge.

paper charm
#

Are you sure you don't have a conflicting policy somewhere? ie, if you disable the CSP entirely, do things work as expected?

#

The missing frame-src might help explain some of the "refused to frame..." errors

balmy vessel
#

I am using this as my meta data for csp

#

is there anything wrong with this implementation?

paper charm
#

That's different than what you shared above (includes hooks) but it appears to include everything we note

#

I'm not a CSP expert, but I don't know if you can mix wildcards and explicit allowances

balmy vessel
#

I tried multiple metadata but still getting the same results

paper charm
#

Try removing the * on the lines with explicit sources

balmy vessel
#

let me try

#

Hi still encountering the same issue

paper charm
#

I think you need to then carefully review when and how your CSP is set and make sure you're getting the expected result. You can try public evaluator tools, eg: https://cspvalidator.org/
or browser-based tools for inspecting the parsed policy

#

But it sounds like the final policy you're getting isn't what you intend/expect

balmy vessel
#

says here. that it's a valid policy

#

Do you have any other documentation I can refer to?

paper charm
#

Are you sure? Notice the valid policy below doesn't show the frame-src rules

balmy vessel
#

yes, I noticed it. I'm checking now.

#

will rebuild again

paper charm
#

I don't think there is any Stripe-specific guidance we can offer, this seems like an issue with your application CSP that you need to dig into