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.

FirefoxYesSafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome AndroidYesWebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
src — リソースのアドレス
srcdociframe内でレンダリングする文書
name — Name of content navigable
sandbox — ネストされたコンテンツのセキュリティルール
allowiframeのコンテンツに適用されるパーミッションポリシー
allowfullscreeniframeのコンテンツにrequestFullscreen()の使用を許可するかどうか
width — 横の次元
height — 縦の次元
referrerpolicy — 要素によって開始されたフェッチのためのリファラーポリシー
loading — 読み込み延期を決定するときに使用
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLIFrameElementを使用する。

The iframe element represents its content navigable.

The src attribute gives the URL of a page that the element's content navigable is to contain. 属性が存在する場合、潜在的にスペースで囲まれた妥当な空でない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?

The srcdoc attribute gives the content of the page that the element's content navigable is to contain. 属性の値は、iframe srcdoc文書のソースである。

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を提供できる。

If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be parsed, the element's content navigable will remain at the initial about:blank Document.

If the user navigates away from this page, the iframe's content navigable's active WindowProxy object will proxy new Window objects for new Document objects, but the src attribute will not change.


target属性が存在する場合、その値は妥当なナビゲート可能ターゲット名でなければならない。The given value is used to name the element's content navigable if present when that is created.


Element/iframe#attr-sandbox

Support in all current engines.

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

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

この属性が設定される場合、コンテンツは一意な生成元からのものとして扱われ、フォーム、スクリプト、および潜在的に攻撃するAPIが無効となり、リンクは他のナビゲート可能をターゲットすることを防ぐ。allow-same-originキーワードは、コンテンツに一意な生成元を強制する代わりに、コンテンツを実際の生成元からのものとして扱わさせる。allow-top-navigationキーワードは、コンテンツにトラバーサルなナビゲート可能ナビゲートすることができる。allow-top-by-user-activationキーワードは同様に動作するが、ブラウジングコンテキストのアクティブウィンドウtransient 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の両方のキーワードを共に設定する。

These flags only take effect when the content navigable of the iframe element is navigated. それらを削除する、または全体のsandbox属性を削除することは、すでに読み込まれたページに影響を与えない。

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

この例において、一部の完全に未知で、潜在的に敵対的な、ユーザーが提供する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属性を削除すると仮定する。これはすぐには何も変わらないだろう。If the user clicked the link in C, loading page D into the iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the state of the content navigable in the iframe in A when page B was loaded.

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


The allow attribute, when specified, determines the container policy that will be used when the permissions policy for a Document in the iframe's content navigable is initialized. その値はシリアライズされたパーミッションポリシーでなければならない。[PERMISSIONSPOLICY]

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

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

allowfullscreen属性は、真偽属性である。When specified, it indicates that Document objects in the iframe element's content navigable will be initialized with a permissions policy which allows the "fullscreen" feature to be used from any origin. これは、パーミッションポリシー属性を処理するアルゴリズムによって実施される。[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>

Neither allow nor allowfullscreen can grant access to a feature in an iframe element's content navigable if the element's node document is not already allowed to use that feature.

Because they only influence the permissions policy of the content navigable's active document, the allow and allowfullscreen attributes only take effect when the content navigable of the iframe is navigated. それらを追加または削除しても、すでに読み込まれている文書には影響しない。


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

An iframe element never has fallback content, as it will always create a new child navigable, regardless of whether the specified initial contents are successfully used.


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要素の内側のマークアップを扱う。

広告ブローカーから広告を含めるように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+SafariYesChromeYes
Opera?EdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
インタラクティブコンテンツ
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
src — リソースのアドレス
type — 埋め込みリソースタイプ
width — 横の次元
height — 縦の次元
名前空間を持たないその他の属性(文参照)。
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス

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

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

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

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

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

4.8.7 object要素

Element/object

Support in all current engines.

Firefox1+SafariYesChromeYes
Opera?EdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
記載 フォームに関連付けられた要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
data — リソースのアドレス
type — 埋め込みリソースタイプ
name — Name of content navigable
formform要素とこの要素を関連付ける
width — 横の次元
height — 縦の次元
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLObjectElementを使用する。

The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image or as a child navigable.

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

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

target属性が存在する場合、その値は妥当なナビゲート可能ターゲット名でなければならない。The given value is used to name the element's content navigable, if applicable, and if present when the element's content navigable is created.

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

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

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

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