Was ist der Unterschied zwischen srcdoc = "..." und src = "data: text / html, ..." in einem <iframe>?

72

Was ist zum Beispiel der Unterschied zwischen diesen:

<iframe srcdoc="<p>Some HTML</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>

Demo

Und falls sie genau gleich sind, warum hat HTML5 ein srcdocAttribut hinzugefügt ?

Bearbeiten

Vielleicht war ich nicht klar genug. Ich vergleiche nicht srcmit srcdoc, sondern srcverwende Text / HTML-Daten-URI mit srcdoc.

Dann, wenn das Funktionsdiagramm so ist

                   | src Attribut | srcdoc-Attribut
 -------------------------------------------------- ------------------ ------------------.
  URL | Ja | Nein ohne src (*)
  HTML-Inhalt | Ja, mit Daten-URI | Ja

warum wird srcdocbenötigt?


(*) Hinweis :

Es scheint srcdocverwendet werden zu können, um eine Seite nach URL ( Demo ) zu laden , wobei ein Unterrahmen mit dem srcAttribut verwendet wird:

<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>
Oriol
quelle

Antworten:

47

In den anderen Antworten werden einige oberflächliche Unterschiede aufgeführt, aber es fehlt wirklich die Markierung des Hauptunterschieds, der erklärt, warum Browser / Spezifikationsschreiber im Wesentlichen etwas duplizieren würden, das bereits vorhanden ist:

<iframe src="data:...untrusted content" sandbox /><- Sicher in modernen Browsern, unsicher in älteren Browsern ohne Sandbox-Unterstützung

<iframe srcdoc="...untrusted content" sandbox /><- Sicher in modernen Browsern, sicher (wenn auch nicht funktionsfähig) in älteren Browsern

Diese neue Syntax bietet Inhaltsautoren eine Möglichkeit, ihre Benutzer zu schützen, selbst wenn sie möglicherweise ältere Browser verwenden. Ohne sie würden Inhaltsautoren die Sandbox-Funktion überhaupt nicht verwenden, und sie würde keine Verwendung sehen.

Fabio Beltramini
quelle
Wenn der Hauptvorteil nicht vertrauenswürdige Inhalte sind, warum sollten Sie festlegen, dass sie den Inhalt inline enthalten - stammen die meisten nicht vertrauenswürdigen Inhalte nicht von externen URLs? Das heißt, warum nicht ein sandboxedsrcAttribut, das eine [Daten] URI akzeptiert? (Es würde auch verhindern, dass ein zukünftiger Browser srcdoc implementiert, ohne Sandbox zu implementieren.)
Beni Cherniavsky-Paskin
Weil Autoren bereits externe URLs (in einer separaten Domain) verwenden können, um nicht vertrauenswürdige Inhalte bereitzustellen.
Fabio Beltramini
Was meinst du mit sicher? Es kann nicht auf die Einbettungsseite zugreifen? Der Einbettungszahler kann nicht darauf zugreifen? Oder beides? Oder was
Gregory Magarshak
Ansonsten, was ist der Sinn davon über eine reguläre Div- oder HTML-Komponente
Gregory Magarshak
In jedem Artikel über die "Sandbox" von iframe wird erläutert, welche Vorteile sie bietet
Fabio Beltramini,
18

Von MDN:

1. Der Inhalt der Seite, den der eingebettete Kontext enthalten soll. Es wird erwartet, dass dieses Attribut zusammen mit der Sandbox und nahtlosen Attributen verwendet wird. Wenn ein Browser das Attribut srcdoc unterstützt, überschreibt er den im Attribut src angegebenen Inhalt (falls vorhanden). Wenn ein Browser das srcdoc-Attribut NICHT unterstützt, wird stattdessen die im src-Attribut angegebene Datei angezeigt (falls vorhanden).

Das srcdocAttribut überschreibt also den mit dem srcAttribut eingebetteten Inhalt .

Demo


Außerdem wird das, was Sie über das folgende Snippet sagen, data:text/htmlals Daten-URI bezeichnet und weist Einschränkungen auf.

2. Daten-URIs dürfen nicht größer als 32.768 Zeichen sein.

1. MDN , 2. MSDN

Mr. Alien
quelle
"Das srcdocAttribut überschreibt also den mit dem srcAttribut eingebetteten Inhalt ." Anscheinend nicht in Firefox 24, ich sehe zwei IFrames mit der Microsoft-Website darin.
Marcel Korpel
@MarcelKorpel Die erste Version von Firefox, die unterstützt, srcdocist 25 ( developer.mozilla.org/en-US/docs/Web/HTML/Element/… )
Oriol
1
@ MrAlien Guter Punkt zur Längenbeschränkung von Daten-URIs im Gegensatz zu HTML-Attributen, die keine Begrenzung haben . Wie auch immer, es scheint, dass das Limit durch die Microsoft-Implementierung auferlegt wird, da MDN nichts über ein Limit aussagt und der RFC-Standard nur sagt: " Beachten Sie, dass einige Anwendungen, die URLs verwenden, möglicherweise ein Längenlimit auferlegen "
Oriol
@MarcelKorpel Schauen Sie sich nahtlose Attribute und andere neuere HTML5-Attribute an und Sie werden erfahren, warum Sie srcdoc benötigen
Mr. Alien
@Oriol danke und ja, mdn gibt keine Grenzen an, aber aamsure uri haben Grenzen
Mr. Alien
15

Iframe mit srcAttribut mit HTML-Inhalt ist domänenübergreifend,

