HTML | iframeタグは非推奨？sandbox属性について
HTMLの<iframe>タグは現在非推奨となっているのかどうか、方法とサンプルコードを紹介しています。
iframeタグの非推奨は解除されている
HTMLタグの<iframe>タグはHTML4.01で非推奨となりましたが、HTML5で非推奨は解除され、HTML LSにおいても利用可能となっています。
<iframe>タグで馴染みのあるものでは、YouTubeの動画埋め込み、X（旧Twitter）での投稿の埋め込みなどに利用されています。
<iframe width="560" height="315" src="https://www.youtube.com/embed/YmpTh1JElv4?si=RhKlkFzurBtGYS4w"></iframe>以下は上記の<iframe>タグを使ったYouTube動画の埋め込みHTMLを表示した結果です。
sandbox属性について
<iframe>タグの非推奨ではなく一般的に利用可能なタグとして設定されていますが、外部ページを読み込むという特性ゆえに「sandbox」属性というセキュリティ上の制限を指定する属性と値が用意されています。
HTML LSにて「sandbox」属性で指定可能な制限設定は追加されていますので、利用する上で再確認しておくと良いかもしれません。
「sandbox」属性は空の値を指定した時点ですべての制限が有効になりますが、以下に列挙する値から必要なものを半角スペースで区切って指定していくことで解除していきます。
- allow-forms：フォーム送信を有効にする。
- allow-modals：モーダルウィンドウを開くことを可能にする。
- allow-orientation-lock：スクリーンの方向をロック可能にする。
- allow-pointer-lock：Pointer Lock API を使用可能にします。
- allow-popups：ポップアップを有効にします。
- allow-popups-to-escape-sandbox：新しいウィンドウを開いた時、サンドボックスが継承されないようにする。
- allow-presentation：プレゼンテーションセッションを開始できるようにする。
- allow-same-origin：固有のオリジンとはせず、親文書と同じオリジンを持つものとする。
- allow-scripts：スクリプト実行を有効にする。
- allow-top-navigation：別のブラウジング・コンテキストを指しているリンクを有効にする。
- allow-top-navigation-by-user-activation：最上位のブラウジング・コンテキストに移動できるようにする。
また、外部サイトのページを読み込む際には、外部サイト側で<iframe>タグによる埋め込みを拒否する設定が可能で、設定されている場合は「〇〇により、接続が拒否されました。」と表示されるエラーが発生し読み込む事ができなくなります。