こんにちは！静岡県浜松市でホームページ制作をしているフリーランスWEBデザイナーのこたです。
Web制作をするときにPHPではできるけど、HTMLではできないことが沢山あります。
前にこのような事例がありました。
PHPは使用せずにHTMLファイルで作成して欲しい。その際に、外部のHTMLファイルを表示させるような仕組みにして欲しい。
このような案件はなかなかありませんが、もしもの際に役立つと思い、自分の備忘録のためにも書かせてもらいます。
PHPのように共通で適応したいheaderやfooterは共通化すると変更修正があるときに作業がラクになります。
iframeで外部HTMLファイルを読み込む
<iframe src="読み込みたいファイルの相対パス/フルパス"></iframe>外部のHTMLを読み込むにはiframeを使う方法が一番簡単です。
読み込みたい場所に<iframe>タグを入れて、srcに読み込みたいファイルの相対パスまたはフルパスを入れることで読み込むことができます。
iframeで読み込む際の注意点
iframeで外部のWebページを埋め込むときにはセキュリティ面でのリスクがあることを覚えておきましょう。
フォームをiframeで読み込む際は個人情報の漏洩のリスクが高まります。
また、JavaScriptで無限ループのようなエラーを組み込まれる危害を受けてしまう可能性もあります。
iframeでの読み込みには注意が必要です。
sandbox属性でセキュリティ保護
iframeではsandboxという属性を指定することで、セキュリティ保護をすることができます。
厳密にいうとsandboxという属性は元のページと外部のページを切り離す処理になります。
読み込んだiframeで処理を行いたくない場合は、常設で設置したほうがセキュリティ面で良いのでセットで覚えましょう。
<iframe src="読み込みファイル" sandbox></iframe>全ての制限をかける場合は「sandbox」のみ記入する。
<iframe src="読み込みファイル" sandbox="allow-forms"></iframe>フォームの送信のみを許可したい場合は「sandbox="allow-forms"」
<iframe src="読み込みファイル" sandbox="allow-scripts"></iframe>JavaScriptのみの動きを許可したい場合は「sandbox="allow-scripts"」
<iframe src="読み込みファイル" sandbox="allow-forms allow-scripts"></iframe>複数設定する場合は半角スペースで区切ります。
その他のsandboxプロパティ
| allow-forms | フォームの送信を許可 |
| allow-scripts | JavaScriptを実行することを許可 |
| allow-modals | モーダルウィンドウを許可 |
| allow-popups | window.open()やtarget="_blank"などのポップアップを許可 |
| allow-same-origin | リソースが同じオリジンとなることを許可。Webフォントが表示されないときはコレを指定する。 |
| allow-orientation-lock | 画面の向きのロックを許可 |
| allow-pointer-lockPointer | Lock API（マウスカーソルの固定）を許可 |
| allow-presentation | プレゼンテーションモードを許可 |
| allow-popups-to-escape-sandbox | 埋め込みコンテンツから別のウィンドウを開いたときに、sandboxの制限を引き継がないように |
| allow-top-navigation | 埋め込み元のページ遷移の操作を許可 |
| allow-top-navigation-by-user-activation | ユーザーの操作による場合のみ、埋め込み元のページ遷移の操作を許可 |
まとめ
iframeでHTMLファイルを読み込むことは普段は使わないかもしれませんが、PHPが使用できない場面で活躍しそうですね。
また、iframeを使ったらセキュリティのことも頭にいれつつsandboxで対応してくださいね。
