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

4.8.5 iframe要素

Element/iframe

Support in all current engines.

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

iframe要素は、そのネストされたブラウジングコンテキスト表す

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

Element/iframe#attr-srcdoc

Support in all current engines.

Firefox25+Safari6+Chrome20+
Opera15+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android25+Safari iOS?Chrome Android25+WebView Android37+Samsung Internet1.5+Opera Android?
caniuse.com table

srcdoc属性は、その要素のネストされたブラウジングコンテキストが含まれるページのコンテンツを与える。属性の値は、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を提供できる。

要素が作成されるときに、srcdoc属性が設定されず、src属性が設定されてない、または設定されるがその値が解析することができないのいずれかの場合、ブラウジングコンテキストは初期のabout:blankページのままになる。

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


name属性が存在する場合、妥当なブラウジングコンテキスト名でなければならない。指定された値は、要素のネストされたブラウジングコンテキストが作成されたときに存在する場合、その名前を付けるために使用される。


Element/iframe#attr-sandbox

Support in all current engines.

Firefox17+Safari5+Chrome4+
Opera15+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox Android17+Safari iOS4.2+Chrome AndroidYesWebView AndroidYesSamsung InternetYesOpera Android?
caniuse.com table

sandbox属性が指定された場合、iframeによってホストされるあらゆるコンテンツに一連の追加の制限が可能になる。その値は、ASCII大文字・小文字不区別である順不同なユニークなスペース区切りのトークンのセットでなければならない。許可される値は、allow-formsallow-modalsallow-orientation-lockallow-pointer-lockallow-popupsallow-popups-to-escape-sandboxallow-presentationallow-same-originallow-scriptsallow-top-navigationallow-top-navigation-by-user-activationallow-downloadsである。

この属性が設定される場合、コンテンツは一意な生成元からのものとして扱われ、フォームやスクリプトは無効となり、リンクは他のブラウジングコンテキストをターゲットすることを防ぎ、プラグインは保護される。allow-same-originキーワードは、コンテンツにユニークな生成元を強制する代わりに、コンテンツを実際の生成元からのものとして扱わさせる。allow-top-navigationキーワードは、コンテンツにトップレベルのブラウジングコンテキストナビゲートすることができる。allow-top-by-user-activationキーワードは同様に動作するが、ブラウジングコンテキストのアクティブウィンドウtransient activationを持つ場合にのみそのようなナビゲーションを許可する。allow-formsallow-modalsallow-orientation-lockallow-pointer-lockallow-popupsallow-presentationallow-scriptsallow-popups-to-escape-sandboxキーワードは、フォーム、モーダルダイアログ、スクリーンの向きのロック、ポインターロックAPI、ポップアップ、プレゼンテーションAPI、スクリプトおよびサンドボックス化されない補助ブラウジングコンテキストの作成をそれぞれ再有効にする。[POINTERLOCK] [SCREENORIENTATION] [PRESENTATION]

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

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

iframe要素のネストされたブラウジングコンテキストナビゲートされるとき、これらのフラグは効果のみを取る。それらを削除する、または全体の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属性を削除すると仮定する。これはすぐには何も変わらないだろう。ユーザーがCのリンクをクリックした場合、BでiframeにページDを読み込み、リンクはページBが読み込まれたときにAのiframe内のネストされたブラウジングコンテキストの状態だったため、あたかもBでiframeallow-same-originallow-formsキーワードが設定されていたかのように、ページDは振る舞うだろう。

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


allow属性は、指定された場合、iframeネストされたブラウジングコンテキスト内のDocumentに対するpermissions policyが初期化されるときに使用されるコンテナポリシーを決定する。その値はserialized permissions policyでなければならない。[PERMISSIONSPOLICY]

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

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

