ケケンタ今回はHTMLタグの１つであるiframeタグの基本的な使い方と使用する際の注意点について解説していきます。
後半ではiframeを使用する上で非常に重要となるセキュリティに関する内容や使用上の注意点も解説しているので、ぜひ最後までご覧ください。
- iframeタグの概要や過去に非推奨となった理由
- iframeタグの使い方
- iframeタグにおけるセキュリティリスクとその対策方法
- sandbox属性について
- iframeタグを使用する上での注意点
セキュリティ対策についてしっかり学ばれたい方にはこちらの書籍がおすすめです。
（通称：徳丸本と呼ばれる「Webアプリ開発者必読」とまで言われている書籍です）
体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践
徳丸 浩／著 SBクリエイティブ／出版│Amazon
iframeタグとは？
iframeタグとは、現在のWebページに別のサイトの情報をそのまま掲載したい（埋め込みたい）ときに使用するHTMLタグです。
- Googleマップ
- Youtube動画
- Twitterのタイムライン
ケケンタサイト上にYoutube動画がそのまま掲載されているのを見たことがある方もいるかと思いますが、あれもiframeタグを使用することで実装をしています！
また、iframeタグは使用する際に表示領域（幅と高さ）を指定します。
その中に、表示対象のコンテンツが埋め込まれる形で表示される、という仕組みになっています。
iframeタグの基本的な使い方
基本構文
iframeタグの基本的な書き方は以下の通りです。
iframeタグの基本的な書き方
<iframe src="埋め込みたいページのURL（パス）" width="横幅" height="高さ"></iframe>いくつか属性が登場していますが、iframeタグで設定可能な属性には主に以下のようなものがあります。
iframeタグで設定可能な属性
| 属性名 | 説明 |
|---|---|
| src | iframeタグで読み込むコンテンツをパスで指定する ※パスは絶対パスもしくは相対パスでの指定が可能 |
| width, height | iframeを表示する領域の幅と高さをそれぞれ指定する。 ※CSSでの指定も可能 |
| title | 読み上げソフトなどを利用している人向けに、iframe内のコンテンツの説明を記述する |
| allow | iframeで読み込むコンテンツを制御するための属性。読み込むコンテンツに対してどのような動作を許可するかを指定できる |
| sandbox | iframeに埋め込んでいるコンテンツ内で実行されるプログラム処理に対する制御の指定ができる ※詳細は項目「セキュリティ対策」で説明しています |
ケケンタこの他にも指定できる属性はありますが、その中にはHTML5では禁止（非推奨）となっているものも存在します。
例えば、iframeの枠を表示するためのframeborder属性は現在非推奨となっており、枠を表示したい際はCSSのborderプロパティを使用することが推奨されています。
使用例
基本構文の紹介だけではイメージが湧きづらいかと思いますので、実際の使用例を以下に提示します。
See the Pen iframe sample by ケケンタ (@lgshifbg-the-looper) on CodePen.
パスは絶対パス（URL）で指定し、title属性でiframeのサンプルコードである旨を説明しています。
ケケンタちなみにここでは使用していませんが、allow属性を使用すると、例えばYoutube動画を埋め込んだ際に自動再生を許可するかどうかなどを設定することが可能です。
【注意点】iframeタグが非対応のブラウザ対策
基本構文ではご紹介しませんでしたが、上記の使用例のHTMLコードをご覧いただくと、<iframe></iframe>の間に「これはiframeタグのサンプルです」という記述があります。
実は
そのようなブラウザ上ではiframeタグによる表示が行われないため、<iframe></iframe>の間に説明文を記載することでサイト閲覧者に「iframeタグがここにある」ということを伝えています。
（imgタグのalt属性と同じ役割を果たしていると捉えていただいて問題ありません）
iframeタグのセキュリティについて
前述の通り、iframeタグを使用することで他のサイトのコンテンツやYoutube動画などを簡単に埋め込むことができます。
しかし実は、iframeタグは過去にセキュリティ上の理由によって非推奨タグに登録されたことがあります。
結局その後は、Youtubeの動画埋め込みやWeb広告表示など多くのサイトがiframeを利用し、利便性が高かったという理由から、HTML5で非推奨が解除されました。
が、しかし、iframeタグには依然としてセキュリティ上の問題があり、それを正しく理解した上で使用をしなければ閲覧者に被害が及んでしまう恐れもあります。
本章では以下のようなセキュリティに関する内容を解説していきます。
- iframeタグにどのようなセキュリティリスクがあるのか
- iframeタグのセキュリティ対策としてどのような方法があるのか
ケケンタセキュリティ対策はWeb制作・アプリ開発者ならば必須の対応事項です！
今回ご紹介しているiframeタグに関わるセキュリティ事情をきちんと把握し、正しい使用方法を身に付けましょう。
セキュリティリスク
iframeタグの最大の問題点は埋め込んだコンテンツ内で実行されるプログラムが、埋め込んでいるWebサイト上でも同様に実行可能ということです。
例えば、埋め込んだURL先のサイトに悪意のあるプログラムが設置されていた場合、iframeを使用しているサイト上でもそれが実行されてしまい、サイト閲覧者に被害が及ぶ恐れがあるということです。
これによって、クロスサイトスクリプティング（XSS）やクリックジャッキングなどのセキュリティリスクが高まります。
クロスサイト・スクリプティング
参考：https://www.hitachi-solutions.co.jp/security/sp/words/xss.html
クリックジャッキング
参考：https://www.hitachi-solutions-create.co.jp/column/security/click-jacking.html
セキュリティ対策
iframeのセキュリティ対策として以下の2点が挙げられます。
iframeのセキュリティ対策
- 信頼性が低いサイトのコンテンツは埋め込まない
- sandbox属性を使用して埋め込みコンテンツが実行可能なプログラムに制限をかける
特に、後者のsandbox属性による対策が確実かつ有効なため以下より詳しく解説をしていきます。
sandbox属性
sandbox属性についてお話しする前に、そもそもsandbox（サンドボックス）が何かをご説明します。
サンドボックスとは「砂場」が由来となっている、「コンピュータ上で構築された安全な仮想環境」のことです。
このサンドボックス内で実行されたプログラムはその外側へは影響を及ぼすことが無く、外部と完全に隔離された環境となっています。
sandbox属性の役割
これを踏まえた上で、iframeにおけるsandbox属性の役割とは、
iframeで埋め込んだコンテンツ内のプログラムが何でもかんでも実行されてしまわないように制御すること
です。
sandbox属性を使用することで、例えば本来であれば実行されてしまうはずだったjavascriptプログラムを「実行禁止」とし、iframeを使用しているサイト側への被害を防ぐことが可能となります。
sandbox属性の使い方
sandbox属性の基本的な書き方は以下の通りです。
<iframe src="埋め込みたいページのURL（パス）" sandbox></iframe>このようにiframeタグ内に「sandbox」と書くだけで、埋め込んだコンテンツによる様々な挙動を制御することができ、セキュリティ対策になります。
以下はiframeタグ内にsandboxと記述することで制御される挙動の一例です。
- フォームからのデータ送信
- ポップアップ・ウィンドウの表示
- javascriptプログラムの実行
使用可能な主要プロパティ
反対に、一部の挙動は許可したいという場合にはsandbox属性に対してプロパティを記述します。
例えば、「フォームの送信だけは許可したい」という場合は以下のように記述をします。
<iframe src="埋め込みたいページのURL（パス）" sandbox="allow-forms"></iframe>ここではsandboxに「allow-forms」というプロパティを指定しています。
主要なプロパティとしては以下のようなものがあります。
sandbox属性の主要なプロパティ
| 属性名 | 説明 |
|---|---|
| allow-forms | 埋め込んでいるページ上におけるフォームからのデータ送信を許可（これを指定しなくてもフォーム自体は通常通り表示されるが、フォーム送信処理は実行されない） |
| allow-popups | ポップアップ・ウィンドウの表示を許可 |
| allow-same-origin | 埋め込み閲覧コンテキストに、通常のオリジンと同じポリシーを適用。 親ドキュメントで利用できる機能が利用可能になる |
| allow-scripts | 埋め込んでいるページによるスクリプトの実行を許可（ポップアップを除く） |
| allow-downloads-without-user-activation | ユーザーの操作なしでのダウンロードを許可 |
ケケンタ記述するべきプロパティはiframeタグを使用する目的によって変わります。
セキュリティリスクを低減するためにも、プロパティの意味をしっかりと理解して適切なものを設定するようにしましょう。
iframeタグを使用するときの注意点
ここまで、iframeタグの使用方法とセキュリティ対策について解説をしてきました。
しかし、セキュリティ上の理由とは別にiframeタグを使用するにあたっては注意点があります。
- iframeに埋め込んだコンテンツはSEO評価の対象とはならない
- iframeに埋め込む＝埋め込んだコンテンツを丸々同じページ上に表示するのと同じため、多用するとページ表示が遅くなる
- HTML5から廃止・非推奨となっている属性があるため、指定する際は仕様を確認する
ケケンタiframeタグは別のサイトのコンテンツをそっくりそのまま表示することができて大変便利です。
しかし、セキュリティ対策以外にこうした注意点も存在するため、正しい理解のもとで使用するようにしましょう。
【まとめ】iframeタグはセキュリティリスクを理解した上で使用する
以上、iframeタグの使い方とセキュリティ対策、そして使用上の注意点でした。
iframeタグはコンテンツを簡単に埋め込めるため便利である一方、セキュリティリスクがあることを理解した上で正しく使用することが大切です。
この記事が参考になったらなら何よりです。
ケケンタ最後に、僕がセキュリティ対策を学ぶ際に利用した書籍をご紹介させていただきます。
こちらの書籍は通称徳丸本と呼ばれており、Webセキュリティの第一人者である徳丸浩さんが手がけられている書籍です。Webアプリを開発する方やWebアプリケーションのセキュリティ対策を徹底的に学びたい方にとてもオススメできる一冊です。
Webアプリケーション開発において、ある意味セキュリティ対策は技術力以上に重要です。
こちらの書籍を読むことでWebアプリケーションにおいて必要なセキュリティ要件も明確となるため、Webアプリ開発に携わる方は必ず目を通しておきたい一冊です。
ケケンタここまでお読みいただきありがとうございました！
またどこかの記事でお会い出れば何よりです。
