iframe

<iframe>タグは、他のウェブページを埋め込むために使用されます。

基本的な使い方

<iframe>タグは、指定された領域に他のウェブページを埋め込むことができます。これはコンテナ要素であり、もしブラウザが<iframe>をサポートしていない場合、内部の子要素が表示されます。

<iframe src="https://www.example.com"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p><a href="https://www.example.com">埋め込まれたページを開くにはクリックしてください</a></p>
</iframe>

上記のコードは、現在のウェブページにhttps://www.example.comを埋め込み、表示領域の幅を100%、高さを500ピクセルに設定しています。ブラウザが<iframe>をサポートしていない場合、リンクが表示され、ユーザーがクリックしてページを開くことができます。

ほとんどのブラウザが<iframe>をサポートしているため、内部の子要素は省略できます。

<iframe>の属性は次の通りです。

allowfullscreen：埋め込まれたウェブページをフルスクリーン表示できるようにします。これはフルスクリーンAPIのサポートが必要です。詳細はJavaScriptのチュートリアルを参照してください。
frameborder：枠線を描画するかどうかを指定します。0は枠線なし、1は枠線あり（デフォルト）。この属性をできるだけ使用せず、CSSでスタイルを設定することが推奨されます。
src：埋め込むウェブページのURL。
width：表示領域の幅。
height：表示領域の高さ。
sandbox：埋め込まれたウェブページの権限を設定します。詳細は次のセクションで説明します。
importance：ブラウザが埋め込まれたページをダウンロードする優先度を指定します。highは高優先度、lowは低優先度、autoはブラウザに決定させます。
name：埋め込みウィンドウの名前。この名前は<a>、<form>、<base>のtarget属性に使用できます。
referrerpolicy：埋め込まれたウェブページをリクエストする際のHTTPリクエストのRefererフィールドの設定。<a>タグの説明を参照してください。

sandbox 属性

埋め込まれたウェブページは、通常、スクリプトの実行、フォームの送信、ウィンドウのポップアップなどの通常の権限を持ちます。他のウェブサイトのページを埋め込む場合、そのページが何を実行するか不明なため、安全上のリスクが生じます。<iframe>のリスクを制限するために、HTMLではsandbox属性が提供されており、埋め込まれたウェブページの権限を制限できます。これは、隔離層、いわゆる「サンドボックス」として機能します。

sandboxは、ブール属性として使用でき、すべての制限を有効にします。

<iframe src="https://www.example.com" sandbox></iframe>

sandbox属性は特定の値を設定でき、個別に制限を有効にすることができます。特定の権限が設定されていない場合、その権限は持たないことを意味します。

allow-forms：フォームの送信を許可します。
allow-modals：モーダルウィンドウ、つまりwindow.alert()などのポップアップを生成するJavaScriptメソッドの実行を許可します。
allow-popups：埋め込まれたウェブページでwindow.open()メソッドを使用してポップアップウィンドウを開くことを許可します。
allow-popups-to-escape-sandbox：ポップアップウィンドウがサンドボックスの制限を受けないようにします。
allow-orientation-lock：埋め込まれたページがスクリプトを使用して画面の向きをロックすることを許可します。
allow-pointer-lock：埋め込まれたページがポインターロックAPIを使用してマウスの動きをロックすることを許可します。
allow-presentation：埋め込まれたページがPresentation APIを使用することを許可します。
allow-same-origin：この制限が解除されない限り、ロードされたすべてのページはクロスオリジンとして扱われます。
allow-scripts：埋め込まれたページがスクリプトを実行することを許可します（ただし、ポップアップウィンドウの作成は許可されません）。
allow-storage-access-by-user-activation：sandbox属性がallow-same-originと共に設定されている場合、ユーザーが発動するdocument.requestStorageAccess()リクエストを通じて、Storage Access APIを使用して親ウィンドウのCookieにアクセスすることができます。
allow-top-navigation：埋め込まれたページがトップレベルウィンドウをナビゲートできるようにします。
allow-top-navigation-by-user-activation：ユーザーが操作することで、トップレベルウィンドウをナビゲートできるようにします。
allow-downloads-without-user-activation：ユーザーの操作なしで埋め込まれたページがダウンロードを開始できるようにします。

注意：allow-scriptsとallow-same-originの両方を同時に設定しないでください。これにより、埋め込まれたページがsandbox属性を変更または削除できるようになります。

loading 属性

<iframe>で指定されたページは、通常すぐに読み込まれますが、これは望ましくない場合があります。<iframe>が表示領域にスクロールされた後にページを読み込む方が、帯域幅を節約できます。

loading属性は、<iframe>ページの遅延読み込みをトリガーします。この属性は、次の3つの値を取ることができます。

auto：ブラウザのデフォルト動作で、loading属性がない場合と同じです。
lazy：<iframe>の遅延読み込みが有効になります。視覚領域にスクロールされた際に読み込みが開始されます。
eager：ページ上の位置に関係なく、すぐにリソースを読み込みます。

<iframe src="https://example.com" loading="lazy"></iframe>

上記のコードは、<iframe>の遅延読み込みを有効にしています。

一つ注意点があります。<iframe>が隠れている場合、loading属性は無効であり、すぐに読み込まれます。Chromeブラウザは、次のいずれかの条件が満たされる場合、<iframe>が隠されていると見なします。

<iframe>の幅と高さが4ピクセル以下。
スタイルがdisplay: noneまたはvisibility: hiddenに設定されている。
負のXまたは負のY座標で<iframe>を画面外に配置する。