Permissions PolicyとDocument Policyについて

Chromeに、Permissions PolicyとDocument Policyという仕様の実装が進められています。

今回は、ブラウザがwebページを表示する際に制限を与えるこれらの機能について説明していきます。

仕様は下記から参照できます

あわせて、blink-devメーリングリストのintentやexplainerを読むと分かりやすいかと思います

これらはiframe先へのdelegationについて違いがあります (追記予定)

Permissions Policy

Permissions-PolicyはHTTPレスポンスヘッダで、ブラウザのカメラや位置情報の取得といったpowerful featuresへのアクセス制御を行えます。これによってFeature Policyは置き換えられます。

下記のヘッダ例は、位置情報の取得はself(今表示しているサイト)及びiframeではhttps://foo.com で利用できます。カメラは利用できません。フルスクリーンの機能は利用できます。（なお、このヘッダはStructured Field Values for HTTPに則ってます）

Permissions-Policy:
    geolocation=(self "https://foo.com"),
    camera=(),
    fullscreen=*

上記のヘッダを踏まえて、iframeで埋め込んだページで、各機能へのアクセスを許可するためにallow属性を付ける必要があります。

<iframe src="https://foo.com/" allow="geolocation; camera">
</iframe>

Document Policy

Document PolicyはHTTPレスポンスヘッダで、Webの表示が遅くなる要素を制限することが出来ます。

下記の例では、マークアップ上でサイズが指定されていない画像や、document.writeを無効にしています。また、画像の最大bppを制限し、デフォルトでframeの読み込みをLazy Loadにしています。（このヘッダもStructured Field Values for HTTPに則ってます。）

Document-Policy: unsized-media=?0, document-write=?0,
                 max-image-bpp=2.0, frame-loading=lazy

Permissions Policyと同様にiframe先のページにも制限を課すことが出来ます。

<iframe src="https://img.example.com/"
        policy="unsized-media=?0, max-image-bpp=2.0">

Document Policyでは埋め込んだページを取得する際に、課せられている制限を通知します。
f:id:ASnoKaze:20201004195751p:plain

1. クライアントがexample.comにアクセスし、img.exapmle.com へのiframe要素を処理します。このときiframeのpolicy属性でDocument Policyが指定されています。
2. クライアントはimg.example.comにアクセスします。このときDocument Policyが課せられていることを示すSec-Required-Document-Policyヘッダを付けてリクエストします。
3. img.example.comはDocument Policyの制約を満たすようなレスポンスを返します(Document-Policyヘッダをレスポンスに含める)
4. クライアントは受け取ったDocument-Policyヘッダが、example.comによって課されている制約を満たすことを確認します。