React-stripe-elements: 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!

[HansOspina]

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

[adamreisnz]

I'm also seeing this issue being reported through Sentry for Safari mobile running on iOS 11.1.2.
The user agent is Mobile Safari UIWebView 11.1.2.

Is it safe to ignore these errors? They appear not in the payment flow but when trying to load the script. Will the Stripe integration still work as expected?

Edit: @fred-stripe already answered that above! So I will put in place a filter to ignore these errors as there's nothing we can do about it it seems. It could very well be a 3rd party browser plugin that might be trying to access the frame.

[chemitaxis]

Same here...

[EricFries]

Still seeing this same issue with Chrome Mobile iOS.

[atty-stripe]

@chemitaxis @EricFries could you share the full user-agent string of the browsers? As noted above, this is either a browser trying to reach into the iframe for autofill, or a script on your page trying to do the same. This is in all likelihood not a Stripe.js bug.

[EricFries]

@atty-stripe thanks for the response. One of the Sentry errors has a reference to hasPasswordField_ so an autofill problem sounds about right.

Here is the user-agent:
Mozilla/5.0 (iPad; CPU OS 10_3_3 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) CriOS/59.0.3071.102 Mobile/14G60 Safari/602.1

[atty-stripe]

@EricFries yep, and it looks like the Chrome version in your UA string is 59; this was fixed in 61. You can safely ignore the errors, as they do not affect Elements in any way.

[ffxsam]

@atty-stripe Thanks for your comment! I came here due to this issue as well, and my customer is using Chrome 57. I figured it was maybe an older browser issue as no other user has caused this particular error to be thrown.