Edition for Web Developers — Last Updated 27 January 2023
iframe
要素Support in all current engines.
src
— リソースのアドレスsrcdoc
— iframe
内でレンダリングする文書name
— Name of content navigablesandbox
— ネストされたコンテンツのセキュリティルールallow
— iframe
のコンテンツに適用されるパーミッションポリシーallowfullscreen
— iframe
のコンテンツにrequestFullscreen()
の使用を許可するかどうかwidth
— 横の次元height
— 縦の次元referrerpolicy
— 要素によって開始されたフェッチのためのリファラーポリシーloading
— 読み込み延期を決定するときに使用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
も指定されなければならない。
Support in all current engines.
The srcdoc
attribute gives the content of the page that the element's content navigable is to contain. 属性の値は、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を提供できる。
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.
Support in all current engines.
sandbox
属性が指定された場合、iframe
によってホストされるあらゆるコンテンツに一連の追加の制限が可能になる。その値は、ASCII大文字・小文字不区別である順不同の一意な空白区切りトークンの集合でなければならない。許可される値は次のとおり:
allow-downloads
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-top-navigation-to-custom-protocols
この属性が設定される場合、コンテンツは一意な生成元からのものとして扱われ、フォーム、スクリプト、および潜在的に攻撃する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:
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
— 縦の次元embed
要素は外部のアプリケーションまたはインタラクティブコンテンツの統合点を提供する。
src
属性は、埋め込まれているリソースのURLを与える。属性が存在する場合、潜在的にスペースで囲まれた妥当な空でないURLを含まなければならない。
itemprop
がembed
要素で指定される場合、src
属性も指定されなければならない。
type
属性が存在する場合は、インスタンスを生成するプラグインが選択されるMIMEタイプを提供する。値は妥当なMIMEタイプ文字列でなければならない。type
属性とsrc
属性の両方が存在する場合、type
属性は、src
属性で指定されたリソースの明示的なContent-Typeメタデータと同じ型を指定しなければならない。
object
要素Support in all current engines.
data
— リソースのアドレスtype
— 埋め込みリソースタイプname
— Name of content navigableform
— form
要素とこの要素を関連付けるwidth
— 横の次元height
— 縦の次元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
要素を関連付けるために使用される。
この例において、HTMLページはobject
要素を使用して埋め込まれている。
< figure >
< object data = "clock.html" ></ object >
< figcaption > My HTML Clock</ figcaption >
</ figure >