1. Zuhause
  2. Frage und Antwort
  3. Crossdomäne postMessage, identifizieren iFrame

Crossdomäne postMessage, identifizieren iFrame

2014-05-13 12 views
13

Ich verwende postMessage, um Ereignisse von einem iframe zu seinem übergeordneten Dokument zu senden. Ich habe die Kontrolle über beide Seiten, aber der Inhalt kommt aus zwei verschiedenen Bereichen.Crossdomäne postMessage, identifizieren iFrame

enter image description here

Mein einfaches Problem ist, dass ich nicht die iFrame identifizieren können in der es Eltern Callback-Methode ist. Die Implementierung sieht wie folgt aus:

Im iFrame:

parent.postMessage(JSON.stringify({action: "closeView" }),'*');

In dem übergeordneten Fenster:

window.addEventListener('message',function(event) { 
if(event.origin !== 'https://example.com') 
    return; 

    // Parse message back to json 
    var messageObject = JSON.parse(event.data); 
    var source = event.source; 
    /* this is returning: Window -URL- */ 
    console.log(source); 
    /* This will throw Permission denied, although this code is inside of "parent" */ 
    console.log(source.parentNode); 
},false);

Ich möchte ein bestimmtes übergeordnetes Element des iframe identifizieren, die befindet sich (logisch) innerhalb des übergeordneten Dokuments.

Wenn ich versuche, event.source.parentNode oder einige jQuery auf dem Objekt zu verwenden, sagt Firefox, ich kann diese XSS nicht tun, um zu verhindern, Fehler: Error: Permission denied to access property 'parentNode'

Wie kann ich das übergeordnete Element des iFrame erhalten, dass die ausgelöste postMessage Ereignis-Listener?

Quelle

2014-05-13 Nico O

Antwort

17

können Sie Fenster Namen für diese, wie sie von iframe-Tag iframe Kontext übergeben.

Mutter doc:

<iframe name=fr2 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20window.name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe> 
<iframe name=fr3 src="data:text/html,%3Chtml%3E%0A%20%3Cscript%3E%20parent.postMessage%28%7Bname%3A%20name%7D%2C%20%22*%22%29%3B%3C/script%3E%0A%3C/html%3E"></iframe> 

<script>onmessage = function(e){ // use real event handlers in production 
     alert("from frame: " + e.data.name); 
};</script>

iframe doc:

<html> 
<script> parent.postMessage({name: name}, "*");</script> 
</html>

die "FR2" alarmiert, dann "FR3". können Sie dann einfach den Namen attrib verwenden, um den iframe im übergeordneten DOM mithilfe von Attrib-CSS-Selektoren zu finden.

illustrative Demo von window.name + iframe Konzept: http://pagedemos.com/namingframes/

dies schmerzlich einfacher Ansatz ist auch immun gegen Probleme von gleich url iframes entstehen.

Quelle

2015-05-20 20:03:59 dandavis

+0

Sie haben recht, vielen Dank. Erhalten Sie nur 'window.name' innerhalb der'