SecurityError: Blockiert einen Frame mit Ursprung für den Zugriff auf einen rahmenübergreifenden Frame

Ich lade eine <iframe>in meine HTML-Seite und versuche, mit Javascript auf die darin enthaltenen Elemente zuzugreifen. Wenn ich jedoch versuche, meinen Code auszuführen, wird folgende Fehlermeldung angezeigt:

SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.

Können Sie mir bitte helfen, eine Lösung zu finden, damit ich auf die Elemente im Rahmen zugreifen kann?

Ich benutze diesen Code zum Testen, aber vergebens:

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

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) .

• Google Chrome
• Mozilla Firefox
• Safari
• Oper
• Microsoft Edge: nicht möglich
• Microsoft Internet Explorer

Ergänzung zu Marco Bonellis Antwort: Die derzeit beste Art der Interaktion zwischen Frames / Iframes ist die Verwendung window.postMessage, die von allen Browsern unterstützt wird

Überprüfen Sie den Webserver der Domain auf http://www.<domain>.comKonfiguration. X-Frame-Options Es handelt sich um eine Sicherheitsfunktion, die ClickJacking-Angriffe verhindert.

Wie funktioniert clickJacking?

1. Die böse Seite sieht genauso aus wie die Opferseite.
2. Dann hat es Benutzer dazu gebracht, ihren Benutzernamen und ihr Passwort einzugeben.

Technisch hat das Böse eine iframemit der Quelle zur Opferseite.

<html>
    <iframe src='victim_domain.com'/>
    <input id="username" type="text" style="display: none;/>
    <input id="password" type="text" style="display: none;/>
    <script>
        //some JS code that click jacking the user username and input from inside the iframe...
    <script/>
<html>

Wie die Sicherheitsfunktion funktioniert

Wenn Sie verhindern möchten, dass Webserveranforderungen innerhalb eines X gerendert werden, iframefügen Sie die X-Frame-Optionen hinzu

X-Frame-Optionen VERWEIGERN

Die Optionen sind:

1. SAMEORIGIN // Nur meiner eigenen Domain erlauben, mein HTML in einem Iframe zu rendern.
2. VERWEIGERN // erlaube nicht, dass mein HTML in einem Iframe gerendert wird
3. "ALLOW-FROM https://example.com/ " // Erlaube einer bestimmten Domain, meinen HTML- Code in einem Iframe zu rendern

Dies ist ein IIS-Konfigurationsbeispiel:

   <httpProtocol>
       <customHeaders>
           <add name="X-Frame-Options" value="SAMEORIGIN" />
       </customHeaders>
   </httpProtocol>

Die Lösung der Frage

Wenn der Webserver die Sicherheitsfunktion aktiviert hat, kann dies zu einem clientseitigen Sicherheitsfehler führen.

Für mich wollte ich einen 2-Wege-Handshake implementieren, was bedeutet:
- Das übergeordnete Fenster wird schneller geladen als der Iframe.
- Der Iframe sollte mit dem übergeordneten Fenster sprechen, sobald es fertig ist
- Das übergeordnete ist bereit, die Iframe-Nachricht zu empfangen und wiederzugeben

Dieser Code wird verwendet, um das weiße Etikett im Iframe mithilfe des Codes [CSS Custom Property]
:
Iframe festzulegen

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

Elternteil

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

Natürlich können Sie die Herkunft und den Text einschränken. Dies ist ein einfach zu
handhabender Code. Ich fand dieses Beispiel hilfreich: [ Domainübergreifendes
Messaging mit postMessage]

Ich möchte eine Java Spring-spezifische Konfiguration hinzufügen, die sich darauf auswirken kann.

In der Website oder Gateway-Anwendung gibt es eine contentSecurityPolicy-Einstellung

Im Frühjahr finden Sie die Implementierung der Unterklasse WebSecurityConfigurerAdapter

contentSecurityPolicy("
script-src 'self' [URLDomain]/scripts ; 
style-src 'self' [URLDomain]/styles;
frame-src 'self' [URLDomain]/frameUrl...

...

.referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN)

Der Browser wird blockiert, wenn Sie hier keinen sicheren externen Inhalt definiert haben.

Wenn Sie die Kontrolle über den Inhalt des Iframes haben, dh wenn er lediglich in einem Cross-Origin-Setup wie Amazon Mechanical Turk geladen wird, können Sie dieses Problem mit dem umgehen <body onload='my_func(my_arg)'> Attribut für das innere HTML .

Verwenden Sie beispielsweise für das innere HTML den thisParameter html (yes - thisist definiert und bezieht sich auf das übergeordnete Fenster des inneren Body-Elements):

<body onload='changeForm(this)'>

Im inneren HTML:

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>

• Öffnen Sie das Startmenü
• Geben Sie windows + R ein oder öffnen Sie "Ausführen"
• Führen Sie den folgenden Befehl aus.

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security