Iframe mit srcDocAttribut mit HTML-Inhalt ist jedoch nicht domänenübergreifend

Devin Zhang
quelle
2
Das ist ein guter Punkt. Chrome behandelt Daten-URIs als domänenübergreifend. Firefox behandelt sie als denselben Ursprung, nicht sicher, was Edge tut.
Oriol
1
Was meinst du mit "nicht domänenübergreifend"?
Gregory Magarshak
1
@GregoryMagarshak "Nicht domänenübergreifend", dh der Iframe-Inhalt wird so behandelt, als stamme er aus derselben Domain wie die übergeordnete Seite. Daher wird es nicht durch eine Richtlinie mit gleichem Ursprung des Browsers eingeschränkt, die normalerweise verhindert, dass der Browser auf den Inhalt der Remote-Seite zugreift, wie dies bei Verwendung von src = 'some-url.com' der Fall wäre. developer.mozilla.org/en-US/docs/Web/Security/…
Johny, warum
13

Zum Zeitpunkt des Schreibens ermöglicht srcdoc in Chrome (v36) das Setzen und Abrufen von Cookies, während die Verwendung von src mit Daten-URL nicht:

Nicht erfasster Sicherheitsfehler: Fehler beim Lesen der Eigenschaft "Cookie" aus "Dokument": Cookies sind in den URLs "Daten:" deaktiviert

Dies mag für Sie wichtig sein oder auch nicht, schließt jedoch die Verwendung von Daten-URLs in der von mir erstellten Anwendung aus, was schade ist, da der IE derzeit srcdoc (v11) natürlich nicht unterstützt.

Wombling - Chris Paine
quelle
1
Guter Punkt. Daten-URIs haben in einigen Browsern Einschränkungen und srcdocfunktionieren daher in diesen Fällen besser.
Oriol
In Chromium 81 werden übergeordnete Rahmenhintergründe und Schriftstile ebenfalls in den Iframe eingefügt, wodurch noch mehr Nutzen entsteht.
Josh Habdas
7

Ein weiterer bemerkenswerter Unterschied besteht darin, dass srcAttribute mit Daten-URI URI-Prozentcodierungsregeln unterstützen, während srcdocdies nicht der Fall ist, da sie die reguläre HTML-Syntax unterstützen.

Diese Quellen ergeben unterschiedliche Ergebnisse:

<iframe srcdoc="<p>hello%20world</p><h1>give%0D%0Ame%0D%0Asome%24</h1>"></iframe>

<iframe src="data:text/html;charset=UTF-8,<p>hello%20datauri<p><h1>give%0D%0A me%0D%0Asome%24</h1>"></iframe>

Ich habe auch einen Unterschied beim Parsen von js-Skripten innerhalb des Attributwerts festgestellt (es ist wahrscheinlich mehr als nur eine prozentuale Codierung), aber ich habe die Regel noch nicht herausgefunden ...

maioman
quelle
Der Inhalt von srcmuss URL-codiert sein, um korrekt behandelt zu werden. In dieser Frage finden Sie Einzelheiten dazu.
Benutzer
Ich hatte nicht viel Glück, dass URI-Attributwerte für größere Textdateien codiert wurden. Was für mich funktioniert hat, war, die Eingabe vorher mit recode (1) in bash zu bereinigen.
Josh Habdas
0

In Ihrem Beispiel sind die beiden Formen funktional identisch. Sie können jedoch beide srcund srcdocAttribute verwenden, sodass Nicht-HTML5-Browser die srcVersion verwenden können, während HTML5-Browser die srcdocVersion zusammen mit den Attributen sandboxund verwenden können seamless, die mehr Flexibilität bei der Behandlung eines iFrames bieten.


quelle
Aber sandboxund seamlessAttribute können auch mit srcAttributen verwendet werden, nicht wahr? Es scheint mir, dass es srcflexibler ist alssrcdoc
Oriol
@Oriol, ich denke, meine Antwort geht direkt dahin, warum dies wichtig ist, nicht als Fehler, sondern als Feature
Fabio Beltramini
-3

srcdoc: Der Inhalt der Seite, die der eingebettete Kontext enthalten soll. Es wird erwartet, dass dieses Attribut zusammen mit der Sandbox und nahtlosen Attributen verwendet wird. Wenn ein Browser das srcdoc-Attribut unterstützt, überschreibt er den im src-Attribut angegebenen Inhalt (falls vorhanden). Wenn ein Browser das srcdoc-Attribut NICHT unterstützt, wird stattdessen die im src-Attribut angegebene Datei angezeigt (falls vorhanden).

src: Die URL der einzubettenden Seite.

Saransh Sharma
quelle
6
Das srcAttribut kann jedoch auch den HTML-Inhalt der Seite enthalten, indem Daten-URIs verwendet werden
Oriol
-4

Der Hauptunterschied besteht darin, dass das Attribut 'src' die Adresse des Dokuments enthält, das Sie in das Tag einbetten möchten.

Andererseits enthält 'srcdoc'attribute den HTML-Inhalt der Seite, die im Inline-Frame angezeigt werden soll.

Der Hauptnachteil von srcdoc ist, dass es nicht in allen Browsern unterstützt wird, während src mit allen Browsern kompatibel ist.

Eine ausführliche Erklärung finden Sie unter folgendem Link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

RR
quelle
6
Das srcAttribut kann jedoch auch den HTML-Inhalt der Seite enthalten, indem Daten-URIs verwendet werden
Oriol,