機能ポリシーでサイトを保護する

公開: 2022-03-10
クイックサマリー↬機能ポリシーは、セキュリティとプライバシーに影響を与えるAPIを使用するサードパーティから、また、古いAPIや最適化が不十分な画像を追加する独自のチームからサイトを保護するのに役立ちます。 方法を見つけます。

最近のChromeDev Summitで強調されたWebプラットフォーム機能の1つは、「サイト作成者がさまざまなブラウザ機能とAPIの使用を選択的に有効または無効にできるようにする」ことを目的とした機能ポリシーでした。 この記事では、それがWeb開発者にとって何を意味するのかを、いくつかの実用的な例とともに見ていきます。

Eric Bidelmanは、Google Developersサイトの紹介記事で、機能ポリシーを次のように説明しています。

「機能ポリシー自体は、高品質のWebアプリを構築（および維持）するという私たちの目標を促進するのに役立つ、開発者とブラウザー間のオプトイン契約ではありません。」

この仕様は、Web Platform IncubatorGroupの活動の一環としてGoogleで開発されました。 機能ポリシーの目的は、Web開発者として、Webプラットフォーム機能の使用法をブラウザーに明示的に示すことができるようにすることです。 そうすることで、この特定の機能の使用または不使用について合意します。 これに基づいて、ブラウザは特定の機能をブロックするように動作したり、予期していなかった機能が使用されていることを報告したりすることができます。

例としては、次のものがあります。

  1. iframeを埋め込んでいますが、埋め込まれたサイトが訪問者のカメラにアクセスできないようにしたいと思います。
  2. 最適化されていない画像がCMSを介して自分のサイトに展開されている状況を把握したいと思います。
  3. 私のプロジェクトに取り組んでいる開発者はたくさんいますが、彼らがdocument.writeなどの古いAPIを使用しているかどうかを知りたいです。

これらはすべて、機能ポリシーの一部として追跡、ブロック、または報告できます。

機能ポリシーの使用方法

機能ポリシーを使用するには、ブラウザは2つのことを知っている必要があります。ポリシーを作成する機能と、その機能をどのように処理するかです。

 Feature-Policy: <directive> <allowlist>

<directive>は、ポリシーを設定している機能の名前です。

ジャンプした後もっと！ 以下を読み続けてください↓

現在の機能のリスト（Chrome Dev Summitでのプレゼンテーションから提供）は次のとおりです。

  • 加速度計
  • 周囲光センサー
  • 自動再生
  • カメラ
  • ドキュメント-書き込み
  • 暗号化されたメディア
  • 全画面表示
  • ジオロケーション
  • ジャイロスコープ
  • レイアウト-アニメーション
  • lazyload
  • レガシー画像フォーマット
  • 磁力計
  • ミディ
  • 特大画像
  • 支払い
  • ピクチャーインピクチャー
  • スピーカー
  • 同期スクリプト
  • sync-xhr
  • 最適化されていない画像
  • サイズなしメディア
  • USB
  • 垂直スクロール
  • vr

<allowlist>は、機能の使用方法（あるとしても）の詳細を示し、次の値の1つ以上を取ります。

  • *
    このドキュメントでこの機能が許可されることを示す最も寛大なポリシー、およびこのドメインまたは他の場所からのすべてのiframe。 たとえば、すべてを有効にしたり、ドメインのリストを渡したりすることは意味がないため、単一の値としてのみ使用できます。
  • self
    この機能はドキュメントとすべてのiframeで利用できますが、iframeの出所は同じである必要があります。
  • src
    iframe allow属性を使用する場合にのみ適用されます。 これにより、ロードされたドキュメントがiframeのsrc属性のURLと同じオリジンからのものである限り、機能が許可されます。
  • none
    ドキュメントとネストされたiframeの機能を無効にします。 単一の値としてのみ使用できます。
  • <origin(s)>
    この機能は特定のオリジンで許可されています。 これは、機能が許可されているドメインのリストを指定できることを意味します。 ドメインのリストはスペースで区切られています。

サイトで機能ポリシーを有効にするには、2つの方法があります。HTTPヘッダーを送信するか、iframeでallow属性を使用します。

HTTPヘッダー

HTTPヘッダーを送信するということは、そのヘッダーを設定するページまたはサイト全体、およびサイトに埋め込まれているものすべてに対して機能ポリシーを有効にできることを意味します。 ヘッダーは、Webサーバーでサイト全体に設定することも、アプリケーションから送信することもできます。

たとえば、ジオロケーションAPIの使用を禁止したい場合、NGINX Webサーバーを使用していた場合、NGINXでサイトの構成ファイルを編集して、次のヘッダーを追加できます。これにより、サイト内のドキュメントやジオロケーションAPIの使用から埋め込まれたiframe。

 add_header Feature-Policy "geolocation none;";

1つのヘッダーに複数のポリシーを設定できます。 ジオロケーションと振動を防ぎながら、ドメインexample.comからのunsized-mediaを許可するには、次のように設定できます。

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

