Protocols, domains, and ports must match.

[whatrocks]

I'm seeing this issue when viewing on Google Chrome browser on iOS:

Blocked a frame with origin "https://www.mycoolwebsite.com" from accessing a frame with origin "https://js.stripe.com". Protocols, domains, and ports must match.

Any suggestions. Here's where I'm adding the StripeProvider

ReactDOM.render(
  <Provider store={store}>
    <StripeProvider apiKey={STRIPE_KEY}>
      <div>
        <Router history={history} routes={routes} onUpdate={routerOnUpdate} />
      </div>
    </StripeProvider>
  </Provider>,
  document.getElementById('app')
);

[jenan-stripe]

Hi @whatrocks! It looks like something on https://www.mycoolwebsite.com is trying to read from a js.stripe.com iframe. I haven't seen any issues on Chrome iOS. Do you have a reproducible example?

[whatrocks]

Thanks @jenan-stripe ! I'll try to set up a sample app with this issue.

This README says you need to add this script to your app: <script src="https://js.stripe.com/v3/"></script> - so I'm including that in the head of my initial HTML page. That's where the js.stripe.com iframe comes from. Is this still necessary - or is there a better way to do this?

[jenan-stripe]

@whatrocks Yes that's correct. Adding <script src="https://js.stripe.com/v3/"></script> loads Stripe.js, which is required to use react-stripe-elements.

[whatrocks]

Okay, then maybe I'm not understanding your first comment, where you said "it looks like something on is trying to read from the js.strip.com iframe." Isn't that meant to happen, because I need to load Stripe.js? Thanks again @jenan-stripe and sorry if I'm not understanding your comment correctly.

[jenan-stripe]

@whatrocks Ah. So, Stripe.js adds iframes to your page. If you have code that tries to reach into those iframes, the browser will give you a cross-origin error that you are seeing.

See generic example here: https://jsfiddle.net/o2wus94f/

It sound like you have code on your site (either other third party code or your own) that is trying to reach into the Stripe iframes, and the browser is preventing that from working for security reasons.

Hope that helps!

[jasondonnette]

I'm getting this error as well, just started seeing reports coming in through Sentry.io - four users affected, all with the same browser/os combo:

iOS Version: 10.3.1
Chrome Mobile iOS Version: 60.0.3112

I don't believe there is any code on the site trying to reach into the Stripe iframe, what would be the purpose of that? It is strange it's an isolated issue to that browser/os combo, but I am looking into it more.

@whatrocks did you figure anything out yet?

edit: I'm actually not using react-stripe-elements in my project – so it's likely a Stripe.js related issue.

[fred-stripe]

@jasondonnette Great question! I've seen several reports of this, and I've narrowed this down to a browser bug with Chrome on iOS, have a look:

https://bugs.chromium.org/p/chromium/issues/detail?id=709132&q=OS%3DiOS%20blocked%20a%20frame&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

The gist of it is that if there's an iframe on the page—as is the case with Stripe.js, Checkout, or Elements—Chrome iOS's autofill will attempt to read the iframe's contents in order to find more fields to fill in. However, Chrome iOS doesn't check the iframe's origin and so causes an error like "blocked a frame with origin (https://yourpage) from accessing a frame with origin (https://js.stripe.com)".

It looks like Chrome's development team is working on the issue and a fix will be released in Chrome iOS v61. Meanwhile, in my testing this doesn't prevent Elements or Stripe.js from working as expected. Only your error-tracking Javascript is seeing this error, and not your customers. You can safely ignore this error for now.

[whatrocks]

Thanks @fred-stripe for the info. We're still intermittently experiencing the issue popping up in Sentry.io, as well, @jasondonnette . But as far as I can tell this hasn't impacted any users directly.

[whatrocks]

@fred-stripe I've now also seen this error for Safari on iOS via Sentry reports.

[fred-stripe]

Hi @whatrocks can you send the exact User Agent you're seeing? The Chrome iOS and Safari iOS agents are incredibly close, with just a CriOS/vvv string tacked on in the middle.

[jasondonnette]

@fred-stripe Mozilla/5.0 (iPad; CPU OS 11_0_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) CriOS/59.0.3071.102 Mobile/15A402 Safari/602.1

[whatrocks]

@fred-stripe Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) BaiduHD/5.4.0.0 Mobile/10A406 Safari/8536.25

[fred-stripe]

@jasondonnette CriOS/59.0.3071.102 is Chrome iOS' User Agent.

@whatrocks BaiduHD/5.4.0.0 is the embedded browser in Baidu I'm guessing? Since Chrome iOS is open source it's possible they adapted some of that code, or wrote similar autofill features.

Keep in mind in either case that while this error sounds dire, it doesn't prevent Stripe Elements from functioning—it's just the browser security model protecting the iframe contents from code running in the browser itself!