1. 4.8.5 iframe要素
      2. 4.8.6 embed要素
      3. 4.8.7 object要素

4.8.5 iframe要素

Element/iframe

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera15+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android14+

HTMLIFrameElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android37+Samsung Internet?Opera Android12.1+
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
src — リソースのアドレス
srcdociframe内でレンダリングする文書
nameナビゲート可能なコンテンツの名前
sandbox — ネストされたコンテンツのセキュリティルール
allowiframeのコンテンツに適用されるパーミッションポリシー
allowfullscreeniframeのコンテンツにrequestFullscreen()の使用を許可するかどうか
width — 横の次元
height — 縦の次元
referrerpolicy — 要素によって開始されたフェッチのためのリファラーポリシー
loading — 読み込み延期を決定するときに使用
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLIFrameElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString src;
  [CEReactions] attribute (TrustedHTML or DOMString) srcdoc;
  [CEReactions] attribute DOMString name;
  [SameObject, PutForwards=value] readonly attribute DOMTokenList sandbox;
  [CEReactions] attribute DOMString allow;
  [CEReactions] attribute boolean allowFullscreen;
  [CEReactions] attribute DOMString width;
  [CEReactions] attribute DOMString height;
  [CEReactions] attribute DOMString referrerPolicy;
  [CEReactions] attribute DOMString loading;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;
  Document? getSVGDocument();

  // also has obsolete members
};

iframe要素は、ナビゲート可能コンテンツを表す。

src属性は、その要素のコンテンツナビゲート可能が含まれるページのURLを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。itemprop属性がiframe要素で指定される場合、srcも指定されなければならない。

Element/iframe#attr-srcdoc

Support in all current engines.

Firefox25+Safari6+Chrome20+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android?

srcdoc属性は、その要素のコンテンツビゲート可能が含まれるページのコンテンツを与える。属性の値は、iframe srcdoc文書構築するために使用される。これは、 URLabout:srcdocに一致するDocumentである。

srcdoc属性が存在する場合、指定された順序で、次の構文上のコンポーネントを構成するHTML構文を使用した値を持たなければならない:

  1. 任意の数のコメントおよびASCII空白文字
  2. 任意で、DOCTYPE
  3. 任意の数のコメントおよびASCII空白文字
  4. html要素の形式で、文書要素
  5. 任意の数のコメントおよびASCII空白文字

上記の要件は、同様にXML文書で当てはまる。

ここでブログは、ブログの記事のコメントで、スクリプトインジェクションから追加の保護レイヤーとともに、この機能をサポートするユーザーエージェントのユーザーに提供するため、以下に記載のsandbox属性と一緒にsrcdoc属性を使用する:

<article>
 <h1>I got my own magazine!</h1>
 <p>After much effort, I've finally found a publisher, and so now I
 have my own magazine!Isn't that awesome?!The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it's going to be great!</p>
 <footer>
  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
 </footer>
 <article>
  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
 </article>
 <article>
  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
 </article>
 <article>
  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>hey that's earl's table.
<p>you should get earl&amp;amp;me on the next cover."></iframe>
 </article>

引用符をエスケープする必要がある方法に注意し(そうでなければsrcdoc属性が途中で終わるだろう)、サンドボックス化されたコンテンツに記載される生のアンパサンド(たとえば、URL内または文で)が二重にエスケープされる必要がある―最初にsrcdoc属性を解析するとき、一度アンパサンドが保持されるように、サンドボックスのコンテンツを解析するとき、誤ってもう一度アンパサンドを解析されるの防ぐために。

さらに、DOCTYPEiframe srcdoc文書で任意であり、かつhtmlhead、およびbody要素は任意の開始タグを持ち、しかもtitle要素はiframe srcdoc文書でも任意であるため、body要素のコンテンツだけが構文でリテラルに出現する必要があるため、srcdoc属性でのマークアップは、文書全体を表すにもかかわらず比較的簡潔にすることができる。他の要素は依然として存在するが、暗に存在するのみである。

HTML構文において、著者は属性の内容を包むためにU+0022 QUOTATION MARK文字(")を使用することを単に覚えておく必要があり、それからすべてのU+0026 AMPERSAND(&)およびU+0022 QUOTATION MARK(")文字をエスケープし、そしてsandbox属性を指定し、コンテンツの安全な埋め込みを確実にする必要がある。(さらに&amp;quot;ではなく&quot;になるよう、引用符を確実にするために、引用符の前にアンパサンドをエスケープすることを忘れないこと。)

