Politik gleicher Herkunft
Sie können<iframe> mit JavaScript nicht auf eine andere Herkunft zugreifen. Dies wäre eine große Sicherheitslücke, wenn Sie dies tun könnten. Für Richtlinienbrowser mit demselben Ursprung blockieren Skripte, die versuchen, auf einen Frame mit einem anderen Ursprung zuzugreifen .
Die Herkunft wird als unterschiedlich angesehen, wenn mindestens einer der folgenden Teile der Adresse nicht beibehalten wird:
<protocol>://<hostname>:<port>/...
Protokoll , Hostname und Port müssen mit Ihrer Domain identisch sein, wenn Sie auf einen Frame zugreifen möchten.
Hinweis: Internet Explorer nicht streng an diese Regel bekannt ist, finden Sie hier für weitere Details.
Beispiele
Folgendes würde passieren, wenn Sie versuchen, auf die folgenden URLs zuzugreifen http://www.example.com/home/index.html
URL RESULT
http://www.example.com/home/other.html -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80 -> Success (default port for HTTP)
http://www.example.com:2251 -> Failure: different port
http://data.example.com/dir/other.html -> Failure: different hostname
https://www.example.com/home/index.html:80 -> Failure: different protocol
ftp://www.example.com:21 -> Failure: different protocol & port
https://google.com/search?q=james+bond -> Failure: different protocol, port & hostname
Problemumgehung
Auch wenn Same Origin Policy Blöcke Skripte von den Inhalt der Seiten mit einer anderen Herkunft zugreifen, wenn Sie beide Seiten besitzen, können Sie dieses Problem mit umgehen window.postMessageund seine relative messageEreignismeldungen zwischen den beiden Seiten zu senden, wie folgt aus :
Auf Ihrer Hauptseite:
let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
Das zweite Argument postMessage()kann darin bestehen '*', keine Präferenz für den Ursprung des Ziels anzugeben. Wenn möglich, sollte immer ein Zielursprung angegeben werden, um zu vermeiden, dass die Daten, die Sie an eine andere Site senden, weitergegeben werden.
In Ihrem <iframe>(auf der Hauptseite enthalten):
window.addEventListener('message', event => {
// IMPORTANT: check the origin of the data!
if (event.origin.startsWith('http://your-first-site.com')) {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
} else {
// The data was NOT sent from your site!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});
Diese Methode kann in beide Richtungen angewendet werden , indem auch auf der Hauptseite ein Listener erstellt und Antworten vom Frame empfangen werden. Dieselbe Logik kann auch in Popups und grundsätzlich in jedem neuen Fenster implementiert werden, das von der Hauptseite generiert wird (z. B. mithilfe von window.open()), ohne Unterschied.
Deaktivieren der Richtlinie für denselben Ursprung in Ihrem Browser
Es gibt bereits einige gute Antworten zu diesem Thema (ich habe sie gerade beim Googeln gefunden). Für die Browser, in denen dies möglich ist, werde ich die entsprechende Antwort verknüpfen. Beachten Sie jedoch, dass das Deaktivieren der Richtlinie mit demselben Ursprung nur Ihren Browser betrifft . Wenn Sie einen Browser mit deaktivierten Sicherheitseinstellungen für denselben Ursprung ausführen, erhält jede Website Zugriff auf Ressourcen mit unterschiedlichen Ursprüngen. Dies ist daher sehr unsicher und sollte NIEMALS durchgeführt werden, wenn Sie nicht genau wissen, was Sie tun (z . B. Entwicklungszwecke) .
Access-Control-Allow-Originnicht für iFrames gilt, sonderncanvas.drawImagenur für XHRs, Schriftarten, WebGL und . Ich glaube, daspostMessageist die einzige Option.