Error trying to access a iframe in JavaScript
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.htmlfrom 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&auto_play=false&show_artwork=true&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
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