SecurityError: Blocked Frame with origin ... from accessing a cross-origin frame

[mckhames]

What version of React are you using?

17.0.2

What version of Node.js are you using?

16.4.1

What browser are you using?

Safari

What operating system are you using?

iOS

How are you deploying your application?

Vercel / Next Start

Describe the Bug

Only on iOS does this error occur, but it is absolutely breaking my application. Upon sending the user to the payment form, on iOS (safari & duck-duck-go only, NOT chrome, oddly enough) the user receives the following client-side exception/error:

SecurityError: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

Uncaught (in promise) DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
    at JSON.stringify (<anonymous>)
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:2545
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:2560
    at j (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:8923)
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:16494
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:2588
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:16116
    at X (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:16738)
    at Y (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:17187)
    at ee (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:176483:17319)
  ERROR -----> at Module../node_modules/react-square-web-payments-sdk/dist/react-square-web-payments-sdk.esm.js (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:79342:85) 
    at Module.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:677:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:29:33)
    at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:346:21)
    at Module../pages/test/pay2.js (http://localhost:3000/_next/static/chunks/pages/test/pay2.js:77894:88)
    at Module.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:677:31)
    at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:29:33)
    at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1631819421155:346:21)
    at http://localhost:3000/_next/static/chunks/pages/test/pay2.js:111848:16
    at http://localhost:3000/_next/static/chunks/main.js?ts=1631819421155:10782:16```

### Expected Behavior

I expect the payment form to render as it does on the desktop. Instead, a client-side exception is received on iOS (v 14.7.1)

### To Reproduce

My repo is private as it is for a square client.

[mckhames]

To elaborate further:

I am using firebase authentication for my client's square customers. It appears the conflict is as such:

My app fires up authentication --> firebase produces iframe --> square injects iframe. The cross-origin issue is coming from the Square iFrame. I have added all applicable square URLs to the list of accepted firebase domains.

The most odd thing of all is that once the page is refreshed, the client side exception goes away and the form renders perfectly. Unfortunately, it's obviously unacceptable for customers to have to reload the page due to a client-side error.

Any advice on how to get around this issue?

[danestves]

How you are rendering the form? It's appearing that is a problem when you are rendering

[danestves]

As I didn't receive any response, I'm going to proceed to close the issue

[calebfaruki]

@danestves I can confirm that this issue is happening to me as well when running my project locally. The error occurs in development and production. It does not crash but it does cause obnoxious error messages when developing locally.

I'm not sure if this is a Square issue or a problem with this library. But leaving this message here since there hasn't been any report of the issue on https://github.com/square/web-sdk

Node.js v18.12.1
React v18.2.0
GatsbyJS v5.6.0
react-square-web-payments-sdk v3.2.1
@square/web-sdk v2.0.1

EDIT 02/17: I can confirm this is not only happening on localhost.

[danestves]

It's appearing that is a problem from the Square side, will investigate about this