iframe要素Support in all current engines.
src — リソースのアドレスsrcdoc — iframe内でレンダリングする文書name — ネストされたブラウジングコンテキスト名sandbox — ネストされたコンテンツのセキュリティルールallow — iframeのコンテンツに適用されるパーミッションポリシーallowfullscreen — iframeのコンテンツにrequestFullscreen()の使用を許可するかどうかwidth — 横の次元height — 縦の次元referrerpolicy — 要素によって開始されたフェッチのためのリファラーポリシーloading — 読み込み延期を決定するときに使用HTMLIFrameElementを使用する。iframe要素は、そのネストされたブラウジングコンテキストを表す。
src属性は、その要素のネストされたブラウジングコンテキストが含まれるページのURLを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。itemprop属性がiframe要素で指定される場合、srcも指定されなければならない。
Support in all current engines.
srcdoc属性は、その要素のネストされたブラウジングコンテキストが含まれるページのコンテンツを与える。属性の値は、iframe srcdoc文書のソースである。
srcdoc属性が存在する場合、指定された順序で、次の構文上のコンポーネントを構成するHTML構文を使用した値を持たなければならない：
上記の要件は、同様に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="/gallery?mode=cover&amp;page=1">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;me on the next cover." ></ iframe >
</ article > 引用符をエスケープする必要がある方法に注意し（そうでなければsrcdoc属性が途中で終わるだろう）、サンドボックス化されたコンテンツに記載される生のアンパサンド（たとえば、URL内または文で）が二重にエスケープされる必要がある―最初にsrcdoc属性を解析するとき、一度アンパサンドが保持されるように、サンドボックスのコンテンツを解析するとき、誤ってもう一度アンパサンドを解析されるの防ぐために。
さらに、DOCTYPEはiframe srcdoc文書で任意であり、かつhtml、head、およびbody要素は任意の開始タグを持ち、しかもtitle要素はiframe srcdoc文書でも任意であるため、body要素のコンテンツだけが構文でリテラルに出現する必要があるため、srcdoc属性でのマークアップは、文書全体を表すにもかかわらず比較的簡潔にすることができる。他の要素は依然として存在するが、暗に存在するのみである。
HTML構文において、著者は属性の内容を包むためにU+0022 QUOTATION MARK文字（"）を使用することを単に覚えておく必要があり、それからすべてのU+0026 AMPERSAND（&）およびU+0022 QUOTATION MARK（"）文字をエスケープし、そしてsandbox属性を指定し、コンテンツの安全な埋め込みを確実にする必要がある。（さらに&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属性が存在する場合、妥当なブラウジングコンテキスト名でなければならない。指定された値は、要素のネストされたブラウジングコンテキストが作成されたときに存在する場合、その名前を付けるために使用される。
Support in all current engines.
sandbox属性が指定された場合、iframeによってホストされるあらゆるコンテンツに一連の追加の制限が可能になる。その値は、ASCII大文字・小文字不区別である順不同の一意な空白区切りトークンの集合でなければならない。許可される値は、allow-forms、allow-modals、allow-orientation-lock、allow-pointer-lock、allow-popups、allow-popups-to-escape-sandbox、allow-presentation、allow-same-origin、allow-scripts、allow-top-navigation、allow-top-navigation-by-user-activation、allow-downloadsである。
この属性が設定される場合、コンテンツは一意な生成元からのものとして扱われ、フォームやスクリプトは無効となり、リンクは他のブラウジングコンテキストをターゲットすることを防ぎ、プラグインは保護される。allow-same-originキーワードは、コンテンツに一意な生成元を強制する代わりに、コンテンツを実際の生成元からのものとして扱わさせる。allow-top-navigationキーワードは、コンテンツにトップレベルのブラウジングコンテキストをナビゲートすることができる。allow-top-by-user-activationキーワードは同様に動作するが、ブラウジングコンテキストのアクティブウィンドウがtransient activationを持つ場合にのみそのようなナビゲーションを許可する。allow-forms、allow-modals、allow-orientation-lock、allow-pointer-lock、allow-popups、allow-presentation、allow-scripts、allow-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でiframeがallow-same-originとallow-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 > allowもallowfullscreenもどちらの属性も、要素のノード文書にその機能の使用が許可されない場合、iframe要素のネストされたブラウジングコンテキストにおいて機能にアクセスを許可することができない。
ネストされたブラウジングコンテキストのアクティブ文書のパーミッションポリシーにのみ影響するため、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:
Let resumptionSteps be the iframe element's lazy load resumption steps.
If resumptionSteps is null, then return.
Set the iframe's lazy load resumption steps to null.
Invoke resumptionSteps.
iframe要素の子孫は何も表さない。（iframe要素をサポートしないレガシーユーザーエージェントにおいて、コンテンツはフォールバックコンテンツとして機能することができるマークアップとして解析される。）
HTMLパーサーは、テキストとしてiframe要素の内側のマークアップを扱う。
広告ブローカーから広告を含めるようにiframeを使ったページの例は次のとおり：
< iframe src = "https://ads.example.com/?customerid=923513721&format=banner"
width = "468" height = "60" ></ iframe > embed要素Support in all current engines.
src — リソースのアドレスtype — 埋め込みリソースタイプwidth — 横の次元height — 縦の次元HTMLEmbedElementを使用する。embed要素は外部の（典型的には非HTML）アプリケーションやインタラクティブコンテンツの統合点を提供する。
src属性は、埋め込まれているリソースのURLを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。
著者は、信頼できないリソースの参照を避けるべきである。そのようなリソースは、著者がFlashの"allowScriptAccess"パラメーターなどの機能を使用した場合でも、プラグインのインスタンス化やスクリプトの実行に使用できる。
itempropがembed要素で指定される場合、src属性も指定されなければならない。
type属性が存在する場合は、インスタンスを生成するプラグインが選択されるMIMEタイプを提供する。値は妥当なMIMEタイプ文字列でなければならない。type属性とsrc属性の両方が存在する場合、type属性は、src属性で指定されたリソースの明示的なContent-Typeメタデータと同じ型を指定しなければならない。
name、align、hspace、およびvspace以外の名前空間なしの属性は、その名前がXML互換性があり、ASCII大文字を一切含まない限り、embed要素で指定されてもよい。これらの属性は、プラグインにパラメーターとして渡される。
大文字の制限がそのような文書に影響しないので、HTML文書内のすべての属性は自動的に小文字を取得する。
4つの例外は、プラグインに送信するパラメーターを超えた副作用を持つ従来の属性を除外するのに適当である。
これはFlashのような、独自のプラグインを必要とするリソースを埋め込むための方法である：
< embed src = "catgame.swf" > ユーザーがプラグインを持たない場合（たとえばプラグインベンダーがユーザーのプラットフォームをサポートしない場合）、ユーザーはリソースを使用できない。
"high"値をもつパラメーター"quality"をプラグインに渡すために、属性を指定することができる：
< embed src = "catgame.swf" quality = "high" > 代わりにobject要素を使用する場合、次のものと等価になる：
< object data = "catgame.swf" >
< param name = "quality" value = "high" >
</ object > object要素Support in all current engines.
usemap属性をもつ場合：インタラクティブコンテンツ。param要素、それから透過的。data — リソースのアドレスtype — 埋め込みリソースタイプname — ネストされたブラウジングコンテキスト名usemap — 使用するイメージマップの名前form — form要素とこの要素を関連付けるwidth — 横の次元height — 縦の次元HTMLObjectElementを使用する。object要素は、リソースの型に応じて、画像として、子ブラウジングコンテキストとして、またはプラグインによって処理される外部リソースとしてのいずれかで扱われる、外部リソースを表すことができる。
data属性は存在する場合、リソースのURLを指定する。存在する場合、属性は、潜在的にスペースで囲まれた妥当な空でないURLでなければならない。
著者は、信頼できないリソースの参照を避けるべきである。そのようなリソースは、著者がFlashの"allowScriptAccess"パラメーターなどの機能を使用した場合でも、プラグインのインスタンス化やスクリプトの実行に使用できる。
type属性が存在する場合、リソースのタイプを指定する。存在する場合、属性は妥当なMIMEタイプ文字列でなければならない。
data属性またはtype属性のいずれか一方が少なくとも存在しなければならない。
object要素でitempropが指定される場合、data属性も指定されなければならない。
name属性が存在する場合、妥当なブラウジングコンテキスト名でなければならない。指定された値は、該当する場合、かつ要素のネストされたブラウジングコンテキストが作成されたときに存在する場合、要素のネストされたブラウジングコンテキストに名前を付けるために使用される。
object要素が画像を表すと同時に存在する場合、usemap属性は、イメージマップに関連付けられるオブジェクトを持つことを示すことができる。
form属性は、明示的にそのフォームの所有者と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 > param要素Support in all current engines.
object要素の子として。name — パラメーター名value — パラメーター値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 >