概要
機能ポリシーにより、ウェブ デベロッパーは機能の有効化、無効化、 ブラウザ内の特定の API やウェブ機能の動作を変更する。まるで CSP ですが、セキュリティを制御するのではなく、 制御機能も備えています。
機能に関するポリシー自体は、デベロッパー間のほとんどオプトインの合意ではありません。 優れたエクスペリエンスを構築（維持）するという目標を 開発できます
はじめに
ウェブ向けの開発は、難しい仕事です。一流のブランドを作るだけでも十分ではない パフォーマンスを向上させ、最新のベスト プラクティスをすべて取り入れたウェブアプリです。さらに、 使い続けることは困難になりますプロジェクトが進むにつれて、 デベロッパーが参加し、新機能がリリースされ、コードベースが拡大します。 一度達成した素晴らしいエクスペリエンス TM は、徐々に低下し、UX に悪影響を及ぼす可能性がある 苦しみ始めます！機能ポリシーは、順調に進んでいくことを目的としています。
機能ポリシーでは、ブラウザで一連の「ポリシー」をオプトインして、 サイト全体で使用する特定の機能に 適用できますこれらのポリシーにより、 サイトがアクセスできる API、またはブラウザのデフォルトの動作を変更する API おすすめします。
機能ポリシーでできることの例:
- デフォルトの動作を変更する
モバイルとサードパーティの動画における
autoplayの割合。 - サイトによる
cameraやmicrophoneなどの機密性の高い API の使用を制限します。 - iframe で
fullscreenAPI を使用できるようにします。 - 同期 XHR や
document.write()などの古い API の使用をブロックする。 - 画像のサイズが適切であることを確認する（例: レイアウト スラッシングを防ぐ） ビューポートに対して大きすぎる（ユーザーの帯域幅を浪費するなど）
ポリシーはデベロッパーとブラウザ間の契約です。データ アナリストは、 開発者の意図をブラウザで確認できるため、正直に 枠から外れて不適切な動作をするアプリですサイトやアプリが デベロッパーが事前に選択したルールのいずれかに違反しようとする第三者のコンテンツ ブラウザはより優れた UX で動作をオーバーライドするか、API をブロックします。 あります
機能ポリシーの使用
機能ポリシーでは、次の 2 つの方法で機能を制御できます。
Feature-PolicyHTTP ヘッダーを使用する。- iframe で
allow属性を使用する場合。
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 を使用しようとすると、ブラウザは ブロックします。ユーザーが以前に 位置情報を共有すること。
<ph type="x-smartling-placeholder">
場合によっては、このポリシーを少し緩和した方がよいこともあります。「新規顧客の獲得」目標を
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 のエントリ