#jg_stripejs-loaderror-iframe
ionic basaltBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1463991962632716455
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
magic crater
HI 👋
Can you explain the embedded iframe plugin design? What are you attempting to do inside the <iframe> element?
topaz gate
Certainly! Its basically a small application that allows the user to select a donation level, enter their billing information, then their card information in the CardForm. We create the PaymentIntent on the backend after they submit their billing information then use the stripe-js confirmCardPayment method to finalize the payment. On success, we display a thank you page with a link to start a new donation
This isn't happening to all donors either but we've seen the rate increase in the last month or so
I've started wondering if it could be an issue with a security policy in newer browser versions but haven't had luck tracking that down. The stripe-js implementation doen't provide much detail with the error
magic crater
The first concern I have is that, since you are loading in an <iframe>, it may be due to CSP restrictions for the sites the iframe is being loaded in. New security systems in Chrome and Safari may also be playing a part.
topaz gate
Right, and we have the same flow on a site that we fully host and it does not experience this issue
so I also suspect it has to do with being in an iframe
magic crater
Yeah, in that case both the iframe content and the ancestor page have the same origin so no CSP errors
topaz gate
well, we don't even use an iframe in that case
its a separate SPA. The embedded version was created later
magic crater
Ah, yeah.
topaz gate
I mostly wanted to reach out in case you've seen this sort of issue with Stripe Elements being embedded and had any advice
I also have a suspicion that its mobile versions of the browsers that are effected based on the user agents being reported in our error monitor
magic crater
Unfortunately, our internal advice is "don't use iframes". We use a frame-ancestors directive to restrict where Stripe can be loaded in order to prevent Stripe being used for skimming.
To quickly embed a payment surface, we recommend using Embedded Checkout
topaz gate
alright, I've checked a few of the sites and none of them have a CSP setup that I can see in their site headers
but it could be a browser security policy about cross origin scripts which is where I'm leaning since its gotten worse recently
ionic basaltBOT
magic crater
As I said, Stripe also has it's own security measures to reduce the usage of Stripe.js in <iframes> due to the security risks
topaz gate
I would expect your frame-ancestors directive to completely disable our application if it was sufficiently strict but we're seeing this issue only in some cases
magic crater
Right. That does sound like it's a browser security feature. I think mobile devices have more automated software updating than most people set up for their personal computers so it would make sense that is where you would see the initial impacts.
ionic basaltBOT
jg_stripejs-loaderror-iframe
topaz gate
Gotcha, well I don't know that Embedded Checkout is the move for us because the benefit to our customers is that they can load our iframe and not have to create a stripe integration themselves
unless you are saying embedded checkout is more friendly within iframes
magic crater
Unfortunately that would not play well either inside an iframe, i"m afraid. At least they use the same frame-ancestors security approaches