XMLでU+003C LESS-THAN SIGN(<)文字も同様にエスケープする必要がある。属性値正規化を防ぐために、一部のXMLの空白文字―具体的にはU+0009 CHARACTER TABULATION(tab)、U+000A LINE FEED(LF)、U+000D CARRIAGE RETURN(CR)―もまたエスケープする必要がある。[XML]

src属性とsrcdoc属性が両方ともに指定される場合、srcdoc属性が優先される。これは、著者にsrcdoc属性をサポートしないレガシーユーザーエージェントに対してフォールバックURLを提供できる。


The iframe HTML element post-connection steps, given insertedNode, are:

  1. Create a new child navigable for insertedNode.

  2. If insertedNode has a sandbox attribute, then parse the sandboxing directive given the attribute's value and insertedNode's iframe sandboxing flag set.

  3. Process the iframe attributes for insertedNode, with initialInsertion set to true.

The iframe HTML element removing steps, given removedNode, are to destroy a child navigable given removedNode.

This happens without any unload events firing (the element's content document is destroyed, not unloaded).

Although iframes are processed while in a shadow tree, per the above, several other aspects of their behavior are not well-defined with regards to shadow trees. See issue #763 for more detail.

Whenever an iframe element with a non-null content navigable has its srcdoc attribute set, changed, or removed, the user agent must process the iframe attributes.

Similarly, whenever an iframe element with a non-null content navigable but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must process the iframe attributes.

To process the iframe attributes for an element element, with an optional boolean initialInsertion (default false):

  1. If element's srcdoc attribute is specified, then:

    1. Set element's current navigation was lazy loaded boolean to false.

    2. If the will lazy load element steps given element return true, then:

      1. Set element's lazy load resumption steps to the rest of this algorithm starting with the step labeled navigate to the srcdoc resource.

      2. Set element's current navigation was lazy loaded boolean to true.

      3. Start intersection-observing a lazy loading element for element.

      4. Return.

    3. Navigate to the srcdoc resource: Navigate an iframe or frame given element, about:srcdoc, the empty string, and the value of element's srcdoc attribute.

      The resulting Document must be considered an iframe srcdoc document.

  2. Otherwise:

    1. Let url be the result of running the shared attribute processing steps for iframe and frame elements given element and initialInsertion.

    2. If url is null, then return.

    3. If url matches about:blank and initialInsertion is true, then:

      1. Run the iframe load event steps given element.

      2. Return.

    4. Let referrerPolicy be the current state of element's referrerpolicy content attribute.

    5. Set element's current navigation was lazy loaded boolean to false.

    6. If the will lazy load element steps given element return true, then:

      1. Set element's lazy load resumption steps to the rest of this algorithm starting with the step labeled navigate.

      2. Set element's current navigation was lazy loaded boolean to true.

      3. Start intersection-observing a lazy loading element for element.

      4. Return.

    7. Navigate: Navigate an iframe or frame given element, url, and referrerPolicy.

The shared attribute processing steps for iframe and frame elements, given an element element and a boolean initialInsertion, are:

  1. Let url be the URL record about:blank.

  2. If element has a src attribute specified, and its value is not the empty string, then:

    1. Let maybeURL be the result of encoding-parsing a URL given that attribute's value, relative to element's node document.

    2. If maybeURL is not failure, then set url to maybeURL.

  3. If the inclusive ancestor navigables of element's node navigable contains a navigable whose active document's URL equals url with exclude fragments set to true, then return null.

  4. If url matches about:blank and initialInsertion is true, then perform the URL and history update steps given element's content navigable's active document and url.

    This is necessary in case url is something like about:blank?foo. If url is just plain about:blank, this will do nothing.

  5. Return url.

To navigate an iframe or frame given an element element, a URL url, a referrer policy referrerPolicy, and an optional string-or-null srcdocString (default null):

  1. Let historyHandling be "auto".

  2. If element's content navigable's active document is not completely loaded, then set historyHandling to "replace".

  3. If element is an iframe, then set element's pending resource-timing start time to the current high resolution time given element's node document's relevant global object.

  4. Navigate element's content navigable to url using element's node document, with historyHandling set to historyHandling, referrerPolicy set to referrerPolicy, and documentResource set to srcdocString.

Each Document has an iframe load in progress flag and a mute iframe load flag. When a Document is created, these flags must be unset for that Document.

To run the iframe load event steps, given an iframe element element:

  1. Assert: element's content navigable is not null.

  2. Let childDocument be element's content navigable's active document.

  3. If childDocument has its mute iframe load flag set, then return.

  4. If element's pending resource-timing start time is not null, then:

    1. Let global be element's node document's relevant global object.

    2. Let fallbackTimingInfo be a new fetch timing info whose start time is element's pending resource-timing start time and whose response end time is the current high resolution time given global.

    3. Mark resource timing given fallbackTimingInfo, url, "iframe", global, the empty string, a new response body info, and 0.

    4. Set element's pending resource-timing start time to null.

  5. Set childDocument's iframe load in progress flag.

  6. Fire an event named load at element.

  7. Unset childDocument's iframe load in progress flag.

This, in conjunction with scripting, can be used to probe the URL space of the local network's HTTP servers. User agents may implement cross-origin access control policies that are stricter than those described above to mitigate this attack, but unfortunately such policies are typically not compatible with existing web content.

If an element type potentially delays the load event, then for each element element of that type, the user agent must delay the load event of element's node document if element's content navigable is non-null and any of the following are true:

If, during the handling of the load event, element's content navigable is again navigated, that will further delay the load event.

Each iframe element has an associated current navigation was lazy loaded boolean, initially false. It is set and unset in the process the iframe attributes algorithm.

An iframe element whose current navigation was lazy loaded boolean is false potentially delays the load event.

Each iframe element has an associated null or DOMHighResTimeStamp pending resource-timing start time, initially set to null.

要素が作成されるときに、srcdoc属性が設定されず、src属性が設定されてない、または設定されるがその値が解析することができないのいずれかの場合、ナビゲート可能なコンテンツ初期のabout:blank Documentのままになる。

ユーザーがこのページからナビゲートする場合、iframeナビゲート可能なコンテンツWindowProxyオブジェクトは、新規Documentオブジェクトに対する新規Windowオブジェクトをプロキシーサーバーに送るが、src属性は変更されないだろう。


target属性が存在する場合、その値は妥当なナビゲート可能ターゲット名でなければならない。指定された値は、要素のナビゲート可能なコンテンツ作成されたときに存在する場合、その名前を付けるために使用される。


Element/iframe#attr-sandbox

Support in all current engines.

Firefox17+Safari5+Chrome4+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

sandbox属性が指定された場合、iframeによってホストされるあらゆるコンテンツに一連の追加の制限が可能になる。その値は、ASCII大文字・小文字不区別である順不同の一意な空白区切りトークンの集合でなければならない。許可される値は次のとおり:

この属性が設定される場合、コンテンツは一意な不透明な生成元からのものとして扱われ、フォーム、スクリプト、および潜在的に攻撃するAPIが無効となり、リンクは他のナビゲート可能をターゲットすることを防ぐ。allow-same-originキーワードは、コンテンツに不透明な生成元を強制するのではなく、コンテンツを実際の生成元からのものとして扱わさせる。allow-top-navigationキーワードは、コンテンツにトラバーサルなナビゲート可能ナビゲートすることができる。allow-top-navigation-by-user-activationキーワードは同様に動作するが、ブラウジングコンテキストのアクティブウィンドウ一時的なアクティベーションを持つ場合にのみそのようなナビゲーションを許可する。allow-top-navigation-to-custom-protocolsは、非フェッチスキームへのナビゲーションが外部ソフトウェアに渡されるようになる。 allow-forms, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-popups, allow-presentation, allow-scriptsおよびallow-popups-to-escape-sandboxキーワードは、フォーム、モーダルダイアログ、スクリーンの向きのロック、ポインターロックAPI、ポップアップ、プレゼンテーションAPI、スクリプトおよびサンドボックス化されない補助ブラウジングコンテキストの作成をそれぞれ再有効にする。allow-downloadsキーワードは、コンテンツでダウンロードを実行可能にする。[POINTERLOCK] [SCREENORIENTATION] [PRESENTATION]

allow-top-navigationおよびallow-top-navigation-by-user-activationキーワードは、重複するため、両方指定されてはならない。そのような不適合マークアップにおいて、allow-top-navigationのみが効果を持つ。

同様に、allow-top-navigationまたはallow-popupsのいずれかが指定されている場合、allow-top-navigation-to-custom-protocolsキーワードを指定てはならない。これは冗長となるためである。

サンドボックス化されたコンテンツの内部でalert()confirm()、およびprompt()を許可するためには、allow-modalsキーワードとallow-same-originキーワードの両方を指定する必要があり、かつロードされるURLはトップレベルの生成元同一生成元である必要がある 。allow-same-originキーワードなしで、コンテンツは異なる生成元として扱われ、異なる生成元のコンテンツは単純なダイアログを表示できない

効果的に完全にサンドボックスを破壊する、iframeを含むページが埋め込まれたページに簡単にsandbox属性を削除して再読み込みできるので、埋め込まれたページが同一生成元を持つときに、allow-scriptsおよびallow-same-originの両方のキーワードを共に設定する。

iframe要素のナビゲート可能なコンテンツナビゲートされるとき、これらのフラグは効果のみを取る。それらを削除する、または全体のsandbox属性を削除することは、すでに読み込まれたページに影響を与えない。

潜在的に敵対的なファイルは、iframe要素を含むファイルと同じサーバーから提供されるべきではない。攻撃者がiframe内よりむしろ、直接敵対コンテンツを単に訪問することをユーザーに納得させることができる場合、敵対コンテンツをサンドボックス化することは、最小限の助けとなる。敵対的なHTMLコンテンツが原因で発生する可能性のある損害を制限するために、それは独立した専用ドメインから提供されるべきである。たとえsandbox属性の保護なしで、ユーザーが騙されて直接そのページを訪れたとしても、別のドメインを使用することは、ファイル内のスクリプトがサイトを攻撃できないことを保証する。

When an iframe element's sandbox attribute is set or changed while it has a non-null content navigable, the user agent must parse the sandboxing directive given the attribute's value and the iframe element's iframe sandboxing flag set.

When an iframe element's sandbox attribute is removed while it has a non-null content navigable, the user agent must empty the iframe element's iframe sandboxing flag set.

この例において、一部の完全に未知で、潜在的に敵対的な、ユーザーが提供するHTMLコンテンツは、ページに埋め込まれている。コンテンツが別のドメインから配信されているため、コンテンツはすべて通常のクロスサイト制限の影響を受ける。また、埋め込みページはスクリプティング、プラグイン、フォームを無効にし、コンテンツは、任意のフレームやそのもの(または任意のフレーム、またはウィンドウ自身が埋め込み)以外のウィンドウを移動できない。

<p>We're not scared of you! Here is your content, unedited:</p>
<iframe sandbox src="https://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>

攻撃者が直接そのページへユーザーにアクセスするように納得させる場合、ページがページ内で検出された攻撃に被害を受け易くなるであろうサイトの生成元のコンテキストで実行されないように別のドメインを使用することが重要である。

この例において、別のサイトからガジェットが埋め込まれている。ガジェットは、スクリプトやフォームが有効であり、生成元サンドボックスの制限は解除され、その発信元のサーバーと通信できる。しかし、プラグインおよびポップアップを無効にしたように、サンドボックスは依然として有用であり、したがってマルウェアやその他の脅威に晒されるユーザーのリスクを軽減する。

<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="https://maps.example.com/embedded.html"></iframe>

ファイルAに含まれる次の断片を仮定する:

<iframe sandbox="allow-same-origin allow-forms" src=B></iframe>

またファイルBに含まれるiframeを仮定する:

<iframe sandbox="allow-scripts" src=C></iframe>

さらに、ファイルCに含まれるリンクを仮定する:

<a href=D>Link</a>

この例に対して、すべてのファイルがtext/htmlとして供給されると仮定する。

このシナリオでは、ページCはすべてのサンドボックスのフラグを設定される。Aでiframeが無効であり、これがBにおいてiframeで設定されるallow-scriptsキーワードセットを上書きするので、スクリプトは無効である。フォームのiframeで設定できるように、スクリプトキーワードを上書きするためのスクリプトは、無効になっている。(Bにおける)内側のiframeは、allow-formsキーワードセットを設定されないため、フォームもまた無効である。

Aにおけるスクリプトが、AとBですべてのsandbox属性を削除すると仮定する。これはすぐには何も変わらないだろう。ユーザーがCのリンクをクリックした場合、BでiframeにページDを読み込み、リンクはページBが読み込まれたときにAのiframe内のナビゲート可能なコンテンツの状態だったため、あたかもBでiframeallow-same-originallow-formsキーワードが設定されていたかのように、ページDは振る舞うだろう。

何が許可されて何が許可されないかについて判断することは非常に困難であるため、一般に、動的に除去したり、sandbox属性を変更したりすることは賢明でない。


allow属性は、指定された場合、iframeナビゲート可能なコンテンツ内のDocumentに対するパーミッションポリシーが初期化されるときに使用されるコンテナーポリシーを決定する。その値はシリアライズされたパーミッションポリシーでなければならない。[PERMISSIONSPOLICY]

この例において、iframeは、オンラインナビゲーションサービスから地図を埋め込むために使用される。allow属性は、ネストされたコンテキスト内でジオロケーションAPIを有効にするために使用される。

<iframe src="https://maps.example.com/" allow="geolocation"></iframe>

allowfullscreen属性は、真偽属性である。指定する場合、iframe要素のナビゲート可能なコンテンツ内のDocumentオブジェクトは、任意の生成元から"fullscreen"機能を使用できるようにするパーミッションポリシーで初期化されることを示す。これは、パーミッションポリシー属性を処理するアルゴリズムによって実施される。[PERMISSIONSPOLICY]

ここで、iframeはビデオサイトからのプレーヤーを埋め込むために使用される。allowfullscreen属性はそのビデオをフルスクリーン表示するようなプレーヤーを有効にするために必要とされる。

<article>
 <header>
  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/3095182851" rel=bookmark>12:44</a><a href="#acl-3095182851">Private Post</a></p>
 </header>
 <p>Check out my new ride!</p>
 <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
</article>

allowallowfullscreenもどちらの属性も、要素のノード文書にその機能の使用が許可されない場合、iframe要素のナビゲート可能なコンテンツにおいて機能にアクセスを許可することができない。

To determine whether a Document object document is allowed to use the policy-controlled-feature feature, run these steps:

  1. If document's browsing context is null, then return false.

  2. If document is not fully active, then return false.

  3. If the result of running is feature enabled in document for origin on feature, document, and document's origin is "Enabled", then return true.

  4. falseを返す。

ナビゲート可能なコンテンツアクティブ文書パーミッションポリシーにのみ影響するため、allowおよびallowfullscreen属性は、iframeナビゲート可能なコンテンツナビゲートされるときにのみ有効である。それらを追加または削除しても、すでに読み込まれている文書には影響しない。


iframe要素は、埋め込まれたコンテンツが特定のサイズをもつ(たとえば単位が明確に定義された次元をもつ)場合、次元属性をサポートする。

指定した初期コンテンツ内容が正常に使用されるかどうかに関わらず、常に新しいナビゲート可能な子を作成するので、iframe要素はフォールバックコンテンツにならない。


referrerpolicy属性は、リファラーポリシー属性である。その目的は、iframe属性を処理するときに使用されるリファラーポリシーを設定することにある。[REFERRERPOLICY]

loading属性は、遅延読み込み属性である。その目的は、ビューポート外にあるiframeを読み込むためのポリシーを示すことである。

When the loading attribute's state is changed to the Eager state, the user agent must run these steps:

  1. Let resumptionSteps be the iframe element's lazy load resumption steps.

  2. If resumptionSteps is null, then return.

  3. Set the iframe's lazy load resumption steps to null.

  4. Invoke resumptionSteps.


iframe要素の子孫は何も表さない。(iframe要素をサポートしないレガシーユーザーエージェントにおいて、コンテンツはフォールバックコンテンツとして機能することができるマークアップとして解析される。)

HTMLパーサーは、テキストとしてiframe要素の内側のマークアップを扱う。


HTMLIFrameElement/src

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The IDL attributes src, name, sandbox, and allow must reflect the respective content attributes of the same name.

HTMLIFrameElement/srcdoc

Support in all current engines.

Firefox25+Safari6+Chrome20+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The srcdoc getter steps are:

  1. Let attribute be the result of running get an attribute by namespace and local name given null, srcdoc's local name, and this.

  2. If attribute is null, then return the empty string.

  3. Return attribute's value.

The srcdoc setter steps are:

  1. Let compliantString be the result of invoking the Get Trusted Type compliant string algorithm with TrustedHTML, this's relevant global object, the given value, "HTMLIFrameElement srcdoc", and "script".

  2. Set an attribute value given this, srcdoc's local name, and compliantString.

The supported tokens for sandbox's DOMTokenList are the allowed values defined in the sandbox attribute and supported by the user agent.

The allowFullscreen IDL attribute must reflect the allowfullscreen content attribute.

HTMLIFrameElement/referrerPolicy

Support in all current engines.

Firefox50+Safari14+Chrome52+
Opera?Edge79+
Edge (Legacy)?Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The referrerPolicy IDL attribute must reflect the referrerpolicy content attribute, limited to only known values.

The loading IDL attribute must reflect the loading content attribute, limited to only known values.

HTMLIFrameElement/contentDocument

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The contentDocument getter steps are to return the this's content document.

HTMLIFrameElement/contentWindow

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera8+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android10.1+

The contentWindow getter steps are to return this's content window.

広告ブローカーから広告を含めるようにiframeを使ったページの例は次のとおり:

<iframe src="https://ads.example.com/?customerid=923513721&amp;format=banner"
        width="468" height="60"></iframe>

4.8.6 embed要素

Element/embed

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLEmbedElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
src — リソースのアドレス
type — 埋め込みリソースタイプ
width — 横の次元
height — 縦の次元
名前空間を持たないその他の属性(文参照)。
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLEmbedElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute DOMString width;
  [CEReactions] attribute DOMString height;
  Document? getSVGDocument();

  // also has obsolete members
};