allowfullscreen属性は、真偽属性である。指定する場合、iframe要素のネストされたブラウジングコンテキスト内のDocumentオブジェクトは、任意の生成元から"fullscreen"機能を使用できるようにするpermissions policyで初期化されることを示す。これは、Process permissions policy attributesアルゴリズムによって実施される。[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>

allowpaymentrequest属性は、真偽属性である。指定する場合、iframe要素のネストされたブラウジングコンテキスト内のDocumentオブジェクトは、任意の生成元から"payment"機能を使用できるようにするpermissions policyで初期化されることを示す。これは、Process permissions policy attributesアルゴリズムによって実施される。[PERMISSIONSPOLICY]

allowallowfullscreenまたはallowpaymentrequestのいずれの属性も、iframe要素のノード文書にその機能の使用が許可されない場合、その要素のネストされたブラウジングコンテキストで機能にアクセスを許可することができない。

ネストされたブラウジングコンテキストアクティブ文書permissions policyにのみ影響するため、allowallowfullscreenおよびallowpaymentrequest属性は、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要素の内側のマークアップを扱う。

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

embed要素は外部の(典型的には非HTML)アプリケーションやインタラクティブコンテンツの統合点を提供する。

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

著者は、信頼できないリソースの参照を避けるべきである。そのようなリソースは、著者がFlashの"allowScriptAccess"パラメーターなどの機能を使用した場合でも、プラグインのインスタンス化やスクリプトの実行に使用できる。

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

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

namealignhspace、およびvspace以外の名前空間なしの属性は、その名前がXML互換性があり、ASCII大文字を一切含まない限り、embed要素で指定されてもよい。これらの属性は、プラグインにパラメーターとして渡される。

大文字の制限がそのような文書に影響しないので、HTML文書内のすべての属性は自動的に小文字を取得する。

4つの例外は、プラグインに送信するパラメーターを超えた副作用を持つ従来の属性を除外するのに適当である。

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

これはFlashのような、独自のプラグインを必要とするリソースを埋め込むための方法である:

<embed src="catgame.swf">

ユーザーがプラグインを持たない場合(たとえばプラグインベンダーがユーザーのプラットフォームをサポートしない場合)、ユーザーはリソースを使用できない。

"high"値をもつパラメーター"quality"をプラグインに渡すために、属性を指定することができる:

<embed src="catgame.swf" quality="high">

代わりにobject要素を使用する場合、次のものと等価になる:

<object data="catgame.swf">
 <param name="quality" value="high">
</object>

4.8.7 object要素

Element/object

Support in all current engines.

Firefox1+SafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
フローコンテンツ
フレージングコンテンツ
エンベディッドコンテンツ
要素がusemap属性をもつ場合:インタラクティブコンテンツ
リストおよび提出可能 フォーム関連要素
パルパブルコンテンツ
この要素を使用できるコンテキスト
エンベディッドコンテンツが期待される場所。
コンテンツモデル
0個以上のparam要素、それから透過的
text/htmlにおけるタグ省略
どちらのタグも省略不可。
コンテンツ属性
グローバル属性
data — リソースのアドレス
type — 埋め込みリソースタイプ
nameネストされたブラウジングコンテキスト
usemap — 使用するイメージマップの名前
formform要素とこの要素を関連付ける
width — 横の次元
height — 縦の次元
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLObjectElementを使用する。

object要素は、リソースの型に応じて、画像として、子ブラウジングコンテキストとして、またはプラグインによって処理される外部リソースとしてのいずれかで扱われる、外部リソースを表すことができる。

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

著者は、信頼できないリソースの参照を避けるべきである。そのようなリソースは、著者がFlashの"allowScriptAccess"パラメーターなどの機能を使用した場合でも、プラグインのインスタンス化やスクリプトの実行に使用できる。

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

data属性またはtype属性のいずれか一方が少なくとも存在しなければならない。

object要素でitempropが指定される場合、data属性も指定されなければならない。

name属性が存在する場合、妥当なブラウジングコンテキスト名でなければならない。指定された値は、該当する場合、かつ要素のネストされたブラウジングコンテキストが作成されたときに存在する場合、要素のネストされたブラウジングコンテキストに名前を付けるために使用される。

object要素が画像を表すと同時に存在する場合、usemap属性は、イメージマップに関連付けられるオブジェクトを持つことを示すことができる。

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

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

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

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

次の例は、プラグインが(この場合においてFlashプラグインは、ビデオファイルを表示するために)HTMLで使用できる様子を示す。フォールバックは、Flashが有効でないユーザーに提供される。この場合、video要素の使用は、videoをサポートするユーザーエージェントを使用するものに対して動画を表示し、最終的にFlashもvideoをサポートしないブラウザーのどちらも持たない人に対するビデオへのリンクを提供する。

<p>Look at my video:
 <object type="application/x-shockwave-flash">
  <param name=movie value="https://video.example.com/library/watch.swf">
  <param name=allowfullscreen value=true>
  <param name=flashvars value="https://video.example.com/vids/315981">
  <video controls src="https://video.example.com/vids/315981">
   <a href="https://video.example.com/vids/315981">View video</a>.
  </video>
 </object>
</p>

4.8.8 param要素

Element/param

Support in all current engines.

Firefox1+SafariYesChrome1+
OperaYesEdge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes
カテゴリー
なし。
この要素を使用できるコンテキスト
任意のフローコンテンツの前の、object要素の子として。
コンテンツモデル
Nothing
text/htmlにおけるタグ省略
終了タグなし。
コンテンツ属性
グローバル属性
name — パラメーター名
value — パラメーター値
アクセシビリティの考慮
著者向け
実装者向け
DOMインターフェイス
HTMLParamElementを使用する。

param要素は、object要素によって呼び出されるプラグインのパラメーターを定義する。この要素は、自分自身で何かを表すものではない。

name属性は、パラメーターの名前を与える。

value属性は、パラメーターの値を与える。

両方の属性が存在しなければならない。これらは、任意の値を持ってもよい。

この場合O3Dプラグインにおいて、param要素が、プラグインにパラメーターを渡すために使用する様子を次に示す。

<!DOCTYPE HTML>
<html lang="en">
  <head>
   <title>O3D Utah Teapot</title>
  </head>
  <body>
   <p>
    <object type="application/vnd.o3d.auto">
     <param name="o3d_features" value="FloatingPointTextures">
     <img src="o3d-teapot.png"
          title="3D Utah Teapot illustration rendered using O3D."
          alt="When O3D renders the Utah Teapot, it appears as a squat
          teapot with a shiny metallic finish on which the
          surroundings are reflected, with a faint shadow caused by
          the lighting.">
     <p>To see the teapot actually rendered by O3D on your
     computer, please download and install the <a
     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
    </object>
    <script src="o3d-teapot.js"></script>
   </p>
  </body>
</html>