このページは Cloud Translation API によって翻訳されました。

機能ポリシーの概要

Eric Bidelman

概要

機能ポリシーにより、ウェブデベロッパーは機能の有効化、無効化、ブラウザ内の特定の API やウェブ機能の動作を変更する。まるで CSP ですが、セキュリティを制御するのではなく、制御機能も備えています。

機能に関するポリシー自体は、デベロッパー間のほとんどオプトインの合意ではありません。優れたエクスペリエンスを構築（維持）するという目標を開発できます

はじめに

ウェブ向けの開発は、難しい仕事です。一流のブランドを作るだけでも十分ではないパフォーマンスを向上させ、最新のベストプラクティスをすべて取り入れたウェブアプリです。さらに、使い続けることは困難になりますプロジェクトが進むにつれて、デベロッパーが参加し、新機能がリリースされ、コードベースが拡大します。一度達成した素晴らしいエクスペリエンス TM は、徐々に低下し、UX に悪影響を及ぼす可能性がある苦しみ始めます！機能ポリシーは、順調に進んでいくことを目的としています。

機能ポリシーでは、ブラウザで一連の「ポリシー」をオプトインして、サイト全体で使用する特定の機能に適用できますこれらのポリシーにより、サイトがアクセスできる API、またはブラウザのデフォルトの動作を変更する API おすすめします。

機能ポリシーでできることの例:

デフォルトの動作を変更するモバイルとサードパーティの動画における autoplay の割合。
サイトによる camera や microphone などの機密性の高い API の使用を制限します。
iframe で fullscreen API を使用できるようにします。
同期 XHR や document.write() などの古い API の使用をブロックする。
画像のサイズが適切であることを確認する（例: レイアウトスラッシングを防ぐ）ビューポートに対して大きすぎる（ユーザーの帯域幅を浪費するなど）

ポリシーはデベロッパーとブラウザ間の契約です。データアナリストは、開発者の意図をブラウザで確認できるため、正直に枠から外れて不適切な動作をするアプリですサイトやアプリがデベロッパーが事前に選択したルールのいずれかに違反しようとする第三者のコンテンツブラウザはより優れた UX で動作をオーバーライドするか、API をブロックします。あります

機能ポリシーの使用

機能ポリシーでは、次の 2 つの方法で機能を制御できます。

Feature-Policy HTTP ヘッダーを使用する。
iframe で allow 属性を使用する場合。

で確認できます。

注: HTTP ヘッダーと allow 属性の最大の違いは、 allow 属性が iframe 内の機能のみを制御するようにするためです。ヘッダーメインのレスポンス内の機能およびその中の iframe のコンテンツ表示されます。これは、iframe が親ページのポリシーを継承するためです。

`Feature-Policy` HTTP ヘッダー

機能ポリシーを使用する最も簡単な方法は、Feature-Policy HTTP ヘッダーとページのレスポンスを返しますこのヘッダーの値は、ポリシーまたはセットです。ブラウザに適用するオリジンのポリシーを設定します。

Feature-Policy: <feature> <allow list origin(s)>

配信元の許可リストには、次のような複数の値を指定できます。

*: この機能は、最上位のブラウジングコンテキストとネストで許可されます。参照コンテキスト（iframe）です
'self': この機能は、最上位のブラウジングコンテキストで許可されます。同一オリジンのネストされたブラウジングコンテキスト。クロスオリジンで許可されないネストブラウジングコンテキストで使用できるようになります。
'none': 最上位のブラウジングコンテキストではこの機能は許可されません。ネストされたブラウジングコンテキストでは許可されません。
<origin(s)>: ポリシーを有効にする特定のオリジン（例: https://example.com）。

例

たとえば、すべてのコンテンツが Geolocation API に対応していますこれを行うには、厳格な geolocation 機能の 'none' の許可リスト:

Feature-Policy: geolocation 'none'

コードや iframe で Geolocation API を使用しようとすると、ブラウザはブロックします。ユーザーが以前に位置情報を共有すること。

設定された位置情報に関するポリシーの違反 — 設定された位置情報ポリシーの違反。

場合によっては、このポリシーを少し緩和した方がよいこともあります。「新規顧客の獲得」目標を Geolocation API を使用する一方で、サードパーティのコンテンツが許可リストで 'self' を設定してアクセスします。

Feature-Policy: geolocation 'self'

iframe の `allow` 属性

機能ポリシーを使用する 2 つ目の方法は、 iframe。allow 属性を使用して、次のポリシーリストを指定します。埋め込みコンテンツ:

<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
  src="https://another-example.com/demos/..."
  allow="geolocation https://another-example.com"
></iframe>

既存の iframe 属性はどうなりますか？

機能ポリシーによって制御される機能の一部には、その動作を制御します。例: <iframe allowfullscreen> は、iframe コンテンツで HTMLElement.requestFullscreen() API。allowpaymentrequestと allowusermedia 属性を使用して、 Payment Request API と getUserMedia()、できます。

これらの古い属性の代わりに allow 属性を使用するようにします。属性を使用します。逆方向へのサポートが必要なケースでは allow 属性と同等の以前の属性を使用した互換性まったく問題ありません（例: <iframe allowfullscreen allow="fullscreen">）。ただし、制限の厳しいポリシーが優先されます。たとえば、次のようになります。 iframe は全画面表示にできません。理由は次のとおりです。 allow="fullscreen 'none'" は allowfullscreen よりも制限が厳しくなっています。

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

複数のポリシーを同時に制御する

HTTP ヘッダーを送信することで、複数の機能を同時に制御可能 ; で区切られたポリシーディレクティブのリストに置き換えます。

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

