Erfassen Sie Mouedown-Ereignisse mit übergeordnetem Element, das Cross-Domain-Iframes enthält: Prinzipien und Einschränkungen

In diesem Artikel wird die Herausforderung untersucht, Mousedown-Ereignisse an Eltern-Divs zu erfassen, die Cross-Domain-IFrames enthalten. Das Kernproblem besteht darin, dass die Browser-Sicherheitsrichtlinien (gleichorientierte Richtlinien) das Direkt-DOM-Ereignis verhindern, den Inhalt des Cross-Domain-Iframe zuzuhören. Diese Art der Ereigniserfassung kann nur erreicht werden, es sei denn, der Name der Iframe -Quelldomänenname wird kontrolliert und CORs konfiguriert. Der Artikel erläutert diese Sicherheitsmechanismen im Detail und ihre Einschränkungen für Ereignisinteraktionen und liefert mögliche Alternativen.

Einführung: Verständnis des Kerns des Problems

In der Webentwicklung müssen wir häufig Benutzerinteraktionsereignisse in DOM -Elementen wie MouseDown anhören. Wenn jedoch ein Iframe in einem übergeordneten DIV -Element einen Iframe enthält, insbesondere wenn der vom Iframe geladene Inhalt aus einem anderen Domain -Namen stammt, tritt er auf unerwartete Schwierigkeiten beim Versuch auf, Mousedown -Ereignisse auf dem übergeordneten Div zu erfassen. Der Entwickler stellt fest, dass der MouseDown -Ereignis -Hörer auf der übergeordneten Div nicht ausgelöst wird, wenn der Mausklick im Iframe auftritt.

Betrachten Sie die folgende HTML -Struktur und den Jquery Event -Hörcode:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.13/jquery.min.js"> </script>
<div class="test">
    <a href="/"> test </a>
</div>

<div class="test">
    <iframe src="https://www.google.com/" style="width: 400px; Höhe: 300px; Grenze: 1px solide #ccc;"> </iframe>
</div>

 JQuery (". Test"). On ("MouseDown", () => console.log ("Test"));

In diesem Code wird Console.log ("Test") in diesem Code auf das Tag im ersten Div.test klickt. Wenn der Benutzer jedoch im zweiten Div.Test auf den Iframe -Bereich klickt, löst das MouseDown -Ereignis den Hörer nicht auf dem übergeordneten Div aus, selbst wenn das Iframe ein Kind des Div.Test ist. Der grundlegende Grund dafür liegt in der "gleichorientierten Richtlinie" im Browser-Sicherheitsmodell.

Browser Security Eckpfeiler: Gleiche Ursprungsrichtlinie

Die gleichorientierte Richtlinie ist ein wichtiger Sicherheitsmechanismus im Sicherheitsmodell von Webanwendungen. Es begrenzt, wie Dokumente oder Skripte mit unterschiedlichen Quellen (unterschiedliches Protokoll, Domänenname oder Portnummer unterschiedlich sind, dh unterschiedliche Quellen) interagieren. Wenn beispielsweise eine Seite einen Iframe aus einem anderen Domänennamen lädt, kann JavaScript auf dieser Seite nicht direkt auf den DOM -Inhalt des IFRame, JavaScript -Objekte oder auf Ereignisse zugreifen, die im Iframe aufblasen werden.

Speziell für das Problem der Iframe -Ereigniserfassung, wenn der Benutzer auf den internen Bereich des Iframe klickt:

