功能政策简介

摘要

功能政策可让网站开发者有选择性地启用、停用和停用这些功能， 在浏览器中修改某些 API 和网络功能的行为。这就像 CSP，但并不控制安全性 控制功能！

功能政策本身只是开发者与 和浏览器等各种工具，帮助我们实现构建（和维护） 优质的 Web 应用。

简介

构建网站是一场精彩的冒险。打造顶尖水平并非易事 提升性能并采用所有最新最佳实践的 Web 应用。平均而言， 让这种体验变得越来越难。随着项目的发展 开发者会参与进来，推出新功能，代码库也在不断壮大。这样 曾经获得的优质体验 TM 可能会开始恶化，用户体验 开始遭受打击！功能政策旨在确保您始终能够正常使用。

借助 Feature Policy，您可以选择使用一组“政策”，以便浏览器 对整个网站使用的特定功能强制执行。这些政策限制 网站可以访问哪些 API 或修改浏览器的默认行为 某些功能

以下是您可以使用 Feature Policy 执行的操作示例：

  • 更改默认行为 的autoplay（在移动设备和第三方视频中）。
  • 限制网站使用敏感 API，例如 camera 或 microphone。
  • 允许 iframe 使用 fullscreen API。
  • 禁止使用过时的 API，例如同步 XHR 和 document.write()。
  • 确保图片大小合适（例如，防止布局抖动），并且图片大小 过大（例如，浪费用户的带宽）。

政策是开发者与浏览器之间的约定。它们会 开发者的意图，这有助于我们在 我们的应用会试图放假，做一些不好的事。如果网站或嵌入的 第三方内容试图违反开发者预先选择的任何内容 规则，浏览器会替换该行为，提供更优质的用户体验，或者阻止该 API

使用功能政策

功能政策提供两种控制功能：

  1. 通过 Feature-Policy HTTP 标头。
  2. 使用 iframe 上的 allow 属性。
。

使用 Feature Policy 的最简单方法是发送 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">
</ph> 违反设置的地理位置政策
违反设置的地理位置政策。

在其他情况下，不妨稍微放宽此政策。我们可以让 我们自己的出发地使用 Geolocation API，但会阻止第三方内容 您可以通过在许可名单中设置 'self' 来访问该 API：

Feature-Policy: geolocation 'self'

iframe allow 属性

使用功能政策的第二种方法是控制 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 标头和 allow 属性，Chrome 74 中新增了 JavaScript API。

利用此 API，客户端代码可以确定 网页、框架或浏览器你可以在 document.featurePolicy（针对主文档）或 frame.featurePolicy（针对主文档） iframe。

示例

以下示例说明了将政策 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"]

政策列表

那么可以通过功能策略控制哪些功能呢？

目前，缺少关于已实施哪些政策的文档 以及如何使用它们随着浏览器数量的不断变化，此列表还会越来越大 采用该规范并实施各种政策。功能政策即将迁移 target 和良好的参考文档是必不可少的。

目前，有两种方法可以查看哪些功能是可控制的。

  • 请观看我们的演示版 Feature Policy Kitchen Sink。其中包含示例 了解 Blink 中已实施的各项政策。
  • 查看 Chrome 的源代码 查看地图项名称列表。
  • 针对 about:blank 查询 document.featurePolicy.allowedFeatures() 以查找列表：
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • 前往 chromestatus.com 查看已应用的政策 或正在考虑使用 Blink。

要确定如何使用上述某些政策，请查看 规范的 GitHub 代码库。 其中对部分政策进行了解释说明。

常见问题解答

何时使用功能政策？

所有政策都是可选择启用的政策，因此请适时或适时地使用功能政策。对于 例如，如果您的应用是一个图库，则 maximum-downscaling-image 政策可帮助您避免向移动设备视口发送巨幅图片。

“document-write”和“sync-xhr”等其他政策应该与更多政策搭配使用 小心。开启这类设置可能会中断广告等第三方内容。在 另一方面，“功能政策”可以进行全面检查，以确保您的网页 从未用过这些糟糕的 API！

我应该在开发或生产环境中使用功能政策吗？

两者都有。我们建议您在开发过程中启用政策，并保留 在生产环境中有效的政策。在开发过程中启用政策 帮助您找到正确的起点。它可以帮助你捕捉到 避免回归问题。在生产环境中启用政策 来保证用户获得某些用户体验

有办法向我的服务器报告违反政策的情况吗？

一个 Reporting API 正在开发中！ 类似于网站选择接收 CSP 违规行为或 弃用，您将 能够接收有关实际违反功能政策的报告。

iframe 内容的继承规则有哪些？

脚本（第一方或第三方）会沿用其浏览政策 上下文。这意味着顶级脚本会继承主文档的政策。

iframe 会继承其父页面的政策。如果 iframe 的 allow 属性，这是父网页和 allow 之间更严格的政策 列表，胜出。如需详细了解 iframe 的用法，请参阅 iframe 中的 allow 属性。

不会。政策的有效期针对的是单页导航响应。如果 当用户导航到新页面时，Feature-Policy 标头必须明确 以便应用政策。

哪些浏览器支持 Feature Policy？

访问 caniuse.com 了解最新信息 。

目前，Chrome 是唯一支持功能政策的浏览器。不过， 因为整个 API Surface 都可选择启用或检测功能，功能政策 非常适合进行渐进式增强。

总结

功能政策有助于为改善用户体验和 。在开发或维护应用时会特别方便 因为这有助于避免潜在“枪手”潜入您的代码库之前。

其他资源：