initial commit

2 files changed, 324 insertions, 0 deletions

diff --git a/files/ja/web/http/feature_policy/index.html b/files/ja/web/http/feature_policy/index.html
new file mode 100644
index 0000000000..0a3329d34b
--- /dev/null
+++ b/files/ja/web/http/feature_policy/index.html
@@ -0,0 +1,165 @@
+---
+title: Feature Policy
+slug: Web/HTTP/Feature_Policy
+tags:
+  - Feature-Policy
+  - HTTP
+  - Reference
+  - セキュリティ
+  - ヘッダー
+  - 機能ポリシー
+translation_of: Web/HTTP/Feature_Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p class="summary"><span class="seoSummary">機能ポリシーで、ウェブ開発者はブラウザーの特定の機能や API を有効化、無効化したり、動作を変更したりすることができます。これは{{Glossary("CSP", "コンテンツセキュリティポリシー")}}に似ていますが、セキュリティの動作ではなく機能の制御を行うものです。</span></p>
+
+<div class="note">
+<p><code>Feature-Policy</code> ヘッダーは仕様書で <code>Permissions-Policy</code> に改名されたので、この記事もそのうち、変更を反映するために更新されます。</p>
+</div>
+
+<h2 id="In_a_nutshell" name="In_a_nutshell">概要</h2>
+
+<p>機能ポリシーは、ウェブサイト全体でどの機能が使用されるか (または使用されないか) を明示的に宣言する仕組みを提供します。これにより、使用可能な機能を制限することによって、コードベースが時とともに進化し — サードパーティーのコンテンツをより安全に構成する場合と同様に — ベストプラクティスを維持することができます。</p>
+
+<p>機能ポリシーでは、ブラウザーがウェブサイト全体で使用されている特定の機能を実施するための一連の「ポリシー」を選択します。これらのポリシーは、サイトがアクセスできる API を制限したり、特定の機能についてブラウザーの既定の動作を変更したりすることができます。</p>
+
+<p>機能ポリシーで行うことができるものの例です。</p>
+
+<ul>
+ <li>モバイル環境でサードパーティの動画の自動再生の既定の動作を変更する。</li>
+ <li>カメラやマイクなどの注意が必要な API をサイトが使用することを制限する。</li>
+ <li>iframe から<a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a> が利用できるようにする。</li>
+ <li><a href="/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">同期 XHR</a> や {{domxref("document.write()")}} のような古い API の使用をブロックする。</li>
+ <li>画像が正しい大きさであり、ビューポートに対して大きすぎないことを確認する。</li>
+</ul>
+
+<h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と使い方</h2>
+
+<p>機能ポリシーを使用すると、最上位ページと埋め込みフレームの両方で、どのオリジンがどの機能を使用できるかを制御できます。基本的には、各機能が許可されたオリジンの一覧であるポリシーを記述します。機能ポリシーによって制御されるそれぞれの機能は、その機能がオリジンが許可されたオリジンのリスト内で一致した場合のみ現在の文書やフレームで有効になります。</p>
+
+<p>ポリシーによって制御される各機能について、ブラウザーは機能が有効になっているオリジンの一覧、すなわち許可リストを管理します。ある機能のポリシーを設定していない場合は、既定の許可リストが使用されます。既定の許可リストは機能別に定められています。</p>
+
+<h3 id="Writing_a_policy" name="Writing_a_policy">ポリシーを書く</h3>
+
+<p>ポリシーは、個々のポリシーディレクティブのセットを使用して記述します。ポリシーディレクティブは定義済みの機能名と、その機能を使用することができるオリジンの許可リストの組み合わせです。</p>
+
+<h3 id="Specifying_your_policy" name="Specifying_your_policy">ポリシーの指定</h3>
+
+<p>機能ポリシーでは、機能を制御するポリシーを指定する方法を2つ提供しています。</p>
+
+<ul>
+ <li>{{httpheader("Feature-Policy")}} HTTP ヘッダー</li>
+ <li>iframe の {{HTMLElement("iframe","<code>allow</code>","#Attributes")}} 属性</li>
+</ul>
+
+<p>HTTP ヘッダーと allow 属性の主な違いは、 allow 属性が iframe 内の機能のみを制御することです。ヘッダーは、レスポンス内とそのページ内の埋め込みコンテンツの機能を制御します。</p>
+
+<p>詳細は<a href="/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">機能ポリシーの使用</a>を参照してください。</p>
+
+<h3 id="Inferring_the_policy" name="Inferring_the_policy">ポリシーの推定</h3>
+
+<p>スクリプトは、 {{DOMxRef("Document.featurePolicy")}} または {{DOMxRef("HTMLIFrameElement.featurePolicy")}} にある {{DOMxRef("FeaturePolicy")}} オブジェクトを通して機能ポリシーに関する情報をプログラム的に取得することができます。</p>
+
+<h2 id="Types_of_policy-controlled_features" name="Types_of_policy-controlled_features">ポリシーで制御する機能の種類</h2>
+
+<p>機能ポリシーは一貫した構文を使用して複数の機能の制御を提供しますが、ポリシー制御機能の動作はさまざまで、いくつかの要因によって異なります。</p>
+
+<p>一般的な原則では、機能が無効になっているときにウェブ開発者がそれを判断し、対策するための直感的または妨害しない方法があるべきであるということです。新しく導入された機能には、状態を通知するための明示的な API がある場合があります。後で機能ポリシーと統合される既存の機能は、通常、既存のメカニズムを使用します。アプローチには次のようなものがあります。</p>
+
+<ul>
+ <li>Return "permission denied" for JavaScript APIs that require user permission grants.</li>
+ <li>Return <code>false</code> or error from an existing JavaScript API that provides access to feature.</li>
+ <li>Change the default values or options that control the feature behavior.</li>
+</ul>
+
+<p>現在のポリシー制御機能のセットは、大きく2つのカテゴリに分類されます。</p>
+
+<ul>
+ <li>Enforcing best practices for good user experiences.</li>
+ <li>Providing granular control over sensitive or powerful features.</li>
+</ul>
+
+<h3 id="Best_practices_for_good_user_experiences" name="Best_practices_for_good_user_experiences">使い勝手を高めるためのベストプラクティス</h3>
+
+<p>優れたパフォーマンスとユーザーエクスペリエンスを提供するためのベストプラクティスを実施するのに役立つポリシー制御の機能がいくつかあります。</p>
+
+<p>ほとんどの場合、ポリシーによって制御される機能は、使用時にユーザーエクスペリエンスに悪影響を与える機能を表します。既存のウェブコンテンツが壊れるのを防ぐため、このようなポリシー制御機能のデフォルトは、すべての起点で機能を使用できるようにすることです。ベストプラクティスは、ポリシー制御機能を無効にするポリシーを使用することによって実施されます。詳細は「優れたユーザーエクスペリエンスのためのベストプラクティスの実施」を参照してください。</p>
+
+<p>The features include:</p>
+
+<ul>
+ <li>Layout-inducing animations</li>
+ <li>Legacy image formats</li>
+ <li>Oversized images</li>
+ <li>Synchronous scripts</li>
+ <li>Synchronous XMLHTTPRequest</li>
+ <li>Unoptimized images</li>
+ <li>Unsized media</li>
+</ul>
+
+<h3 id="Granular_control_over_certain_features" name="Granular_control_over_certain_features">特定の機能に対する細かい制御</h3>
+
+<p>ウェブは、悪用された場合にプライバシーやセキュリティ上のリスクを伴う可能性のある機能や API を提供します。場合によっては、そのような機能がウェブサイト上でどのように使用されるかを厳密に制限することもできます。ウェブサイト内の特定の原点やフレームに対して機能を有効/無効にするポリシー制御の機能があります。利用可能な場合、機能は Permissions API、または機能が利用可能かどうかを確認する機能固有のメカニズムと統合されます。</p>
+
+<p>機能には以下のものが含まれます (<a href="https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Feature-Policy#Directives">機能一覧</a>を参照してください)。</p>
+
+<ul>
+ <li>Accelerometer</li>
+ <li>Ambient light sensor</li>
+ <li>Autoplay</li>
+ <li>Camera</li>
+ <li>Encrypted media</li>
+ <li>Fullscreen</li>
+ <li>Geolocation</li>
+ <li>Gyroscope</li>
+ <li>Magnetometer</li>
+ <li>Microphone</li>
+ <li>Midi</li>
+ <li>PaymentRequest</li>
+ <li>Picture-in-picture</li>
+ <li>USB</li>
+ <li>VR / XR</li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">機能ポリシーの使用</a></li>
+ <li>数多くのポリシーの使用例については <a href="http://feature-policy-demos.appspot.com/">Feature Policy Demos</a> をご覧ください。</li>
+</ul>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Feature Policy","#feature-policy-http-header-field","Feature-Policy")}}</td>
+   <td>{{Spec2("Feature Policy")}}</td>
+   <td>初回定義。 {{httpheader("Feature-Policy")}} ヘッダーの定義。ディレクティブは制御する機能の仕様書で定義。詳細はそれぞれのディレクティブのページを参照。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("http.headers.Feature-Policy")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">機能ポリシーの使用</a></li>
+ <li>HTTP の {{HTTPHeader("Feature-Policy")}} ヘッダー</li>
+ <li>iframe の {{HTMLElement("iframe","<code>allow</code>","#Attributes")}} 属性</li>
+ <li><a href="https://developers.google.com/web/updates/2018/06/feature-policy">Introduction to Feature Policy</a></li>
+ <li><a href="https://www.chromestatus.com/features#component%3A%20Blink%3EFeaturePolicy">Feature policies on www.chromestatus.com</a></li>
+ <li><a href="https://chrome.google.com/webstore/detail/feature-policy-tester-dev/pchamnkhkeokbpahnocjaeednpbpacop">Feature-Policy Tester (Chrome Developer Tools extension)</a></li>
+ <li><a href="/ja/docs/Web/Privacy">プライバシー、アクセス許可、情報セキュリティ</a></li>
+</ul>
diff --git a/files/ja/web/http/feature_policy/using_feature_policy/index.html b/files/ja/web/http/feature_policy/using_feature_policy/index.html
new file mode 100644
index 0000000000..3545c89d7d
--- /dev/null
+++ b/files/ja/web/http/feature_policy/using_feature_policy/index.html
@@ -0,0 +1,159 @@
+---
+title: 機能ポリシーの使用
+slug: Web/HTTP/Feature_Policy/Using_Feature_Policy
+tags:
+  - Feature Policy
+  - Feature-Policy
+  - HTTP
+  - Permissions
+  - Privileges
+  - Reference
+  - Security
+  - access
+  - delegation
+  - header
+  - セキュリティ
+  - 機能ポリシー
+translation_of: Web/HTTP/Feature_Policy/Using_Feature_Policy
+---
+<div>{{HTTPSidebar}}</div>
+
+<p><a href="/ja/docs/Web/HTTP/Feature_Policy">機能ポリシー</a>によって、最上位のページと埋め込んだフレームの両方で、どのオリジンでどの機能を使用することができるかを制御することができます。基本的にポリシーは、それぞれの機能について許可するオリジンのリストで記述します。各機能は機能ポリシーで制御され、機能は現在の文書か、許可されたオリジンのリストに一致するオリジンのフレームでのみ有効になります。</p>
+
+<p>ポリシーで制御されるそれぞれの機能について、ブラウザーは昨日を有効にするオリジンのリストを許可リストとして管理します。機能のポリシーを指定しない場合、既定の許可リストが使用されます。既定の許可リストは、機能ごとに決まっています。</p>
+
+<div class="note">
+<p><code>Feature-Policy</code> ヘッダーは仕様書で <code>Permissions-Policy</code> に改名されたので、この記事もそのうち、変更を反映するために更新されます。</p>
+</div>
+
+<h2 id="Writing_a_policy" name="Writing_a_policy">ポリシーの記述</h2>
+
+<p>ポリシーは個別のポリシーディレクティブのセットを使用して記述されます。ポリシーディレクティブは、定義された機能名と、機能を使用することができるオリジンの許可リストの組み合わせです。ポリシー内の機能はセミコロンで区切ります。</p>
+
+<h3 id="allowlist" name="allowlist">許可リスト</h3>
+
+<p>許可リストは、以下のうち一つ以上を取るオリジンの空白区切りのリストです。</p>
+
+<ul>
+ <li><code>*</code>: この機能はこの文書と、含まれるすべての閲覧コンテキスト (iframe) でオリジンに関係なく許可されます。</li>
+ <li><code>'self'</code>: この機能はこの文書と、含まれるすべての閲覧コンテキスト (iframe) のうち、同じオリジンのものに許可されます。</li>
+ <li><code>'src'</code>: (iframe の allow 属性のみ) この iframe に読み込まれた文書が iframe の {{HTMLElement('iframe','src','#Attributes')}} 属性の URL と同じオリジンから来ている限り、この機能はこの iframe で許可されます。</li>
+ <li><code>'none'</code>: この機能は最上位および含まれる閲覧コンテキストで無効になります。</li>
+ <li>&lt;origin(s)&gt;: この機能は特定のオリジン (例えば、 https://example.com) で許可されます。オリジンは空白で区切ってください。</li>
+</ul>
+
+<p><code>*</code> の値 (すべてのオリジンで有効) または <code>'none'</code> (すべてのオリジンで無効) は単独でのみ使用できますが、 <code>'self'</code> と <code>'src'</code> は一つ以上のオリジンと一緒に使用することができます。</p>
+
+<p>機能はそれぞれ、既定の許可リストを持つよう定義されています。</p>
+
+<ul>
+ <li><code>*</code>: この機能は既定で、最上位の閲覧コンテキストとそれに含まれるすべての閲覧コンテキスト (iframe) で許可されます。</li>
+ <li><code>'self'</code>: この機能は既定で、最上位の閲覧コンテキストとそれに含まれるすべての閲覧コンテキスト (iframe) のうち、同じオリジンにあるもので許可されます。この機能は、含まれる閲覧コンテキストにある別なオリジンの文書では許可されません。</li>
+ <li><code>'none'</code>: この機能は最上位および含まれる閲覧コンテキストで無効になります。</li>
+</ul>
+
+<h2 id="Specifying_your_policy" name="Specifying_your_policy">ポリシーの指定</h2>
+
+<p>機能ポリシーは、機能を制御するポリシーの指定に二つの方法を用意しています。</p>
+
+<ul>
+ <li>HTTP の {{httpheader('Feature-Policy')}} ヘッダー</li>
+ <li>{{htmlelement("iframe")}} の {{htmlattrxref("allow", "iframe")}} 属性</li>
+</ul>
+
+<p>HTTP ヘッダーと <code>allow</code> 属性の一番の違いは、 allow 属性は iframe 内の機能しか制御しないことです。ヘッダーはレスポンスで、ページ内の任意の埋め込みコンテンツの機能を制御します。</p>
+
+<h3 id="The_Feature-Policy_HTTP_header" name="The_Feature-Policy_HTTP_header">HTTP の Feature-Policy ヘッダー</h3>
+
+<p>ページのレスポンスで HTTP の <code>Feature-Policy</code> ヘッダーを送信することができます。このヘッダーの値は、指定されたページに対してブラウザーが適用するポリシーです。以下のような構造になっています。</p>
+
+<pre class="brush: bash notranslate">Feature-Policy: &lt;feature name&gt; &lt;allowlist of origin(s)&gt;</pre>
+
+<p>For example, to block all content from using the Geolocation API across your site:</p>
+
+<pre class="brush: bash notranslate">Feature-Policy: geolocation 'none'</pre>
+
+<p>Several features can be controlled at the same time by sending the HTTP header with a semicolon-separated list of policy directives, or by sending a separate header for each policy.</p>
+
+<p>For example, the following are equivalent:</p>
+
+<pre class="brush: bash notranslate">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 *;
+</pre>
+
+<h3 id="The_iframe_allow_attribute" name="The_iframe_allow_attribute">iframe の allow 属性</h3>
+
+<p>Feature Policy を使用する 2 つ目の方法は、iframe 内のコンテンツを制御することです。 <code>allow</code> 属性を使用して、埋め込みコンテンツのポリシーリストを指定します。</p>
+
+<p>たとえば、以下は iframe 内のすべてのブラウジングコンテキストに、フルスクリーンの使用を許可する方法です。</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="https://example.com..." allow="fullscreen"&gt;&lt;/iframe&gt;</pre>
+
+<p><code>&lt;iframe&gt;</code> がデフォルトで許可している <a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy$edit#allowlist">allowlist</a> の値は <code>'src'</code> です。したがって、以下のようにも書いても同じとなります。</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="https://example.com..." allow="fullscreen 'src'"&gt;&lt;/iframe&gt;
+</pre>
+
+<p>以下の例は、特定のオリジンの <code>&lt;iframe&gt;</code> のコンテンツに、ユーザーの位置情報へのアクセスを許可する方法です。</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="https://google-developers.appspot.com/demos/..."
+        allow="geolocation https://google-developers.appspot.com"&gt;&lt;/iframe&gt;
+</pre>
+
+<p>HTTP ヘッダーと同様に、セミコロンで区切られたポリシーディレクティブのリストを指定することによって、複数の機能を同時に制御することが可能です。</p>
+
+<p>たとえば、以下は、<code>&lt;iframe&gt;</code> がカメラとマイクを使用できないようにブロックする方法です。</p>
+
+<pre class="brush: html notranslate">&lt;iframe allow="camera 'none'; microphone 'none'"&gt;
+</pre>
+
+<h2 id="Inheritance_of_policy_for_embedded_content" name="Inheritance_of_policy_for_embedded_content">埋め込みコンテンツのポリシーの継承</h2>
+
+<p>Scripts inherit the policy of their browsing context, regardless of their origin. That means that top-level scripts inherit the policy from the main document.</p>
+
+<p>All iframes inherit the policy of their parent page. If the iframe has an <code>allow</code> attribute, the policies of the parent page and the <code>allow</code> attribute are combined, using the most restrictive subset. For an iframe to have a feature enabled, the origin must be in the allowlist for both the parent page and the allow attribute.</p>
+
+<p>Disabling a feature in a policy is a one-way toggle. If a feature has been disabled for a child frame by its parent frame, the child cannot re-enable it, and neither can any of the child's descendants.</p>
+
+<h2 id="Enforcing_best_practices_for_good_user_experiences">Enforcing best practices for good user experiences</h2>
+
+<p>It's difficult to build a website that uses all the latest best practices and provides great performance and user experiences. As the website evolves, it can become even harder to maintain the user experience over time. You can use feature policies to specify the desired best practices, and rely on the browser to enforce the policies to prevent regressions.</p>
+
+<p>There are several policy-controlled features designed to represent functionality that can negatively impact the user experience. These features include:</p>
+
+<ul>
+ <li>Layout-inducing Animations</li>
+ <li>Unoptimized (poorly compressed) images</li>
+ <li>Oversized images</li>
+ <li>Synchronous scripts</li>
+ <li>Synchronous XMLHttpRequest</li>
+ <li>Unsized media</li>
+</ul>
+
+<p>To avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins. That is, the default allowlist is <code>'*'</code> for each feature. Preventing the use of the sub-optimal functionality requires explicitly specifying a policy that disables the features.</p>
+
+<p>For new content, you can start developing with a policy that disables all the features. This approach ensures that none of the functionality is introduced. When applying a policy to existing content, testing is likely required to verify it continues to work as expected. This is especially important for embedded or third-party content that you do not control.</p>
+
+<p>To turn on the enforcement of all the best practices, specify the policy as below.</p>
+
+<p>Send the following the HTTP header:</p>
+
+<pre class="brush: bash notranslate">Feature-Policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';</pre>
+
+<p>Using the <code>&lt;iframe&gt;</code> <code>allow</code> attribute:</p>
+
+<pre class="brush: html notranslate">&lt;iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"&gt;&lt;/iframe&gt;</pre>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/HTTP/Feature_Policy">機能ポリシー</a></li>
+ <li>{{HTTPHeader("Feature-Policy")}} ヘッダー</li>
+ <li>iframe の {{HTMLElement('iframe','allow','#Attributes')}} 属性</li>
+ <li>{{HTTPHeader("Content-Security-Policy")}} ヘッダー</li>
+ <li>{{HTTPHeader("Referrer-Policy")}} ヘッダー</li>
+ <li><a href="/ja/docs/Web/Privacy">プライバシー、アクセス許可、情報セキュリティ</a></li>
+</ul>