embed要素は外部のアプリケーションまたはインタラクティブコンテンツの統合点を提供する。

src属性は、埋め込まれているリソースのURLを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。

itempropembed要素で指定される場合、src属性も指定されなければならない。

type属性が存在する場合は、インスタンスを生成するプラグインが選択されるMIMEタイプを提供する。値は妥当なMIMEタイプ文字列でなければならない。type属性とsrc属性の両方が存在する場合、type属性は、src属性で指定されたリソースの明示的なContent-Typeメタデータと同じ型を指定しなければならない。

While any of the following conditions are occurring, any plugin instantiated for the element must be removed, and the embed element represents nothing:

An embed element is said to be potentially active when the following conditions are all met simultaneously:

Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must queue an element task on the embed task source given the element to run the embed element setup steps for that element.

The embed element setup steps for a given embed element element are as follows:

  1. If another task has since been queued to run the embed element setup steps for element, then return.

  2. If element has a src attribute set, then:

    1. Let url be the result of encoding-parsing a URL given element's src attribute's value, relative to element's node document.

    2. If url is failure, then return.

    3. Let request be a new request whose URL is url, client is element's node document's relevant settings object, destination is "embed", credentials mode is "include", mode is "navigate", initiator type is "embed", and whose use-URL-credentials flag is set.

    4. Fetch request, with processResponse set to the following steps given response response:

      1. If another task has since been queued to run the embed element setup steps for element, then return.

      2. If response is a network error, then fire an event named load at element, and return.

      3. Let type be the result of determining the type of content given element and response.

      4. Switch on type:

        null
        1. Display no plugin for element.

        そうでなければ
        1. If element's content navigable is null, then create a new child navigable for element.

        2. Navigate element's content navigable to response's URL using element's node document, with response set to response, and historyHandling set to "replace".

          element's src attribute does not get updated if the content navigable gets further navigated to other locations.

        3. element now represents its content navigable.

      Fetching the resource must delay the load event of element's node document.

  3. Otherwise, display no plugin for element.

