iframe要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、エンベッディッドコンテンツ、インタラクティブコンテンツ、パルパブルコンテンツ
- この要素が使える文脈：エンベッディッドコンテンツが予想される場所
- コンテンツモデル：仕様書本文の要件に準拠したテキスト
- コンテンツ属性：グローバル属性、src、srcdoc、name、sandbox、seamless、width、height
iframe要素には、いくつかの属性が追加されました。
sandbox属性
iframe要素は、他のWebサイトのコンテンツを読み込む場合があります。sandbox属性を指定すると、iframe要素で読み込むコンテンツが以下のように制限され、安全性が向上します。
- ユニークなオリジンとして扱われ、同一オリジンで利用できる機能が無効になる
- フォームが無効になる
- スクリプトが無効になる
- ポップアップが無効になる
- リンクが他のブラウジング・コンテキスト※2をターゲットにできない（例えばリンクにtarget="_top"を指定しても動作しない）
- embed要素、object要素、applet要素などによるプラグインが無効になる
値を指定していないsandbox属性では、上記のすべての制限が適用されます。
<iframe src="http://example.com/plugin/embedded.html" sandbox></iframe>
sandbox属性の値にキーワードを指定すると、制限の一部を解除できます。
- allow-same-origin
- iframe要素で読み込む先のコンテンツが、呼び出し元と同じオリジン扱いになる
- allow-forms
- フォームが有効になる
- allow-scripts
- スクリプトを有効にする
- allow-top-navigation
- リンクがトップレベル・ブラウジング・コンテキスト（iframeの呼び出し元）をターゲットできるようになる
sandbox属性は、キーワード間に半角スペースを挟むことで複数の値を指定できます。例えば以下のように属性値を指定すると、フォームとスクリプトが有効になります。
<iframe src="http://example.com/plugin/embedded.html" sandbox="allow-forms allow-scripts"></iframe>
なお、allow-scriptsだけではポップアップは有効にならないため、WHATWG版の仕様書ではポップアップを有効にできる「allow-popups」という値も提案されています。
ポイント
ブラウジング・コンテキストとは、ドキュメント（文書）が表示される環境のことです。分かりやすく言うと、タブブラウザーの1つのタブが1つのブラウジング・コンテキストとなります。また、iframe要素によって定義されるフレームも、1つのブラウジング・コンテキストとなります。iframe要素の場合は特に、「ネスト（入れ子）されたブラウジング・コンテキスト」と呼ばれます。
ポイント
オリジンとは、スキーム／ホスト／ポートを組み合わせたもののことです。http://example.com:80/というオリジンで言うと、httpがスキーム、example.comがホスト、80がポートとなります。
seamless属性
iframe要素にseamless属性を指定すると、iframeに読み込まれたコンテンツは親のブラウジング・コンテキスト（iframeの呼び出し元）と同じように扱われます。リンクをクリックすると親のブラウジング・コンテキストごと遷移しますし、CSSも適用されます。iframe要素の周囲に枠線などが表示されることもありません。
ポイント
seamless属性が指定されていても、リンクにtarget="_self"が指定されていた場合は、iframe要素の中で遷移します。
具体的な使用例としては、ナビゲーションなど、サイト内で共通化できる部分を別のHTMLファイルに抜き出して、各ページから呼び出して使うケースが想定されます。
<nav><iframe src="/include/nav.html" seamless="seamless"></iframe></nav>
seamless属性を使用するには、呼び出し元のブランジング・コンテキストと読み込み先のブラウジング・コンテキストのオリジンが同じである必要があります。
なお、sandbox属性とseamless属性を同時に指定し、さらに入れ子にしたiframe要素ではseamless属性は使えません。
ポイント
2012年10月現在、seamless属性を実装しているブラウザーはほとんどありません。手軽に試すには、WebKit Nightly Buildsを利用するとよいでしょう。http://nightly.webkit.org/からダウンロードができます。
srcdoc属性
iframe要素は、src属性に指定されたパスのファイル（コンテンツ）をページに組み込みますが、新たに登場したsrcdoc属性を使うと、属性値にコンテンツを直接記述できます。
属性値にはHTMLのソースコードを記述します。srcdoc属性を指定する場合は、sandbox属性を合わせて指定し、ソースコード中の引用符（"）やアンパサンド（&）はエスケープする必要があります。
以下のサンプルは、ブログ記事へのコメントを想定したものです。sandbox属性が指定されることで、投稿されたコメントの安全性が増しています。
<h3>この記事へのコメント</h3>
<article>
<footer>
<h4>by hamashun</h4>
<time>2012-08-31</time>
</footer>
<iframe srcdoc="<p class="srcSample">なるほど。それで言うと、HTML5 &amp; CSS3 が良さそうですね。</p>" seamless="seamless" sandbox></iframe>
</article>
ポイント
src属性とsrcdoc属性の両方が指定されている場合は、srcdoc属性が優先されます。これによって、srcdoc属性に対応していないブラウザー向けのフォールバックを提供できます。
ポイント
「srcdoc属性には、DOCTYPEやhtml要素は書かなくてよいの？」と思われた方もいるかもしれません。仕様書では、srcdoc属性の値は、以下の順番に従った構文でなければならないとされています。
1：任意の数のコメントとスペース
2：DOCTYPE（オプション）
3：任意の数のコメントとスペース
4：html要素
5：任意の数のコメントとスペース
一見すると、上記のソースコードには、4のhtml要素が抜けているように思えますが、HTML5ではhtml要素の省略が許可されているので問題ありません。
