Event fired from iframe

Question

I integrate a third-party photo upload service with my application. So I upload it to my page through an iframe.

When the download service is loading my photo, it can trigger a specific event on my parent ie page:

parent.$('body').trigger('photoUpload.complete');

or runs a function on the parent page ie:

window.parent.reloadParentPage();

Anyway, I get this warning on my Chrome console:

Uncaught SecurityError: Blocked a frame with origin "https://photoupload.com" from accessing a frame with origin "https://website.com".

I understand that this is the security issue described here:

http://www.w3.org/TR/2008/WD-access-control-20080912/

So, I wanted the source to https://photoupload.comhave access to my site. I did this in my controller:

after_filter :set_access_control_headers

Then the method:

def set_access_control_headers 
  headers['Access-Control-Allow-Origin'] = "https://photoupload.com" 
  headers['Access-Control-Request-Method'] = '*' 
end

, , https://photoupload.com - , https://website.com - . ( , , ), .

?

, :

jQuery iframe

, : ? ?

II

? //- iframe , -

Answer 1

, IE6 IE7, iframe window.postMessage(...).

, - :

window.parent.postMessage('photoUpload.complete', 'https://website.com');

( '*', iframe , , , , , , ).

-

if (!window.addEventListener) {
    // IE8 support (could also use an addEventListener shim)
    window.attachEvent('onmessage', handleMessage);
} else {
    window.addEventListener('message', handleMessage, false);
}

function handleMessage(event) {
  // check where the message is coming from - may be overkill in your case
  if (event.origin==='https://photoupload.org') {
    // check event type - again probably not required
    if (event.data==='photoUpload.complete') {
      // do your thing
    }
  }
}

iframe, , :

iframe.contentWindow.postMessage(...)

IE7 IE6, postMessage() , - http://easyxdm.net/wp/