To determine the type of the content given an embed element element and a response response, run the following steps:

  1. If element has a type attribute, and that attribute's value is a type that a plugin supports, then return the value of the type attribute.

  2. If the path component of response's url matches a pattern that a plugin supports, then return the type that that plugin can handle.

    For example, a plugin might say that it can handle URLs with path components that end with the four character string ".swf".

  3. If response has explicit Content-Type metadata, and that value is a type that a plugin supports, then return that value.

  4. Return null.

It is intentional that the above algorithm allows response to have a non-ok status. This allows servers to return data for plugins even with error responses (e.g., HTTP 500 Internal Server Error codes can still contain plugin data).

To display no plugin for an embed element element:

  1. Destroy a child navigable given element.

  2. Display an indication that no plugin could be found for element, as the contents of element.

  3. element now represents nothing.

The embed element has no fallback content; its descendants are ignored.

Whenever an embed element that was potentially active stops being potentially active, any plugin that had been instantiated for that element must be unloaded.

The embed element potentially delays the load event.

embed要素は、次元属性をサポートする。

IDL属性src、およびtypeのそれぞれは、同じ名前の各コンテンツ属性を反映しなければならない。

4.8.7 object要素

Element/object

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

HTMLObjectElement

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
記載 フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
data — リソースのアドレス
type — 埋め込みリソースタイプ
nameナビゲート可能なコンテンツの名前
formform要素とこの要素を関連付ける
width — 横の次元
height — 縦の次元
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
[Exposed=Window]
interface HTMLObjectElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString data;
  [CEReactions] attribute DOMString type;
  [CEReactions] attribute DOMString name;
  readonly attribute HTMLFormElement? form;
  [CEReactions] attribute DOMString width;
  [CEReactions] attribute DOMString height;
  readonly attribute Document? contentDocument;
  readonly attribute WindowProxy? contentWindow;
  Document? getSVGDocument();

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  boolean reportValidity();
  undefined setCustomValidity(DOMString error);

  // also has obsolete members
};

