<iframe allow=""></iframe>

更新日
仕様 HTML Living Standard / Permissions Policy
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 無し

iframe要素allow="" を追加すると、埋め込まれたコンテンツのパーミッションポリシーを指定することができます。

この指定により、フレーム内のコンテンツがどの機能を利用できるかを、オリジン情報と関連付けて制御できるようになります。

  • パーミッションポリシーは、このページで説明するiframe要素の他に、Permissions-Policy HTTPヘッダーでも指定することができます。

<iframe src="https://example.com/demo.html" allow="fullscreen"></iframe>

属性
任意属性
allow="" [+]コンテンツのパーミッションポリシー 指示のリスト 機能名と許可リストで構成される指示内容(本文参照)

指示の書式

パーミッションポリシーの指示内容は、機能名(指示の対象)と許可リストオリジン情報)を半角スペースで区切って記述します。

次の例では、fullscreen が機能名、'src' が許可リストになります。

allow="fullscreen 'src'"

allow属性では許可リストの既定値が 'src' になるため、上記は許可リストを省略して次のように記述することもできます。

allow="fullscreen"

機能名と許可リストのセットが複数ある場合は、次のようにセミコロン; )で区切って記述します。

allow="fullscreen 'src'; autoplay 'src'"

allow="fullscreen; autoplay"

許可リストには、複数のオリジン情報を指定することもできます。(ただし、*'none' は単独で使用しなければなりません)

次の例では、許可リストに2つのオリジン情報('self'https://example.com)を指定しています。(半角スペースで区切ります)

allow="autoplay 'self' https://example.com"

次の例では、*'none' を単独で指定しています。

allow="fullscreen *; autoplay 'none'"

許可リストの値

許可リストには、以下の値を指定することができます。

意味
* この機能は、全てのオリジンで許可されます。(単独で使用)
'self' この機能は、埋め込まれたコンテンツが最上位のブラウジング・コンテキストと同一オリジンの場合に許可されます。
'src' この機能は、埋め込まれたコンテンツがsec属性のURLと同一オリジンの場合に許可されます。(allow属性における既定値)
'none' この機能は、全てのオリジンで拒否されます。(単独で使用)
オリジン この機能は、特定のオリジンで許可されます。(例:https://example.com)
  • 上記は、パーミッションポリシーをiframe要素に指定する場合のものです。Permissions-Policy HTTPヘッダーで指定する場合は少し異なります。

定義されている機能名

パーミッションポリシーには様々な機能名が定義されていますが、その中からいくつかをピックアップして以下に掲載します。

機能名 対象
accelerometer デバイスの加速度に関する情報へのアクセス(Accelerometer インターフェイス)
ambient-light-sensor デバイス周囲の光量に関する情報へのアクセス(AmbientLightSensor インターフェイス)
autoplay メディアの自動再生(HTMLMediaElement インターフェイス)
battery デバイスのバッテリーに関する情報へのアクセス(Battery Status API)
camera デバイスのカメラへのアクセス(getUserMedia() メソッド)
display-capture 画面のキャプチャ(getDisplayMedia() メソッド)
document-domain document.domainの設定(Document インターフェイス)
fullscreen 全画面モードで表示(requestFullscreen() メソッド)
geolocation デバイスの位置情報へのアクセス(Geolocation インターフェイス)
gyroscope デバイスの向きに関する情報へのアクセス(Gyroscope インターフェイス)
magnetometer デバイスの向きに関する情報へのアクセス(Magnetometer インターフェイス)
microphone デバイスのマイクへのアクセス(getUserMedia() メソッド)
midi MIDIデバイスへのアクセス(Web MIDI API)
picture-in-picture ピクチャー・イン・ピクチャーで動画を再生(対応するAPI)
publickey-credentials-get 公開鍵認証情報へのアクセス(Web Authentication API)
screen-wake-lock デバイスが画面を暗くしたりオフにしてはならないことを示す(Screen Wake Lock API)
web-share テキスト、リンク、画像などコンテンツを任意の宛先に共有(Web Share API)

指示の指定例

次の例では、https://example.com から読み込まれたコンテンツに限り、全画面モードで表示されることを許可しています。(許可リストを省略しているため、既定値の 'src' が適用されます)

  • フレーム内のコンテンツが別オリジンへ切り替わった場合には、全画面で表示することができなくなります。
<iframe src="https://example.com/..." allow="fullscreen"></iframe>

次の例では、自身のオリジンから読み込まれたコンテンツに限り、全画面表示とメディアの自動再生を許可しています。

<iframe src="example.html" allow="fullscreen 'self'; autoplay 'self'"></iframe>

次の例では、自身のオリジン、または https://example.com から読み込まれたコンテンツに限り、全画面モードで表示されることを許可しています。

<iframe src="example.html" allow="fullscreen 'self' https://example.com"></iframe>

次の例では、https://example.com または https://example.jp から読み込まれたコンテンツに限り、全画面モードで表示されることを許可しています。

<iframe src="https://example.com/..." allow="fullscreen https://example.com https://example.jp"></iframe>

次の例では、埋め込まれたコンテンツがどのオリジンであったとしても、全画面モードで表示されることを許可しています。

<iframe src="example.html" allow="fullscreen *"></iframe>

次の例では、埋め込まれたコンテンツがどのオリジンであったとしても、全画面モードで表示されることを拒否しています。

<iframe src="example.html" allow="fullscreen 'none'"></iframe>

使用例

fullscreen 'self' を指定した例

<p>同一のオリジン<br>
<iframe src="iexample_fullscreen.html" allow="fullscreen 'self'"></iframe></p>

<p>別のオリジン<br>
<iframe src="https://www.tagindex.net/example/iexample_fullscreen.html" allow="fullscreen 'self'"></iframe></p>

表示例

同一のオリジン

別のオリジン

  • 1つ目のフレームは、同じオリジン(tagindex.com)から読み込んでいるためフルスクリーンが機能します(requestFullscreen() に対応している場合)。2つ目のフレームは、別オリジン(tagindex.net)から読み込んでいるためフルスクリーンが無効になります。
tagindex.net を許可リストに加えた例

<p>別のオリジン<br>
<iframe src="https://www.tagindex.net/example/iexample_fullscreen.html" allow="fullscreen 'self' https://www.tagindex.net"></iframe></p>

表示例

別のオリジン

  • tagindex.net を許可リストに加えたため、このフレームではフルスクリーンが機能します。