Wie überwindet man „SecurityError: Blocked Cross-Origin Access' bei der Verwendung von Iframes?

Sicherheitsfehler: Cross-Origin-Zugriff blockiert

Beim Versuch, einen Iframe in Ihre HTML-Seite zu integrieren und mit JavaScript auf seine Elemente zuzugreifen, kann der folgende Fehler auftreten:

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

Dieser Fehler ist auf die Einhaltung der Same-Origin-Richtlinie durch den Browser zurückzuführen, einer Sicherheitsmaßnahme, die den Zugriff von Skripten verhindert Rahmen unterschiedlicher Herkunft. Ein Ursprung umfasst das Protokoll, den Hostnamen und den Port.

Problemumgehung

Während der direkte ursprungsübergreifende Skriptzugriff verboten ist, können Sie window.postMessage und das entsprechende Nachrichtenereignis verwenden, um die Kommunikation zwischen den herzustellen Rahmen:

Haupt Seite:

const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'https://your-second-site.example');

Iframe:

window.addEventListener('message', event => {
    // Verify the origin to ensure it's your site
    if (event.origin === 'https://your-first-site.example') {
        // Retrieve data from event.data
        console.log(event.data);
    }
});

Dieser Ansatz ermöglicht eine bidirektionale Kommunikation zwischen den Frames. Die ursprungsübergreifende Nachrichtenübermittlung kann auch auf Pop-ups und andere neue Fenster angewendet werden, die von der Hauptseite aus generiert werden.

Das obige ist der detaillierte Inhalt vonWie überwindet man „SecurityError: Blocked Cross-Origin Access' bei der Verwendung von Iframes?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!