iFrameのallow属性

iframeのコンテンツで何が起こるかを主に懸念している場合は、iframe自体で機能ポリシーを使用できます。 これは、この使用をサポートするChromeとSafariを使用して、執筆時点でブラウザのサポートがわずかに優れていることによるメリットがあります。

サイトを埋め込んでいて、そのサイトでジオロケーション、カメラ、またはマイクのAPIを使用したくない場合、iframeは次の例のようになります。

 <iframe allow="geolocation 'none'; camera 'none'; microphone 'none'">

iframeのコンテンツallowfullscreen 、 allowpaymentrequest 、 allowusermediaを制御する個々の属性についてはすでにご存知かもしれません。 これらは機能ポリシーのallow属性に置き換えることができ、ブラウザの互換性の理由から、iframeで両方を使用できます。 両方の属性を使用する場合は、最も制限の厳しい属性が適用されます。 Googleの記事では、 allowfullscreenを使用するiframeの例を示しています。つまり、iframeはフルスクリーンに入ることができますが、 fullscreen noneという競合する機能ポリシーがあります。 これらの競合が発生するため、最も制限の厳しいポリシーが優先され、このiframeはフルスクリーンに入ることができなくなります。

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

iframe要素には、多くの機能のサポートを管理するように設計されたsandbox属性もあります。 この機能は、すべてのサンドボックス機能を無効にするsandbox値を使用してコンテンツセキュリティポリシーにも追加されました。サンドボックス機能は、選択的にオプトインすることができます。 サンドボックス機能と機能ポリシーによって制御される機能の間にはいくつかのクロスオーバーがあり、機能ポリシーは、サンドボックスですでにカバーされている値を複製しようとはしません。 ただし、1つの大きなポリシーセットとしてすべてをグローバルにオフにするのではなく、これらのポリシーを管理するためのよりきめ細かいアプローチを採用することで、サンドボックスの制限の一部に対処します。

機能ポリシーとレポートAPI

機能ポリシー違反は、Reporting APIを介して報告できます。つまり、サイト全体で機能の使用状況を追跡する包括的なポリシーセットを開発できます。 これはユーザーには完全に透過的ですが、機能がどのように使用されていたかについての膨大な量の情報を提供します。

機能ポリシーのブラウザサポート

現在、機能ポリシーのブラウザサポートはChromeに制限されていますが、開発中に機能ポリシーを使用している場合や、サイトをプレビューする場合、これは必ずしも問題ではありません。

以下で概説するユースケースの多くは、サポートなしでブラウザを使用しているサイト訪問者に影響を与えることなく、現在使用可能です。

機能ポリシーを使用する場合

機能ポリシーを使用して、サイトの開発時に下された決定をバックアップできるというアイデアが本当に気に入っています。 パフォーマンス予算などのドキュメントに記載されているか、GDPR監査の一部として記述されている可能性がありますが、サイトの存続期間を通じて保持する必要がある決定になります。 複数の人がサイトで作業する場合、これは必ずしも簡単ではありません。 その最初の意思決定に関与していなかった、または単に要件に気付いていない可能性がある人々。 サードパーティがなんらかの形でサイトに影響を与えることについてはよく考えていますが、サイトを自分たちから保護する必要がある場合もあります。

サードパーティに目を光らせる

allow属性を持つiframeの機能ポリシーを使用して、サードパーティのサイトがカメラまたはマイクにアクセスするのを防ぐことができます。 そのサイトを埋め込む理由がそれらの機能とは何の関係もない場合、それらを無効にすることは、サイトがそれらを要求し始めることができないことを意味します。 これは、GDPRへの準拠を確保するためのプロセスとリンクすることができます。 サイトのプライバシーへの影響を監査するときに、機能ポリシーによってサードパーティのアクセスをロックダウンするプロセスを組み込むことができます。これにより、あなたとあなたの訪問者に追加のセキュリティと安心を与えることができます。

この使用法は、使用法をブロックするために機能ポリシーのブラウザサポートに依存しています。 ただし、機能ポリシーレポートモードを使用して、サードパーティが実行する内容を変更した場合にこれらのAPIの使用状況を通知することができます。 これにより、非常に迅速な注意が必要になります。基本的に、Chromeを最初に使用した人がサイトにアクセスするとすぐになります。

機能を選択的に有効にする

また、通常はブロックされている一部の機能を選択的に有効にすることもできます。 おそらく、別のサイトからコンテンツを読み込んでいるiframeが、ブラウザのジオロケーション機能を使用できるようにしたいと考えています。 Chromeはデフォルトでこれをブロックしますが、信頼できるサイトからコンテンツを読み込む場合は、機能ポリシーを使用してクロスオリジンリクエストを有効にすることができます。 これは、管理下にある別のドメインからコンテンツを読み込むときに、機能を安全にオンにできることを意味します。

古いAPIの使用をキャッチし、機能のパフォーマンスが低い

