Suche…
Parameter
| Attribut | Einzelheiten |
|---|---|
name | Legt den Namen des Elements fest, der zusammen mit a Tag verwendet werden soll, um die src des iframe zu ändern. |
width | Legt die Breite des Elements in Pixel fest. |
height | Legt die Höhe des Elements in Pixel fest. |
src | Gibt die Seite an, die im Frame angezeigt wird. |
srcdoc | Gibt den Inhalt an, der im Frame angezeigt wird, sofern der Browser ihn unterstützt. Der Inhalt muss gültiges HTML sein. |
sandbox | Wenn festgelegt, wird der Inhalt des Iframes als eindeutiger Ursprung behandelt, und Funktionen wie Skripte, Plugins, Formulare und Popups werden deaktiviert. Einschränkungen können durch Hinzufügen einer durch Leerzeichen getrennten Liste von Werten selektiv gelockert werden. Mögliche Werte finden Sie in der Tabelle in Anmerkungen. |
allowfullscreen | requestFullscreen() ob der Inhalt des iframe requestFullscreen() |
Bemerkungen
Ein iframe wird verwendet, um ein anderes Dokument in das aktuelle HTML-Dokument einzubetten.
Sie können iframes für die Anzeige verwenden:
- andere HTML-Seiten in derselben Domain;
- andere HTML-Seiten in einer anderen Domain (siehe unten - Richtlinien mit gleichem Ursprung);
- PDF-Dokumente (obwohl der IE möglicherweise Probleme hat, kann diese SO-Frage hilfreich sein);
Sie sollten einen Iframe als letzten Ausweg verwenden, da er Probleme mit dem Lesezeichen und der Navigation hat und es immer bessere Optionen als einen Iframe gibt. Diese SO-Frage sollte Ihnen helfen, mehr über die Höhen und Tiefen von Iframes zu erfahren.
Gleiche Ursprungspolitik
Einige Sites können nicht mit einem iframe angezeigt werden, da sie eine Richtlinie mit der Bezeichnung " Same-Origin-Richtlinie" erzwingen. Dies bedeutet, dass sich die Site, auf der sich der iframe befindet, in derselben Domäne befinden muss wie die anzuzeigende.
Diese Richtlinie gilt auch für die Bearbeitung von Inhalten, die sich in einem iFrame befinden. Wenn der iFrame auf Inhalte von einer anderen Domäne zugreift, können Sie nicht auf den Inhalt eines iFrame zugreifen oder ihn bearbeiten.
Das iframe-Element in W3C
sandbox
Wenn das sandbox Attribut gesetzt ist, werden dem iframe zusätzliche Einschränkungen hinzugefügt. Eine durch Leerzeichen getrennte Liste von Token kann verwendet werden, um diese Einschränkungen zu lockern.
| Wert | Einzelheiten |
|---|---|
allow-forms | Ermöglicht die Übermittlung von Formularen. |
allow-pointer-lock | Aktiviert die JavaScript-Zeiger-API. |
allow-popups | Popups können mit window.open oder <a target="_blank" |
allow-same-origin | Das iframe-Dokument verwendet seinen tatsächlichen Ursprung, anstatt einen eindeutigen zu erhalten. Bei Verwendung mit allow-scripts kann das iframe-Dokument das gesamte Sandboxing entfernen, wenn es aus demselben Ursprung wie das übergeordnete Dokument stammt. |
allow-scripts | Aktiviert Skripte. Das iframe-Dokument und das übergeordnete Dokument können möglicherweise mithilfe der postMessage() API miteinander kommunizieren. Bei Verwendung mit " allow-same-origin das iframe-Dokument das gesamte Sandboxing entfernen, wenn es aus demselben Ursprung wie das übergeordnete Dokument stammt. |
allow-top-navigation | Ermöglicht dem Inhalt des iframe, den Speicherort des Dokuments der obersten Ebene zu ändern. |
Grundlagen eines Inline-Frames
Der Begriff "IFrame" steht für Inline Frame. Es kann verwendet werden, um eine weitere Seite in Ihre Seite aufzunehmen. Dies ergibt einen kleinen Rahmen, der den genauen Inhalt der base.html .
<iframe src="base.html"></iframe>
Rahmengröße einstellen
Die Größe des IFrame kann mithilfe der Attribute width und height geändert werden, wobei die Werte in Pixeln dargestellt werden (HTML 4.01 erlaubt Prozentwerte, HTML 5 jedoch nur Werte in CSS-Pixeln).
<iframe src="base.html" width="800" height="600"></iframe>
Verwenden von Ankern mit IFrames
Normalerweise wird eine Änderung der Webseite in einem Iframe mit dem Iframe initiiert, z. B. durch Klicken auf einen Link im Ifame. Es ist jedoch möglich, den Inhalt eines IFrame außerhalb des IFrame zu ändern. Sie können ein Anker - Tag , dessen Verwendung href - Attribut wird auf die gewünschte URL und deren target zu den wichtigsten iframe gesetzt name - Attribut.
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
Verwenden des Attributs "srcdoc"
Das Attribut " srcdoc kann (anstelle des Attributs " src ) verwendet werden, um den genauen Inhalt des iframe als gesamtes HTML-Dokument anzugeben. Dies ergibt einen IFrame mit dem Text "IFrames are cool!"
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
Wenn das srcdoc Attribut nicht vom Browser unterstützt wird, srcdoc der srcdoc stattdessen auf das src Attribut zurück. Wenn jedoch die src und srcdoc vorhanden sind und vom Browser unterstützt werden, hat srcdoc Vorrang.
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
Wenn der Browser das srcdoc Attribut nicht unterstützt, zeigt er im obigen Beispiel stattdessen den Inhalt der base.html Seite an.
Sandboxen
Im Folgenden wird eine nicht vertrauenswürdige Webseite mit allen aktivierten Einschränkungen eingebettet
<iframe sandbox src="http://example.com/"></iframe>
sandbox attribute allow-scripts und allow-forms hinzu allow-scripts damit die Seite Skripts ausführen und Formulare senden sandbox attribute .
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
Wenn nicht vertrauenswürdiger Inhalt (z. B. Benutzerkommentare) in derselben Domäne wie die übergeordnete Webseite vorhanden ist, kann ein Iframe verwendet werden, um Skripts zu deaktivieren, während das übergeordnete Dokument mit JavaScript dennoch mit seinem Inhalt interagieren kann.
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
Das übergeordnete Dokument kann Ereignis-Listener hinzufügen und die Größe des IFrame an den Inhalt anpassen. Zusammen mit allow-top-navigation kann die Sandkasten-Box als Teil des übergeordneten Dokuments erscheinen.
Diese Sandbox ist kein Ersatz für die Desinfektion von Eingaben, sondern kann als Teil einer Tiefenverteidigungsstrategie verwendet werden .
Beachten Sie auch, dass diese Sandbox von einem Angreifer unterlaufen werden kann, der einen Benutzer dazu verleitet, die Quelle des Iframes direkt zu besuchen. Der HTTP-Header für Inhaltssicherheitsrichtlinie kann verwendet werden, um diesen Angriff zu mildern.