1. Das Mausklickereignis wird zunächst vom Browser -Kontext des Iframe selbst erfasst.
2. Da der vom Iframe geladene Inhalt aus verschiedenen Quellen stammt (z. B. https://www.google.com/ unterscheidet sich von der Quelle der übergeordneten Seite), beschränkt die gleiche Richtlinie den Zugriff auf den IFrame-Inhalt durch die übergeordnete Seite JavaScript streng.
3. Dies bedeutet, dass Ereignisse im Iframe nicht zum Dom -Baum seines übergeordneten Dokuments sprudeln. Der Ereignishörer des übergeordneten Dokuments kann Ereignisse, die in einem Cross-Domain-Iframe stattfinden, nicht "sehen" oder erfassen ". Dies soll verhindern, dass bösartige Websites durch Iframes einspritzen und vertrauliche Informationen von Benutzern auf anderen Websites stehlen oder nicht autorisierte Vorgänge ausführen.

Wechselwirkung zwischen Cross-Domänen-Ressourcenfreigabe (CORS) und IFRames

Cross-Origin-Ressourcenfreigabe (CORS, Cross-Origin-Ressourcenfreigabe) ist ein Mechanismus, mit dem Browser homologe Richtlinien entspannen können. Es informiert den Browser, indem Sie die Serverreaktion spezifische HTTP-Header wie Access-Control-Allow-Origin-Reaktion hinzufügen und Webanwendungen von bestimmten Quellen ermöglichen, um auf ihre Ressourcen zuzugreifen.

Obwohl CORs Cross-Domänen-Datenanforderungen implementieren können, liefert es keine direkte Lösung für das DOM-Ereigniserfassungsproblem in einem Iframe.

• CORS -Konfiguration: CORs müssen vom Quellserver des IFRame -Inhalts konfiguriert werden (z. B. dem Server von https://www.google.com/). Wenn der Entwickler den Quellserver des IFrame nicht steuern kann, kann CORS nicht konfiguriert werden.
• Der Hauptzweck von CORs: CORs wird hauptsächlich verwendet, um Cross-Domain-HTTP-Anforderungen (wie XMLHTTPrequest oder Abruf) zu ermöglichen. Es wird normalerweise nicht direkt verwendet, um nahtlose DOM -Ereignisblasen oder direkte DOM -Operationen zwischen übergeordneten und untergeordneten Dokumenten zu implementieren. Auch wenn der Quellserver des IFRame mit CORS konfiguriert ist, kann das JavaScript des übergeordneten Dokuments immer noch nicht direkt auf die DOM -Struktur des IFRame zugreifen oder auf Ereignisse in ihm anhören. Dies liegt daran, dass IFrames ihren unabhängigen Browserkontext und den sicheren Sandbox beibehalten.

Sofern Sie den Quelldomänennamen des IFRame nicht steuern und seinen Server konfigurieren können, wodurch Ereignisinformationen durch bestimmte APIs (z. B. Postmessage) oder Berechtigungen bestimmter Browser-Erweiterungen bestehen können, kann das Problem der Cross-Domänen-Iframes nicht das Direkter-Ereigniserfassungsproblem lösen.

Praktische Einschränkungen und Alternativen

Zusammenfassend ist es nicht möglich, Mouedown -Ereignisse direkt im Inneren zu erfassen oder sie daran zu hindern, Ereignisse zu erfassen, ohne die Iframe -Quelldomäne zu kontrollieren. Dies ist eine grundlegende Komponente des Webbrowser -Sicherheitsmodells, mit dem die Privatsphäre des Benutzers geschützt und böswillige Skriptangriffe verhindern sollen.

Abhängig von Ihren spezifischen Bedürfnissen gibt es jedoch einige Alternativen:

1. Homogener Iframe: Wenn der vom Iframe geladene Inhalt der übergeordneten Seite übereinstimmt (dh, sind das Protokoll, der Domänenname und die Portnummer genau gleich), dann können Sie über die Iframe auf das DOM des Iframe zugreifen.

    // unter der Annahme, dass der Iframe homologe const iframe = document.querySelector ('iframe') ist;
   if (iframe && iframe.contentWindow) {
       Iframe.ContentWindow.Document.AdDeVentListener ('MouseDown', (Ereignis) => {
           console.log ('MouseDown in gleichem Origin-Iframe!', Event.target);
       });
   }

   Dies gilt jedoch offensichtlich nicht für Szenarien wie https://www.google.com/, die den Cross-Domain-Inhalt laden.

2. Transparent Overlay: Wenn Ihr Ziel feststellt, ob der Benutzer auf einen Bereich klickt, der den Iframe enthält (anstatt mit dem Inhalt im Iframe zu interagieren), können Sie eine transparente Div -Overlay über dem Iframe platzieren und auf MouseDown -Ereignisse auf dieser Überlagerung anhören. Der Vorteil dieses Ansatzes besteht darin, dass Sie Klick -Ereignisse erfolgreich erfassen können, da das Overlay Teil des übergeordneten Dokuments ist und der gleiche Ursprung wie das übergeordnete Dokument ist. Der Nachteil besteht jedoch darin, dass das Overlay eine Interaktion zwischen dem Benutzer und dem Iframe -Inhalt vollständig blockiert (z. B. Klicken auf Links im IFRame, Scrollen des IFrame -Inhalts, Ausfüllen von Formularen usw.).

   Beispielcode:

    <div class="test container" style="Position: relativ; Breite: 400px; Höhe: 300px; Rand: 1px solide #CCC;">
       <div class="iframe-überlay" style="Position: absolut; ober: 0; links: 0; Breite: 100%; Höhe: 100%; Z-Index: 10; Hintergrund: transparent;"> </div>
       <iframe src="https://www.google.com/" style="width: 100%; Höhe: 100%; Position: Relativ; Z-Index: 1;"> </iframe>
   </div>

    JQuery (". Iframe-Overlay"). On ("MouseDown", () => {
       console.log ("Overlay geklickt! (Iframe -Interaktion ist blockiert)");
   });

   Diese Lösung eignet sich für Szenarien, in denen nur wissen muss, dass der Benutzer den Iframe -Bereich "berührt" und nicht tatsächlich mit dem IFrame -Inhalt interagieren muss.

Zusammenfassen

In der Webentwicklung werden Versuche, MouseDown-Ereignisse auf dem übergeordneten Element mit einem Cross-Domain-Iframe zu erfassen, durch die homologe Richtlinie des Browsers beim Klicken im Iframe streng eingeschränkt. Diese Einschränkung ist auf wichtige Sicherheitsgründe zurückzuführen und soll Benutzer vor böswilligen Websites schützen. Sofern der IFrame nicht mit der übergeordneten Seite übereinstimmt oder Sie den Quellserver des IFRame steuern und spezifische APIs wie Postmessage für die Kreuzdokumentkommunikation verwenden können, ist es normalerweise nicht möglich, solche Ereignisse direkt zu erfassen. Wenn Sie nur Flächenklicks anstelle der tatsächlichen Wechselwirkungen erkennen müssen, können transparente Overlays eine praktikable Alternative sein. Beachten Sie jedoch, dass sie Interaktionen in allen IFRames blockieren. Das Verständnis dieser Sicherheitsbeschränkungen ist für Front-End-Entwickler von entscheidender Bedeutung und kann uns helfen, sicherere und browserkonforme Webanwendungen zu entwerfen.

Das obige ist der detaillierte Inhalt vonErfassen Sie Mouedown-Ereignisse mit übergeordnetem Element, das Cross-Domain-Iframes enthält: Prinzipien und Einschränkungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!