unslug zh-cn: move

2 files changed, 293 insertions, 0 deletions

diff --git a/files/zh-cn/web/http/feature_policy/index.html b/files/zh-cn/web/http/feature_policy/index.html
new file mode 100644
index 0000000000..90e83fb04a
--- /dev/null
+++ b/files/zh-cn/web/http/feature_policy/index.html
@@ -0,0 +1,153 @@
+---
+title: Feature Policy
+slug: Web/HTTP/策略特征
+translation_of: Web/HTTP/Feature_Policy
+---
+<div>{{SeeCompatTable}}{{HTTPSidebar}}</div>
+
+<p class="summary">特征策略允许web开发者在浏览器中选择启用、禁用和修改确切特征和 API 的行为.比如{{Glossary("CSP","内容安全策略")}}，但是它控制的是浏览器的特征非安全行为.</p>
+
+<h2 id="概述">概述</h2>
+
+<p>特征策略提供了一种机制去声明哪些功能通过你的网络，是可以被用的（或者不被使用的）。这就允许你通过功能可用性来很好的锁定功能，即使代码很老，或者包含第三方的内容。</p>
+
+<p>有了功能策略，你可以选择一组“策略”，让浏览器强制执行整个网站使用的特定功能。这些策略限制了站点可以访问哪些api，或者修改浏览器对某些特性的默认行为</p>
+
+<p>使用特性策略可以做什么的示例?:</p>
+
+<ul>
+ <li>改变手机和第三方视频自动播放的默认行为.</li>
+ <li>限制网站使用敏感的api，如摄像头或麦克风.</li>
+ <li>
+  <p>允许iframes使用全屏API.</p>
+ </li>
+ <li>
+  <p>阻止使用过时的api，比如 <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">synchronous XHR</a> 和 {{domxref("document.write()")}}.</p>
+ </li>
+ <li>确保图像的大小正确，对于视口来说不会太大.</li>
+</ul>
+
+<h2 id="概念和用法">概念和用法</h2>
+
+<p>特性策略允许您在顶级页面和嵌入式框架中控制哪些源可以使用哪些特性。实际上，您编写了一个策略，它是每个特性允许的起源列表。对于由特性策略控制的每个特性，只有当它的起源与允许的起源列表匹配时，该特性才会在当前文档或框架中启用.</p>
+
+<p>对于每个策略控制的功能，浏览器都会维护启用该功能的来源列表，称为允许列表。如果您未为功能指定策略，则将使用默认的允许列表。默认的许可列表特定于每个功能.</p>
+
+<h3 id="编写策略">编写策略</h3>
+
+<p>使用一组单独的策略指令来描述策略。策略指令是已定义功能名称和可以使用该功能的来源的允许列表的组合.</p>
+
+<h3 id="指定策略">指定策略</h3>
+
+<p>功能策略提供了两种方法来指定用于控制功能的策略:</p>
+
+<ul>
+ <li> {{httpheader('Feature-Policy')}} HTTP 报文头.</li>
+ <li>在{{HTMLElement('iframe','<code>allow</code>','#Attributes')}} iframes 之上的属性.</li>
+</ul>
+
+<p>HTTP标头和allow属性之间的主要区别在于allow属性仅控制iframe中的功能。标头控制响应中的功能以及页面内的任何嵌入式内容.</p>
+
+<p>点此链接查看更多详细信息 <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a>.</p>
+
+<h2 id="策略控制功能的类型">策略控制功能的类型</h2>
+
+<p>尽管功能策略使用一致的语法提供了对多个功能的控制，但是策略控制功能的行为却有所不同，并取决于多个因素.</p>
+
+<p>一般原则是，Web开发人员应该有一种直观或不间断的方式来检测或处理禁用该功能的情况。新引入的功能可能具有显示状态的显式API。稍后与功能策略集成的现有功能通常将使用现有机制。一些方法包括:</p>
+
+<ul>
+ <li>对于需要用户权限授予的JavaScript API，返回“权限被拒绝(permission denied)”.</li>
+ <li>从提供功能访问权限的现有JavaScript API返回<code>false</code>或 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">error</span></font>.</li>
+ <li>更改控制功能行为的默认值或选项.</li>
+</ul>
+
+<p>当前的一组策略控制功能可分为两大类:</p>
+
+<ul>
+ <li>实施最佳实践以获得良好的用户体验.</li>
+ <li>提供对敏感或强大功能的精细控制.</li>
+</ul>
+
+<h3 id="良好用户体验的最佳实践">良好用户体验的最佳实践</h3>
+
+<p>有几种策略控制的功能可帮助实施最佳实践，以提供良好的性能和用户体验.</p>
+
+<p>在大多数情况下，策略控制的功能代表的功能在使用时会对用户体验产生负面影响。为避免破坏现有的Web内容，此类策略控制功能的默认设置是允许所有来源使用该功能。然后，通过使用禁用策略控制功能的策略来实施最佳实践。有关更多详细信息，请参见“实施最佳实践以提供良好的用户体验”.</p>
+
+<p>功能包括:</p>
+
+<ul>
+ <li>Layout-inducing 动画</li>
+ <li>传统的图像格式</li>
+ <li>超大号的图片</li>
+ <li>同步脚本</li>
+ <li>同步 XMLHTTPRequest</li>
+ <li>为优化的图像</li>
+ <li>大小不一的媒体</li>
+</ul>
+
+<h3 id="精细控制某些功能">精细控制某些功能</h3>
+
+<p>Web提供的功能和API如果被滥用，可能会带来隐私或安全风险。在某些情况下，您可能希望严格限制在网站上使用此类功能的方式。有策略控制的功能，允许针对网站中的特定来源或框架启用/禁用功能。该功能在可用时与Permissions API或特定于功能的机制集成在一起，以检查该功能是否可用.</p>
+
+<p>功能包括:</p>
+
+<ul>
+ <li>加速器</li>
+ <li>环境光源感测器</li>
+ <li>自动播放</li>
+ <li>摄像功能</li>
+ <li>加密媒体信息</li>
+ <li>全屏功能</li>
+ <li>地理定位</li>
+ <li>陀螺仪</li>
+ <li>延迟加载</li>
+ <li>麦克风</li>
+ <li>Midi</li>
+ <li>支付请求</li>
+ <li>画中画(Picture-in-picture)</li>
+ <li>扬声器</li>
+ <li>USB</li>
+ <li>VR / XR</li>
+</ul>
+
+<h2 id="更多示例">更多示例</h2>
+
+<ul>
+ <li>点击 <a href="http://feature-policy-demos.appspot.com/">Feature Policy Demos</a> 查看更多策略使用方法.</li>
+</ul>
+
+<h2 id="规范">规范</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="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">此页中的兼容性表是由结构化数据生成的。如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送pull请求.</div>
+
+<p>{{Compat("http.headers.Feature-Policy")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li><a href="/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Using Feature Policy</a></li>
+ <li>{{HTTPHeader("Feature-Policy")}} HTTP header</li>
+ <li>{{HTMLElement('iframe','<code>allow</code>','#Attributes')}} attribute on iframes</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>
+</ul>
diff --git a/files/zh-cn/web/http/feature_policy/using_feature_policy/index.html b/files/zh-cn/web/http/feature_policy/using_feature_policy/index.html
new file mode 100644
index 0000000000..9a37fa46f3
--- /dev/null
+++ b/files/zh-cn/web/http/feature_policy/using_feature_policy/index.html
@@ -0,0 +1,140 @@
+---
+title: Using Feature Policy
+slug: Web/HTTP/策略特征/Using_Feature_Policy
+translation_of: Web/HTTP/Feature_Policy/Using_Feature_Policy
+---
+<div>{{HTTPSidebar}} {{SeeCompatTable}}</div>
+
+<p><a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a> allows you to control which origins can use which features, both in the top-level page and in embedded frames. Essentially, you write a policy, which is an allowed list of origins for each feature. For every feature controlled by Feature Policy, the feature is only enabled in the current document or frame if its origin matches the allowed list of origins.</p>
+
+<p>For each policy-controlled feature, the browser maintains a list of origins for which the feature is enabled, known as an allowlist. If you do not specify a policy for a feature, then a default allowlist will be used. The default allowlist is specific to each feature.</p>
+
+<h2 id="Writing_a_policy">Writing a policy</h2>
+
+<p>A policy is described using a set of individual policy directives. A policy directive is a combination of a defined feature name, and an allowlist of origins that can use the feature.</p>
+
+<h3 id="allowlist">allowlist</h3>
+
+<p>allowlist可以使用以下一个或多个值。</p>
+
+<ul>
+ <li><code>*</code>: 允许在当前文档和所有包含的内容（比如iframes）中使用本特性。</li>
+ <li><code>'self'</code>: 允许在当前文档中使用本特性，但在包含的内容（比如iframes）仍使用原值。</li>
+ <li><code>'src'</code>: (只在iframe中允许) 只要在{{HTMLElement('iframe','src','#Attributes')}} 中的URL和加载iframe用的URL相同，则本特性在iframe中允许，</li>
+ <li><code>'none'</code>: 从最上层到包含的内容都禁止本特性。</li>
+ <li>&lt;origin(s)&gt;: 在特定的源中允许，源URL以空格分割。</li>
+</ul>
+
+<p><code>*</code>(在所有源地址启用)<code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">或</span></font>'none'</code>(在所有源地址禁用)只允许单独使用，而<code>'self'</code>和<code>'src'</code>可以与多个源地址一起使用。</p>
+
+<p>所有的特性都有一个如下的默认的allowlist</p>
+
+<ul>
+ <li><code>*</code>: 本特性默认在最上层和包含的内容中（iframes）允许。</li>
+ <li><code>'self'</code>: 本特性默认在最上层允许，而包含的内容中（iframes）使用源地址相同设定。也就是说本特性在iframe中不允许跨域访问。</li>
+ <li><code>'none'</code>: 本特性默认在最上层和包含的内容中（iframes）都禁止。</li>
+</ul>
+
+<h2 id="Specifying_your_policy">Specifying your policy</h2>
+
+<p>Feature Policy provides two ways to specify policies to control features:</p>
+
+<ul>
+ <li>The {{httpheader('Feature-Policy')}} HTTP header.</li>
+ <li>The {{htmlattrxref("allow", "iframe")}} attribute on {{htmlelement("iframe")}}s.</li>
+</ul>
+
+<p>The primary difference between the HTTP header and the <code>allow</code> attribute is that the allow attribute only controls features within an iframe. The header controls features in the response and any embedded content within the page.</p>
+
+<h3 id="The_Feature-Policy_HTTP_header">The Feature-Policy HTTP header</h3>
+
+<p>You can send the <code>Feature-Policy</code> HTTP header with the response of a page. The value of this header is a policy to be enforced by the browser for the given page. It has the following structure.</p>
+
+<pre class="brush: bash">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">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">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">The iframe allow attribute</h3>
+
+<p>The second way to use Feature Policy is for controlling content within an iframe. Use the <code>allow</code> attribute to specify a policy list for embedded content.</p>
+
+<p>For example, allow all browsing contexts within this iframe to use fullscreen:</p>
+
+<pre class="brush: html">&lt;iframe src="https://example.com..." allow="fullscreen"&gt;&lt;/iframe&gt;</pre>
+
+<p>This is equivalent to:</p>
+
+<pre class="brush: html">&lt;iframe src="https://example.com..." allow="fullscreen 'src'"&gt;&lt;/iframe&gt;</pre>
+
+<p>This example allows <code>&lt;iframe&gt;</code> content on a particular origin to access the user's location:</p>
+
+<pre class="brush: html">&lt;iframe src="https://google-developers.appspot.com/demos/..."
+        allow="geolocation https://google-developers.appspot.com"&gt;&lt;/iframe&gt;
+</pre>
+
+<p>Similar to the HTTP header, several features can be controlled at the same time by specifying a semicolon-separated list of policy directives.</p>
+
+<p>For example, this blocks the <code>&lt;iframe&gt;</code> from using the camera and microphone:</p>
+
+<pre class="brush: html">&lt;iframe allow="camera 'none'; microphone 'none'"&gt;
+</pre>
+
+<h2 id="Inheritance_of_policy_for_embedded_content">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">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">&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">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTTP/Feature_Policy">Feature Policy</a></li>
+ <li>{{HTTPHeader("Feature-Policy")}} header</li>
+ <li>{{HTMLElement('iframe','allow','#Attributes')}} attribute on iframes</li>
+ <li>{{HTTPHeader("Content-Security-Policy")}} header</li>
+ <li>{{HTTPHeader("Referrer-Policy")}} header</li>
+</ul>