iFramesはずいぶん前からHTMLの標準仕様となっています。HTML 4.0では、現在非推奨となっているフレームと一緒に、フレームセットHTMLバリアントにまとめられました。HTML5ではフレームは考慮されていませんが、埋め込みフレーム（iFrames）は対象となっています。
iFramesを利用することで、他のウェブサイトを組み込むことができます。つまり、ブラウザは現在のウェブページ内で別のHTMLファイルをレンダリングします。iFrameウィンドウのコンテンツは個別にフォーマットできます。
iFramesについて話題が出ると、このHTMLテクノロジーのセキュリティについてもう一度別個に考察する必要があります。ここで問題となるのは、iFramesを介してウェブサイトに悪意あるコードが挿入される可能性です。これはもちろん大きな不快事です。
しかし、HTML5にはこれらの問題を回避するための適切なセキュリティメカニズムがあります。このチュートリアルの進行中で詳しく説明します。ただし、iFramesを利用する前に、新しいセキュリティ属性をすべてのブラウザがサポートしていないため、潜在的な脅威であることを考慮する必要があります。
HTML5では、iFramesが不可欠な標準仕様となり、いくつかの追加属性が提供されています。次の例では、iFramesの定義方法が示されています。
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
ブラウザ上での結果は以下のようになります：
iframe要素にはsrc属性が割り当てられます。このsrcには表示するページの値が含まれます。これはローカルファイルであっても可能です。しかし、表示されている例のように、外部リソースの呼び出しも可能です。widthとheightの2つの属性を使用して、iFramesの幅と高さを決定します。組み込まれたコンテンツが指定されたiFramesのサイズよりも大きい場合、スクロールバーが表示されます。
開始タグと終了タグの間には任意の内容を定義することができますが、これらはiframe要素を認識していないブラウザでのみ表示されます。
HTML5では、iFramesに関連して新しい属性が導入され、主に「サンドボックス動作」と呼ばれるものに影響を与えます。
ブラウザでは、Same Origin Policy（同一生成元ポリシー）により、表示中の組み込まれたWebページが操作されないようにされます。このセキュリティ機能は有益ですが、常に理想的ではありません。そのため、HTML5でsandbox属性が導入され、組み込まれた外部ページのコンテンツにどのような権限を与えるかをブラウザに明示的に通知することができます。
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
sandbox属性が付与されたiFramesには、埋め込まれたWebページのDOMにアクセスできなくなります。さらに、スクリプトを実行したり、クッキーを保存したりすることは許可されません。これらの制約は様々なサンドボックス値で解除できます。sandbox属性には異なる値を割り当てることができます。`allow-forms`では、埋め込まれたWebページがフォームを使用してユーザーから情報を収集できます。ユーザーはその際、フォームが現在のページからではないこ
ることを認識しません。
一方、`allow-some-origin`を設定すると、埋め込まれたWebページは同じホストから来たものとして扱われます。この値によりSame Origin Policyが無効になります。
`allow-top-navigation`の値は、埋め込まれたコンテンツが最上位のブラウズコンテキストを変更できるようにします。
そして、allow-scriptを指定すると、埋め込まれたWebページにJavaScriptを含めることができ、これにより埋め込まれたページが含んでいるページを操作できます。
以下は、sandbox指示の例です：
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
さらに、複数の値を指定することもできます。値はスペースで区切られます。以下に例を示します：
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFramesは通常、外部コンテンツを埋め込むために設計されていますが、代替として包含することもできます。
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
この属性には複数の効果があります。例えば、埋め込まれたドキュメント内のリンク先は、特に指定がない場合、iframe要素が定義されたブラウザウィンドウ内に表示されます（通常の埋め込み方法では、特に定義されていない場合、リンク先はiFrameウィンドウ内に表示されます）。seamlessは現在、Google Canary、つまりこのブラウザの開発バージョンのみがサポートしています。
もう1つの効果はスタイルシートです。なぜなら、包含するファイルのスタイルシートは、包含されたドキュメントにも適用されるからです（通常の埋め込み方法では、スタイルシートの定義は適用されません）。
新しい属性も追加されました。`srcdoc`を使用すると、直接組み込むコンテンツを定義することができます。以下の例を参照してください：
<iframe sandbox="allow-same-origin allow-forms allow-scripts"
seamless="seamless" srcdoc="
<script>
top.location.href=" http://www.psd-tutorials.de/"
</script>">
</iframe>この場合、通常、組み込むファイルを指定するsrc属性が欠けています。
srcdocで指定されたコンテンツは、外部サーバーから取得されたものとして扱われます。したがって、Same Origin Policyの完全な範囲に従います。これは、スクリプト定義と関連して興味深い振る舞いです。ここでは任意のHTMLおよびJavaScriptコードが許可されます。ただし、引用符とアンド記号は"および&という指定された文字に置き換える必要があります。
また、ここで直接ページを定義して、必要な内容を出力することもできます。
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.de</title> </head> <body> <p>…</p> </body> </html>"> </iframe>
ここでは、完全なHTMLファイルである必要は全くありません。以下のようなものも可能です：
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
ブラウザーでの表示は次のようになります：
これは、スクリプトなどのない通常のHTML構文です。
これまで外観デザインに使用されていた属性に関するいくつかの注意事項: scrolling, marginwidth, marginheightなどはHTML5ではもはや許容されていません。これらの属性はCSSに置き換えられます。