Depending on the type of content instantiated by the object element, the node also supports other interfaces.

object要素は、リソースの型に応じて、画像として、または子ナビゲート可能としてのいずれかで扱われる、外部リソースを表すことができる。

data属性は、リソースのURLを指定する。これは存在しなければならず、かつ潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。

type属性が存在する場合、リソースのタイプを指定する。存在する場合、属性は妥当なMIMEタイプ文字列でなければならない。

target属性が存在する場合、その値は妥当なナビゲート可能ターゲット名でなければならない。指定された値は、該当する場合、かつ要素のコンテンツナビゲート可能作成されたときに存在する場合、要素のコンテンツナビゲート可能に名前を付けるために使用される。

Whenever one of the following conditions occur:

...the user agent must queue an element task on the DOM manipulation task source given the object element to run the following steps to (re)determine what the object element represents. This task being queued or actively running must delay the load event of the element's node document.

  1. If the user has indicated a preference that this object element's fallback content be shown instead of the element's usual behavior, then jump to the step below labeled fallback.

    For example, a user could ask for the element's fallback content to be shown because that content uses a format that the user finds more accessible.

  2. If the element has an ancestor media element, or has an ancestor object element that is not showing its fallback content, or if the element is not in a document whose browsing context is non-null, or if the element's node document is not fully active, or if the element is still in the stack of open elements of an HTML parser or XML parser, or if the element is not being rendered, then jump to the step below labeled fallback.

  3. If the data attribute is present and its value is not the empty string, then:

    1. If the type attribute is present and its value is not a type that the user agent supports, then the user agent may jump to the step below labeled fallback without fetching the content to examine its real type.

    2. Let url be the result of encoding-parsing a URL given the data attribute's value, relative to the element's node document.

    3. If url is failure, then fire an event named error at the element and jump to the step below labeled fallback.

    4. Let request be a new request whose URL is url, client is the element's node document's relevant settings object, destination is "object", credentials mode is "include", mode is "navigate", initiator type is "object", and whose use-URL-credentials flag is set.

    5. Fetch request.

      Fetching the resource must delay the load event of the element's node document until the task that is queued by the networking task source once the resource has been fetched (defined next) has been run.

    6. If the resource is not yet available (e.g. because the resource was not available in the cache, so that loading the resource required making a request over the network), then jump to the step below labeled fallback. The task that is queued by the networking task source once the resource is available must restart this algorithm from this step. Resources can load incrementally; user agents may opt to consider a resource "available" whenever enough data has been obtained to begin processing the resource.

    7. If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire an event named error at the element, then jump to the step below labeled fallback.

    8. Determine the resource type, as follows:

      1. Let the resource type be unknown.

      2. If the user agent is configured to strictly obey Content-Type headers for this resource, and the resource has associated Content-Type metadata, then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below labeled handler.

        This can introduce a vulnerability, wherein a site is trying to embed a resource that uses a particular type, but the remote site overrides that and instead furnishes the user agent with a resource that triggers a different type of content with different security characteristics.

      3. Run the appropriate set of steps from the following list:

        If the resource has associated Content-Type metadata
        1. Let binary be false.

        2. If the type specified in the resource's Content-Type metadata is "text/plain", and the result of applying the rules for distinguishing if a resource is text or binary to the resource is that the resource is not text/plain, then set binary to true.

        3. If the type specified in the resource's Content-Type metadata is "application/octet-stream", then set binary to true.

        4. If binary is false, then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below labeled handler.

        5. If there is a type attribute present on the object element, and its value is not application/octet-stream, then run the following steps:

          1. If the attribute's value is a type that starts with "image/" that is not also an XML MIME type, then let the resource type be the type specified in that type attribute.

          2. Jump to the step below labeled handler.

        Otherwise, if the resource does not have associated Content-Type metadata
        1. If there is a type attribute present on the object element, then let the tentative type be the type specified in that type attribute.

          Otherwise, let tentative type be the computed type of the resource.

        2. If tentative type is not application/octet-stream, then let resource type be tentative type and jump to the step below labeled handler.

      4. If applying the URL parser algorithm to the URL of the specified resource (after any redirects) results in a URL record whose path component matches a pattern that a plugin supports, then let resource type be the type that that plugin can handle.

        For example, a plugin might say that it can handle resources with path components that end with the four character string ".swf".

      It is possible for this step to finish, or for one of the substeps above to jump straight to the next step, with resource type still being unknown. In both cases, the next step will trigger fallback.

    9. Handler: Handle the content as given by the first of the following cases that matches:

      If the resource type is an XML MIME type, or if the resource type does not start with "image/"

      If the object element's content navigable is null, then create a new child navigable for the element.

      Let response be the response from fetch.

      If response's URL does not match about:blank, then navigate the element's content navigable to response's URL using the element's node document, with historyHandling set to "replace".

      The data attribute of the object element doesn't get updated if the content navigable gets further navigated to other locations.

      The object element represents its content navigable.

      If the resource type starts with "image/", and support for images has not been disabled

      Destroy a child navigable given the object element.

      Apply the image sniffing rules to determine the type of the image.

      The object element represents the specified image.

      If the image cannot be rendered, e.g. because it is malformed or in an unsupported format, jump to the step below labeled fallback.

      そうでなければ

      The given resource type is not supported. Jump to the step below labeled fallback.

      If the previous step ended with the resource type being unknown, this is the case that is triggered.

    10. The element's contents are not part of what the object element represents.

    11. If the object element does not represent its content navigable, then once the resource is completely loaded, queue an element task on the DOM manipulation task source given the object element to fire an event named load at the element.

      If the element does represent its content navigable, then an analogous task will be queued when the created Document is completely finished loading.

    12. Return.

  4. Fallback: The object element represents the element's children. This is the element's fallback content. Destroy a child navigable given the element.

Due to the algorithm above, the contents of object elements act as fallback content, used only when referenced resources can't be shown (e.g. because it returned a 404 error). This allows multiple object elements to be nested inside each other, targeting multiple user agents with different capabilities, with the user agent picking the first one it supports.

The object element potentially delays the load event.

form属性は、明示的にそのフォームの所有者object要素を関連付けるために使用される。

object要素は次元属性をサポートする。

HTMLObjectElement/data

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/type

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

HTMLObjectElement/name

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The IDL attributes data, type, and name each must reflect the respective content attributes of the same name.

HTMLObjectElement/contentDocument

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+

The contentDocument getter steps are to return this's content document.

HTMLObjectElement/contentWindow

Support in all current engines.

Firefox22+Safari13+Chrome53+
Opera?Edge79+
Edge (Legacy)17+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

The contentWindow getter steps are to return this's content window.

The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the constraint validation API. The form IDL attribute is part of the element's forms API.

この例において、HTMLページはobject要素を使用して埋め込まれている。

<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>