Unsafe Javascript Access from Iframe in Chrome Extension

Question

I'm building a Chrome Extension that will be using Iframes that load Flash content. Using Mootools in the Iframe, I'm creating a .swf object and then injecting it into itself. This Iframe, main.html, is inserting the flash object like so:

window.addEvent("domready", function () {
    var flashContainer = $("flash-container");

    new Swiff("http://www.example.com/content.swf", {
        "width":"100%",
        "height":"90%",
        "id":"flash-content"
    }).inject(flashContainer);
});

This produces the following error:

Unsafe JavaScript attempt to access frame with URL chrome-extension://......../index.html from frame with URL http://www.example.com/main.html. Domains, protocols and ports must match.

When I remove the inject portion of the code, I don't get the error. Also, when I use inject on other non-flash elements, such as a div, I don't get the error. I have also tried using the plain ol' appendChild javascript method only to get the same error.

Any idea as to why I would I get this error on a flash object only? And is there a way to add this flash element without getting this error?

Answer 1

@MishcaNix and @serg are right.

Any cross-domain call to a resource that isn't JSONP will raise this security error. You'll need to either find a way to inject the SWF content into a page on the same domain as the swf file, or take the SWF (if it's static) and make it a data URL (data:application/x-swf;base64, or somesuch). – MischaNix

Whenever a flash object is embedded in a cross-domain iframe, it will throw a cross-domain exception. This is true for Youtube and Vimeo.

For example, check out this jsfiddle with an iFrame embedded: http://jsfiddle.net/bkCdB/

<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/6V_DsL1x1uY?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/6V_DsL1x1uY?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>