Fail to authenticate via SoundCloud, sign-in callback is trying to access a cross-origin frame

231 Views Asked by At

SoundCloud SDK v3.1.2

I registered my App approximately 1 year ago.

Today I discovered that my SoundCloud (SC) sign-in stopped working.

When I click on the button the SC pop-up appears with message "Allow “domain.com” access to your SoundCloud account?" I click connect and get the callback pop-up with the message "This popup should automatically close in a few seconds". The callback pop-up never closes. And in the dev console (for the callback pop-up) I see the following errors:

Chrome 55.0.2883.87 m (64-bit) VM2980 callback.html?code=3717208…&state=SoundCloud_Dialog_508d9:7 Uncaught DOMException: Blocked a frame with origin "http://domain.com" from accessing a cross-origin frame. at onload (http://domain.com/callback.html?code=3717208cc602aba6cc0195157ecd2b6b&state…8d9#access_token=1-166020-17988851-e8f6b064d7ccd4&scope=non-expiring:7:105) onload @ VM2980 callback.html?code=3717208…&state=SoundCloud_Dialog_508d9:7

Firefox 50.1.0 Error: Permission denied to access property "SC" callback.html:1:1 Learn More

My callback.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Connect with SoundCloud</title>
  </head>
  <body onload="window.setTimeout(window.opener.SC.connectCallback, 1);">
    <p>
      This popup should automatically close in a few seconds
    </p>
  </body>
</html>

The JavaScript function (in AngularJS 1.6 component controller) that is triggered by a button on my page:

... 
      this.connect_sc = function () {
        debugger;
      // initiate auth popup
        SC.connect().then(function () {
          debugger;
          return SC.get('/me');
        }).then(function (me) {
          debugger;
          userPerma = me.permalink;
          setScUi(me.username, me.avatar_url);
          getPlaylists();
        });
      };
...

I tried to debug it putting some breakpoints. Here I don't get SC promise executed, it breaks only on the first debugger; after I click on my button.

Why is that and how to fix it?

1

There are 1 best solutions below

0
On

Same problem for me.

I fixed it with a redirection. When I was in my website without the "www" it didn't work because the callback is registered with "www".

I added a redirection to only have my website with "www" and now it works well!

Hope it'll help.