Error trying to access a iframe in JavaScript

user1834464 picture user1834464 · Nov 19, 2012 · Viewed 12.1k times · Source

I'm trying to call the function SC.Widget from this little API: http://developers.soundcloud.com/docs/api/html5-widget, but I receive this error message in the Chrome inspector and I am stuck there.

Unsafe JavaScript attempt to access frame with URL file://localhost/Users/maxwell/Desktop/test/test.html from frame withURL

http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F67825032&auto_play=false&show_artwork=true&color=ff7700.

The frame requesting access has a protocol of 'http', the frame being accessed has a protocol of 'file'. Protocols must match.

<body>
    <iframe id="soundcloud" width="100%" height="166" scrolling="no" frameborder="no"
    src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F67825032&amp;auto_play=false&amp;show_artwork=true&amp;color=ff7700"></iframe>
    <script>
        Soundcloud();
    </script>
</body>


function Soundcloud() {
    var widget1 = SC.Widget(iframeElement.soundcloud);
    alert("widget1");
}

I know it's doing this for security reasons, but how do I modify the SoundCloud widget if I can't access the frame?

Thank you for helping!

Answer

redline picture redline · Nov 19, 2012

When accessing an iframe with JavaScript or making any JSON AJAX requests, you can only get access or a response when they are on the same domain. Otherwise, the server must explicitly set:

Access-Control-Allow-Origin: *

in the headers. You can also provide a comma-separated list of allowed domains instead of *.

So you must test this in a development environment where the web page and data source are on the same domain, such as localhost, otherwise there isn't really anything else you can do unless you start-up chrome with --disable-web-security