機能ポリシーは、レポートのみのモードで実行できます。 次に、特定の機能の使用状況を追跡し、それらがサイトで見つかったときに通知します。 これは、多くのシナリオで役立ちます。 多くのレガシーコードを含む非常に大規模なサイトがある場合、機能ポリシーを有効にすると、注意が必要な場所を追跡するのに役立ちます。 大規模なチームで作業する場合（特に、開発者がサードパーティのコードライブラリを頻繁に使用する場合）、機能ポリシーは、サイトでは見たくないものをキャッチできます。

最適化が不十分な画像の処理

機能ポリシーについて私が見た記事のほとんどはセキュリティとプライバシーの側面に焦点を当てていますが、画像の最適化に関する機能は、技術的および非技術的なユーザーによって生成された多くのコンテンツを扱う人として、私にとって本当に魅力的でした。 機能ポリシーを使用すると、訪問者が過度に大きい（または最適化されていない画像）をダウンロードするのを防ぐことで、ユーザーエクスペリエンスとサイトのパフォーマンスを保護できます。

理想的な世界では、CMSが画像管理を処理し、画像のサイズが適切に変更され、Webと表示されるコンテキストに合わせて最適化されます。ただし、実際の生活が理想的な世界になることはめったにありません。画像の最適化は、コンテンツ編集者が巨大な画像をWebにアップロードしないようにするために任されています。 これは、コンテンツ管理レイヤーが上にない静的CMSを使用している場合に特に問題になります。 技術者であっても、プレースホルダーとしてフォルダーにポップした巨大なスクリーンショットやカメラ画像のサイズを変更するのを忘れがちです。

現在Chromeの旗の後ろには、役立つ機能があります。 これらの機能の背後にある考え方は、問題のある画像を強調表示して、サイトを完全に壊すことなく修正できるようにすることです。

unsized-media機能ポリシーは、HTMLまたはCSSでサイズが設定されていない画像またはビデオを検索します。 サイズ変更されていないメディア要素が読み込まれると、ページのコンテンツがリフローする可能性があります。

サイズのないメディアがサイトに追加されないようにするには、次のヘッダーを設定します。 メディアは、デフォルトのサイズ300×150ピクセルで表示されます。 あなたはあなたのサイトが小さなメディアでロードされているのを見て、あなたが修正すべき問題を抱えていることに気付くでしょう。

 Feature-Policy: unsized-media 'none'

デモをご覧ください（実験的なウェブプラットフォーム機能を備えたChrome Canaryが必要です）。

oversized-images機能ポリシーは、画像がコンテナよりもそれほど大きくないことを確認します。 そうである場合は、代わりにプレースホルダーが表示されます。 このポリシーは、モバイルユーザーに巨大なデスクトップイメージを送信していないことを確認するのに非常に役立ちます。

 Feature-Policy: oversized-images 'none'

デモをご覧ください（実験的なウェブプラットフォーム機能を備えたChrome Canaryが必要です）。

unoptimized-images機能ポリシーは、バイト単位の画像のデータサイズがピクセル単位のレンダリング領域より0.5倍以下大きいかどうかを確認します。 このポリシーが有効になっていて、画像がポリシーに違反している場合、画像の代わりにプレースホルダーが表示されます。

 Feature-Policy: unoptimized-images 'none'

デモをご覧ください（実験的なウェブプラットフォーム機能を備えたChrome Canaryが必要です）。

機能ポリシーのテストとレポート

Chrome DevToolsは、特定の機能が機能ポリシーによってブロックまたは有効化されたことを通知するメッセージを表示します。 サイトで機能ポリシーを有効にしている場合は、これが機能していることを確認できます。

機能ポリシーのサポートもセキュリティヘッダーサイトに追加されました。つまり、サイトまたはWeb上の他のサイトのコンテンツセキュリティポリシーなどのヘッダーと一緒にこれらを確認できます。

さまざまな機能ポリシーのオンとオフを切り替えることができるChromeDevTools拡張機能があります（ヘッダーを構成せずにページをチェックするための優れた方法でもあります）。

機能ポリシーとReportingAPIの統合を開始したい場合は、これを行う方法に関する詳細情報がここにあります。

さらに読むとリソース

私は多くのリソースを見つけましたが、その多くはこの記事を調査するときに使用しました。 これらは、独自のアプリケーションで機能ポリシーの実装を開始するために必要なすべてを提供するはずです。 すでにコンテンツセキュリティポリシーを使用している場合、これは、サイトを使用する人々のセキュリティとプライバシーを確​​保するために、サイトがブラウザで動作する方法を制御するための追加の論理的な手順のようです。 機能ポリシーを使用して、時間の経過とともにサイトに追加されるパフォーマンスに悪影響を与える要素を把握できるという追加のボーナスがあります。

  • 機能ポリシーの仕様
  • 機能ポリシーの紹介
  • Chrome DevSummitからの眺め
  • MDNの機能ポリシー
  • 機能ポリシーを使用できますか
  • 機能ポリシーのデモ
  • NginxでFeature-Policy、Referrer-Policy、およびContent SecurityPolicyヘッダーを設定します