HelloWorld-PHP icon indicating copy to clipboard operation
HelloWorld-PHP copied to clipboard

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

Open kenofrianeza opened this issue 3 years ago • 2 comments

When clicking the "Connect to QuickBooks" button for the first time, a popup appears which displays a log-in page to QuickBooks. After logging in, a loading splash screen appears and then the pop-up suddenly closes. Looking at the browser console, I get the error stated in the title above. I suspect it has something to do with the site failing to obtain the access token from the pop-up because the pop-up's page has a different origin?

kenofrianeza avatar Aug 17 '21 03:08 kenofrianeza

Dear Quickbooks,

The oAuth playground opens, and I can see the below error on browser web developer tools ->web console

DOMException: Permission denied to access property "document" on cross-origin object localhost:port:39:33

(39:33 corresponds to the below code index.php line column)

var win = window.open(url, 'connectPopup', parameters); var pollOAuth = window.setInterval(function () { try { if (win.document.URL.indexOf("code") != -1) { window.clearInterval(pollOAuth); win.close(); location.reload(); } } catch (e) { console.log(e) }

It looks like the PHP is not able to get the token, due to cross site scripting protection.

https://stackoverflow.com/questions/36333978/error-permission-denied-to-access-property-document

Please let me know if a workaround exists for this (like is there an auth portal that sends the token via API response)

This is expected issue, because of cross site scripting protection. The OAuth 2.0 would need a valid URI to redirect, and it should point to your Quickbooks Oauth resource. Reference: https://developer.intuit.com/app/developer/qbo/docs/develop/sdks-and-samples-collections/php See-> Connect to QuickBooks Online

Ensure your config.url has the local URI or the public facing URI, and same value present in the Oauth Keys.

For Example: setting on config.url -> 'oauth_redirect_uri' => http://localhost:5000/callback.php Setting in Playground -> Keys and OAuth-> Redirect URI setting( https://developer.intuit.com/app/developer/playground) Set the same URI -> http://localhost:5000/callback.php

Accordingly, change to public URI if your setup is public facing.