または、ポリシーごとに個別のヘッダーを送信します。

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

この例では、次の処理を行います。

すべてのブラウジングコンテキストで unsized-media の使用を禁止します。
以下を除くすべてのブラウジングコンテキストで geolocation の使用を禁止します。オリジンと https://example.com が関連付けられます。
すべてのブラウジングコンテキストで camera へのアクセスを許可します。

例 - iframe に複数のポリシーを設定する

<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>

JavaScript API

Chrome 60 では Feature-Policy HTTP ヘッダーと iframe の allow 属性（JavaScript API は Chrome 74 で追加）

この API を使用すると、クライアントサイドのコードで、ページ、フレーム、ブラウザです。特典にはメインドキュメントの場合は document.featurePolicy、メインドキュメントの場合は frame.featurePolicy 使用できます。

例

以下の例は、365 日以上経過したサイト https://example.com の Feature-Policy: geolocation 'self':

/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true

/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
  'geolocation',
  'https://another-example.com/'
);
// → false

/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {Array<string>} List of origins (used throughout the page) that are
   allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

ポリシーのリスト

機能ポリシーで制御できる機能にはどのようなものがあるでしょうか。

現時点では、どのようなポリシーが実装されているかについてのドキュメントはなくその使用方法を紹介しますまた、使用するブラウザの種類によって、このリストは今後さらに増えていきます。さまざまなポリシーを実装します機能ポリシーは適切なリファレンスドキュメントが必要になるからです。

現時点では、制御可能な機能を確認する方法はいくつかあります。

デモについては、機能ポリシーのキッチンシンクをご覧ください。例がある各ポリシーの概要を示します。
Chrome のソースを確認するをご覧ください。
about:blank に対して document.featurePolicy.allowedFeatures() に対してクエリを実行して、リストを見つけます。

        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...

chromestatus.com で、設定されたポリシーを確認します。 Blink で検討されていることを示します

これらのポリシーの使用方法については、 spec の GitHub リポジトリをご覧ください。いくつかのポリシーについて解説します。

よくある質問

機能ポリシーを使用する状況

すべてのポリシーはオプトイン方式であるため、適切な状況で機能ポリシーを使用してください。対象たとえば、アプリが画像ギャラリーの場合、maximum-downscaling-image ポリシーを使用して、モバイルのビューポートに巨大な画像が送信されないようにすることができます。

他のポリシー（document-write や sync-xhr など）を使用する場合は、です。オンにすると、広告などのサードパーティのコンテンツが破損する場合があります。一方、機能ポリシーは、サイトのページがこのようなひどい API は決して使用しません。

機能ポリシーは開発環境と本番環境のどちらで使用できますか？

両方です。開発中はポリシーを有効にして、有効にする必要があります。開発中にポリシーを有効にすると、正しい道筋から始めるのに役立ちます。予期せぬ脅威を発生を未然に防ぐことができます本番環境でポリシーをオンのままにするユーザーに特定の UX を保証します

サーバーにポリシー違反を報告する方法はありますか？

Reporting API 現在準備中です。サイトでレポートの受信を有効にする方法と同様に、 CSP 違反非推奨になった場合、実際のポリシー違反に関する報告を受け取れます。

iframe コンテンツの継承ルールを教えてください。

スクリプト（自社またはサードパーティ）は閲覧のポリシーを継承説明します。つまり、最上位のスクリプトはメインドキュメントのポリシーを継承します。

iframe は親ページのポリシーを継承します。iframe に allow 属性: 親ページと allow の間のより厳格なポリシーリストが優先されます。iframe の使用方法の詳細については、以下をご覧ください。 iframe の allow 属性。

ポリシーを適用すると、ページナビゲーション全体で適用されますか？

いいえ。ポリシーの存続期間は 1 つのページナビゲーションレスポンスです。条件ユーザーが新しいページに移動した場合は、Feature-Policy ヘッダーを明示的に新しいレスポンスで送信され、ポリシーが適用されます。

機能ポリシーに対応しているブラウザを教えてください。

最新情報については、caniuse.com をご覧ください。ご覧ください

現時点では、機能ポリシーに対応しているブラウザは Chrome のみとなっています。ただし、 API サーフェス全体がオプトインまたは機能検出が可能なため、機能ポリシー段階的な機能強化に適しています。

まとめ

機能ポリシーは、ユーザーエクスペリエンスの向上と運用の改善に向けた明るい道筋を示すのに役立ちます。向上しますアプリの開発やメンテナンスの際に特に便利フットガンの可能性を回避できるからです。

参考情報:

機能ポリシーの説明
機能ポリシーの仕様
キッチンシンクのデモ
機能ポリシー DevTools 拡張機能 - ページの機能ポリシーを試すテスター。
chromestatus.com のエントリ

機能ポリシーの概要

概要

はじめに

機能ポリシーの使用

Feature-Policy HTTP ヘッダー

iframe の allow 属性

既存の iframe 属性はどうなりますか？

複数のポリシーを同時に制御する

JavaScript API

例

ポリシーのリスト

よくある質問

機能ポリシーを使用する状況

機能ポリシーは開発環境と本番環境のどちらで使用できますか？

サーバーにポリシー違反を報告する方法はありますか？

iframe コンテンツの継承ルールを教えてください。

ポリシーを適用すると、ページ ナビゲーション全体で適用されますか？

機能ポリシーに対応しているブラウザを教えてください。

まとめ

`Feature-Policy` HTTP ヘッダー

iframe の `allow` 属性

ポリシーを適用すると、ページナビゲーション全体で適用されますか？