Event triggering from iframe

Question

I'm integrating a third party photo upload service with my app. So I'm loading it in my page via iframe.

When the upload service is done with uploading my photo it can either trigger certain event to my parent page i.e :

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

or it triggers a function in the parent page i.e :

window.parent.reloadParentPage();

In any case I get this warning in my chrome console :

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

I realize this is a security issue as described here :

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

So I wanted to enable the origin https://photoupload.com to access 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

Please not that https://photoupload.com is the photo upload service and https://website.com is my website. (Imaginary names for example sake), but they are both hosted on heroku.

How do I make this work?

Saw similar questions that people had success with this :

Triggering a jQuery event from iframe

Update

Maybe a better question would be, in which app should I set the headers? I was assuming in my app?

Update II

Is there a better way to do this? Send action/event/something from iframe to the parent page, so the parent page can react in some way

It would help a lot if you used sane/short/meaningful domain names. Heroku is not a reason in here, so this information gives us nothing. Said that, you should set headers in parent page, allowing access from iframe. You can at first try setting `Access-Control-Allow-Origin: *` on both sides and see if this resolves the problem. — Mike Szyndel, May 08 '14 at 11:58
@MichaelSzyndel thanks for you response Michael. I edited the question I hope the names make more sense now. Website.com is my website and photoupload.com is the url I'm embeding in the iframe. One question, why do I need to allow origin on the both sides? — Gandalf StormCrow, May 08 '14 at 12:23
You probably don't but it's a good starter. If this works then you can try removing it one one side (the iframe content) and retest. I would suspect that browser behaviour will differ greatly in here so top-down approach makes more sense to me. — Mike Szyndel, May 08 '14 at 12:26
@MichaelSzyndel ok thanks I will try that then and see if that works, is there maybe a better way of doing the thing I'm trying to accomplish. Letting the parent page know when something happened in the iframe, in some way. I've tried with invoking a function on parent page or invoking a event observed by a listener on a parent page — Gandalf StormCrow, May 08 '14 at 12:32
Never did anything like that to be honest but I think that's only reasonable and standards-compliant way to do it. — Mike Szyndel, May 08 '14 at 13:25
[link](http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) this link has more info on allowing cross domain access. Maybe you are missing one of the "allow" header mentioned in the last answer. Also pay attention to "options" request that is recommended by W3 — Ori Price, May 10 '14 at 07:56
Do you have access (i.e. can modify) to frame's script (the one that gets called after upload is done)? It seems that `Access-Control-Allow-Origin` is about http requests while you need pages interaction. — Artem Sobolev, May 10 '14 at 12:47
Yes I got access to everything, both the service and the app and I can modify either of those two. — Gandalf StormCrow, May 10 '14 at 19:50
The access control headers are not going to do it for you - as Barmaley.exe points out they are for XHR requests, not inter-window communication - you need to use postMessage or an alternative. Good news that you can modify the service - my answer should work for you then. — CupawnTae, May 11 '14 at 08:53
Cant you create a trigger on closing the iframe ? after uploading the photo ? — Siva, May 14 '14 at 12:53

CupawnTae · Accepted Answer · 2014-05-13T18:08:52.950

As long as you don't have to support IE6 or IE7, the preferred way to send cross-domain messages between an iframe and its parent is to use window.postMessage(...).

Since you have the ability to modify the upload service, you should have it invoke something like this:

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

(the second parameter can be set to '*' to allow the iframe to send messages regardless of the containing page's domain, but that's correspondingly less secure - may not be relevant in your case though as no actual data is being sent).

and your site would use something like

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
    }
  }
}

And if you want to send messages back from the outer page to the iframe, it's basically the same setup but you send with:

iframe.contentWindow.postMessage(...)

If IE7 or IE6 support is required, postMessage() is not supported but you could use something like http://easyxdm.net/wp/

Thanks for your response. I don't need support for IE6 and IE7. But from IE 8 and onwards, what is the alternative to `addEventListener`? — Gandalf StormCrow, May 12 '14 at 12:44
I've added IE8 code. IE9 and onwards should use addEventListener. IE8 uses attachEvent as in the updated code. — CupawnTae, May 12 '14 at 13:09

score 0 · Answer 2 · answered Dec 08 '20 at 00:37

I guess this line should work as well

window.parent.$(window.parent.document).trigger('photoUpload.complete');

Explanation: In your code parent.$('body').trigger('photoUpload.complete'); 'body' is referring to iframe body and not the parent window body.

Event triggering from iframe

2 Answers2

Linked