Soundcloud iframe stopped working under iOS

Question

I have written phoneGap/Cordova code that includes some soundcloud widget players in iframes. The code was running fine in desktop browsers, under android and iOS.

Today the iOS-version stopped playing music. I also tried running the code in mobile safari and on different iPhones and emulators with the same negative result.

All the other plattforms are still working as intended.

Xcode console doesn't show anything unusual but mobile safari shows the error:

>Unsafe JavaScript attempt to access frame with URL http://domainname/ from frame with URL http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/12345. Domains, >protocolls and ports must match.

I'm not sure this has been there before but it is the best I could find.

Here is the according part of the code:

    SC.get('/resolve', {
         url : 'http://soundcloud.com/' + trackURL[c]
    }, function(track) {
            SC.get('/tracks/' + track.id + '/comments', function(comments) {
                if (c == 0) {
                $("#track1").append("<div style='height:110px; white-space:normal;overflow:visible;'> <img src='" + track.artwork_url + "' class='trackTitle' > <img src='img/play.png'  id='play1' class='mainPlay'/> <h3 style='margin-top:75px;margin-left:120px; font-size:10px; position:absolute; line-height:10px;'> " + track.title + "</h3></div>");
                $("#track1").css("background", "none");
                $('#sc-widget1').attr("src", "http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/" + trackID[0]);
            }

    var widgetIframe = document.getElementById('sc-widget1');
    widget1 = SC.Widget(widgetIframe);

    $("#play1").on('click', function() {
        widget1.toggle();
    }

I wonder if this is really a cross-domain problem. Help is really appreciated.

Thanks!

Small addendum: When running on an physical iphone I sometimes get a:

Failed to load webpage with error: The operation couldn’t be completed. (NSURLErrorDomain error -999.)

But that's not always the case and it doesn't make a difference to the (non)functionality.

Answer 1

This could be due to the fact that the soundcloud js player will be loading resources from soundcloud's domain (JSON and the actual audio) which some browsers define as being insecure.

You could try whitelisting all domains as per http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html by using the wildcard character '*' to see if that works. If it does then you can narrow the whitelist down to the specific domains that you are loading content from.

I also just noticed that you have a reference in your code to w.soundcloud.com is the single w correct?