サーチ…
パラメーター
| 属性 | 詳細 |
|---|---|
name | 要素の名前を設定し、 aタグとともに使用してiframeのsrcを変更します。 |
width | 要素の幅をピクセル単位で設定します。 |
height | 要素の高さをピクセル単位で設定します。 |
src | フレームに表示されるページを指定します。 |
srcdoc | ブラウザがサポートしていると仮定して、フレームに表示されるコンテンツを指定します。コンテンツは有効なHTMLでなければなりません。 |
sandbox | 設定されている場合、iframeの内容は固有の起点からのものとして扱われ、スクリプト、プラグイン、フォーム、ポップアップなどの機能は無効になります。スペースで区切られた値のリストを追加することによって、制限を選択的に緩和することができます。可能な値については、備考の表を参照してください。 |
allowfullscreen | iframeのコンテンツにrequestFullscreen()を使用するかどうかを指定します。 |
備考
iframeは、別のドキュメントを現在のHTMLドキュメントに埋め込むために使用されます。
iframeを使用して表示することができます。
- 同じドメイン上の他のHTMLページ。
- 別のドメイン上の他のHTMLページ（以下を参照 - 同じ出所ポリシー）。
- PDFドキュメント（IEにはいくつかの問題があるかもしれませんが、 このような問題は役に立ちます）。
ブックマークやナビゲーションに問題があるため、iframeを最後の手段として使用しなければなりません。常にiframe以外のオプションもあります。 このSOの質問は、iframeの浮き沈みについてもっと理解するのに役立ちます。
同じ起源の政策
一部のサイトはiframeを使用して表示することができません。これは、 同じ発信元ポリシーと呼ばれるポリシーを実行するためです。つまり、iframeが存在するサイトは、表示されるサイトと同じドメインに存在する必要があります。
このポリシーは、iFrameの内部に存在するコンテンツの操作にも適用されます。 iFrameが別のドメインのコンテンツにアクセスしている場合は、iFrame内のコンテンツにアクセスしたり操作したりすることはできません。
W3Cのiframe要素
sandbox属性
sandbox属性を設定すると、iframeに余分な制限が加えられます。トークンのスペース区切りリストは、これらの制限を緩和するために使用できます。
| 値 | 詳細 |
|---|---|
allow-forms | フォームの提出を許可します。 |
allow-pointer-lock | JavaScriptポインタAPIを有効にします。 |
allow-popups | ポップアップは、 window.openまたは<a target="_blank"を使用して作成できます<a target="_blank" |
allow-same-origin | iframeドキュメントは、固有のものが与えられるのではなく、実際の原点を使用します。 allow-scriptsと一緒に使用すると、iframeドキュメントは、親ドキュメントと同じ起点のものであればすべてのサンドボックスを削除できます。 |
allow-scripts | スクリプトを有効にします。 iframeドキュメントと親ドキュメントは、 postMessage() APIを使用して相互に通信できます。 allow-same-originと一緒に使用すると、iframeドキュメントは、親ドキュメントと同じ起点からのすべてのサンドボックスを削除できます。 |
allow-top-navigation | iframeのコンテンツがトップレベルのドキュメントの場所を変更できるようにします。 |
インラインフレームの基本
「IFrame」という用語はインラインフレームを意味します。あなたのページに別のページを含めることができます。これは、 base.html正確な内容を示す小さいフレームをbase.htmlます。
<iframe src="base.html"></iframe>
フレームサイズの設定
widthとheight属性を使用して値を変更することができます。値はピクセル単位で表示されます（HTML 4.01のパーセンテージ値は許可されますが、HTML 5ではCSSピクセル単位の値のみが許可されます）。
<iframe src="base.html" width="800" height="600"></iframe>
IFrameでのアンカーの使用
通常、Iframe内のウェブページの変更は、Iframe内のリンクをクリックするなどしてIframeから開始されます。ただし、IFrameのコンテンツをIFrameの外部から変更することは可能です。 href属性が目的のURLに設定され、 target属性がiframeのname属性に設定されているアンカータグを使用できます。
<iframe src="webpage.html" name="myIframe"></iframe>
<a href="different_webpage.html" target="myIframe">Change the Iframe content to different_webpage.html</a>
"srcdoc"属性の使用
HTML文書全体としてiframeの正確な内容を指定するために、 srcdoc属性をsrc属性の代わりに使用することができます。これにより、テキストが「IFrame is cool！」のIFrameが生成されます。
<iframe srcdoc="<p>IFrames are cool!</p>"></iframe>
場合srcdoc属性は、ブラウザでサポートされていない、IFrameのではなく、バックの使用に落ちるsrc属性を、両方の場合はsrcとsrcdoc属性が存在し、ブラウザでサポートされている、 srcdoc優先されます。
<iframe srcdoc="<p>Iframes are cool!</p>" src="base.html"></iframe>
上の例では、ブラウザがsrcdoc属性をサポートしていない場合、代わりにbase.htmlページの内容を表示します。
サンドボックス
以下は、すべての制限が有効になっている信頼できないWebページを埋め込みます
<iframe sandbox src="http://example.com/"></iframe>
ページでスクリプトを実行してフォームを送信allow-scriptsするには、 allow-scriptsとallow-formsをsandbox attributeに追加しsandbox attribute 。
<iframe sandbox="allow-scripts allow-forms" src="http://example.com/"></iframe>
親Webページと同じドメインに信頼できないコンテンツ（ユーザーコメントなど）がある場合、iframeを使用してスクリプトを無効にし、親ドキュメントがJavaScriptを使用してそのコンテンツとやり取りできるようにすることができます。
<iframe sandbox="allow-same-origin allow-top-navigation" src="http://example.com/untrusted/comments/page2">
親ドキュメントは、イベントリスナーを追加し、その内容に合わせてIFrameのサイズを変更できます。これは、 allow-top-navigationとともに、サンドボックス化されたiframeを親ドキュメントの一部として表示させることができます。
このサンドボックスはサニタイズ入力の代わりではありませんが、徹底的な防御戦略の一環として使用できます。
また、このサンドボックスは、攻撃者がiframeのソースを直接訪問するように誘導することによって悪用される可能性があることにも注意してください。 Content Security Policy HTTPヘッダーを使用して、この攻撃を緩和することができます。
