<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>
次の例では、埋め込まれたコンテンツがどのオリジンであったとしても、全画面モードで表示されることを許可しています。
- これは、allowfullscreen属性と同一の指定内容となります。
<iframe src="example.html" allow="fullscreen *"></iframe>
次の例では、埋め込まれたコンテンツがどのオリジンであったとしても、全画面モードで表示されることを拒否しています。
<iframe src="example.html" allow="fullscreen 'none'"></iframe>
使用例
<iframe src="iexample_fullscreen.html" allow="fullscreen 'self'"></iframe></p>
- 表示例
- 上記のフレームでは、フレーム内のコンテンツを同じオリジン（tagindex.com）から読み込んでいるためフルスクリーンが機能します（
requestFullscreen()に対応している場合）。