佛山网站开发：使用功能策略保护您的站点

在最近的Chrome Dev Summit中突出显示的一个网络平台功能是功能策略，旨在“允许网站作者有选择地启用和禁用各种浏览器功能和API的使用。”在本文中，我将介绍一下这对于Web开发人员来说意味着一些实际的例子。

在他的Google Developers网站上的介绍性文章中，Eric Bidelman将功能策略描述如下：

“功能政策本身很少是开发人员和浏览器之间的选择协议，这有助于促进我们构建（和维护）高质量网络应用程序的目标。”

该规范是作为Web平台孵化器组活动的一部分在Google开发的。作为Web开发人员，功能策略的目的是让我们能够明确地向浏览器声明我们对Web平台功能的使用。通过这样做，我们就使用或不使用此特定功能达成协议。基于此，浏览器可以阻止某些功能，或者向我们报告它正在使用的功能。

示例可能包括：

1. 我正在嵌入一个iframe，我不希望嵌入式网站能够访问访问者的摄像头;

2. 我想抓住通过CMS将未经优化的图像部署到我的网站的情况;

3. 有许多开发人员正在处理我的项目，我想知道他们是否使用过时的API，如document.write。

佛山网站开发作为功能策略的一部分，可以跟踪，阻止或报告所有这些内容。

如何使用功能策略

为了使用功能策略，浏览器需要知道两件事：您要为其创建策略的功能，以及您希望如何处理该功能。

Feature-Policy: <directive> <allowlist>

这<directive>是您要设置策略的功能的名称。

当前的功能列表（源自Chrome Dev Summit的演示文稿）如下：

• 加速度计

• 环境光传感器

• 自动播放

• 相机

• 文件写入

• 加密媒体

• 全屏

• 地理位置

• 陀螺仪

• 布局动画

• lazyload

• 传统图像的格式

• 磁力仪

• MIDI

• 超大图像

• 付款

• 子母画面

• 扬声器

• 同步脚本

• 同步XHR

• 未经优化的图像

• 未上浆媒体

• USB

• 垂直滚动

• VR

在<allowlist>细节功能如何使用-如果有的话-并采取下列值中的一个或多个。

• *
  最宽松的政策，声明此功能将在本文档中使用，以及任何iframe，无论是来自此域还是其他地方。可能只能用作单个值，因为启用所有内容并传入域列表是没有意义的。

• self
  该功能将在文档和任何iframe中提供，但iframe必须具有相同的来源。

• src
  仅在使用iframe allow属性时适用。只要加载到其中的文档来自与iframe的src属性中的URL相同的原点，这就允许使用该功能。

• none
  禁用文档和任何嵌套iframe的功能。可能只能用作单个值。

• <origin(s)>
  该特征允许特定的起源; 这意味着您可以指定允许该功能的域列表。域列表是空格分隔的。

您可以通过两种方法在站点上启用功能策略：您可以发送HTTP标头，或allow在iframe上使用该属性。

HTTP标头

发送HTTP标头意味着您可以为页面或整个站点设置该标题以及站点中嵌入的任何内容的功能策略。可以在Web服务器上为整个站点设置标头，也可以从应用程序发送标头。

例如，如果我想阻止使用地理位置API并且我使用NGINX网络服务器，我可以在NGINX中编辑我的网站的配置文件以添加以下标题，这将阻止我的网站中的任何文档和任何使用geolocation API嵌入iframe。

add_header Feature-Policy "geolocation none;";

可以在单个标头中设置多个策略。为了防止地理位置和振动，但允许unsized-media从域example.com我可以设置以下内容：

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

allowIFRAME上的属性

如果我们主要关注iframe中的内容会发生什么，我们可以在iframe上使用功能策略; 这得益于在撰写本文时使用Chrome和Safari支持此用途的稍微更好的浏览器支持。

如果我嵌入网站并且不希望该网站使用地理定位，相机或麦克风API，那么我的iframe将如下所示：

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

你可能已经熟悉了该控制I帧的内容的各个属性allowfullscreen，allowpaymentrequest和allowusermedia。这些可以由功能策略allow属性替换，并且出于浏览器兼容性原因，您可以在iframe上使用它们。如果您同时使用这两个属性，那么将应用最严格的属性。Google文章显示了一个使用iframe的示例allowfullscreen- 意味着iframe可以进入全屏，但之后是一个冲突的功能策略fullscreen none。这些冲突，因此限制性最强的政策获胜，并且不允许此iframe进入全屏。

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

iframe元素还具有sandbox用于管理对许多功能的支持的属性。此功能还添加到内容安全策略中，其sandbox值为禁用所有沙箱功能，然后可以选择性地选择这些功能。沙箱功能与功能策略控制的功能之间存在一些交叉，功能策略不会尝试复制沙箱已覆盖的值。但是，它确实通过采用更细粒度的方法来管理这些策略来解决沙箱的一些局限性，而不是将全局作为一个大型策略集关闭。

功能政策和报告API

可以通过Reporting API报告功能政策违规，这意味着您可以开发一套全面的政策来跟踪整个网站的功能使用情况。这对您的用户来说是完全透明的，但会为您提供有关如何使用功能的大量信息。

浏览器支持功能策略

目前，浏览器对功能政策的支持仅限于Chrome，但是，在开发过程中使用功能策略的许多情况下以及预览网站时，这不一定是个问题。

我将在下面概述的许多用例现在都可以使用，而不会对使用没有支持的浏览器的网站访问者造成任何影响。

何时使用功能策略

我真的很喜欢能够使用功能策略来帮助支持开发网站时做出的决策。可能会在绩效预算等文件中或作为GDPR审核的一部分写出的决定，但这些决定后来成为我们必须记住在网站生命周期中保留的内容。当多个人在网站上工作时，这并不总是那么容易; 在初始决策过程中可能没有参与的人，或者可能只是不了解要求。我们考虑很多关于第三方管理以某种方式影响我们的网站，但是，有时我们的网站需要保护我们自己！

密切关注第三方

您可以使用allow属性iframe上的功能策略阻止第三方网站访问摄像头或麦克风。如果嵌入该网站的原因与这些功能无关，那么禁用它们意味着网站永远不会开始要求这些功能。然后，这可以与您的流程相关联，以确保符合GDPR。在审核您网站的隐私影响时，您可以通过功能策略建立锁定第三方访问权限的流程 - 为您和您的访问者提供额外的安全性，让您高枕无忧。

此用法确实依赖浏览器对功能策略的支持来阻止使用。但是，如果第三方更改了他们将要执行的操作，您可以使用功能策略报告模式通知您这些API的使用情况。这将为您提供一个非常快速的提醒 - 基本上只要第一个使用Chrome的人访问该网站。

有选择地启用功能

我们还可能希望有选择地启用一些通常被阻止的功能。也许我们希望允许来自其他站点的iframe加载内容使用浏览器中的地理定位功能。Chrome默认阻止此操作，但如果您要从受信任的站点加载内容，则可以使用功能策略启用跨源请求。这意味着您可以在从您控制的其他域加载内容时安全地启用功能。

捕获使用过时的API和表现不佳的功能

功能策略可以仅报告模式运行。然后，它可以跟踪某些功能的使用情况，并让您知道它们何时在网站上找到。这在许多情况下都很有用。如果您的网站非常庞大且包含大量遗留代码，则启用功能策略可帮助您跟踪需要关注的位置。如果您与大型团队合作（特别是如果开发人员经常引入一些第三方代码库），则功能策略可以捕获您不希望在网站上看到的内容。

处理效果不佳的图像

虽然我见过的关于功能政策的大部分文章都集中在安全性和隐私方面，但图像优化的功能确实吸引了我，因为他处理了技术和非技术用户生成的大量内容。功能策略可用于通过防止访问者下载过大或未优化的图像来帮助保护用户体验以及网站性能。

在理想的世界中，您的CMS将处理图像管理，确保图像被合理调整大小，针对Web和将显示的上下文进行优化。但是，现实生活很少是理想世界，因此有时候调整大小的工作优化图像留给内容编辑者，以确保他们不会将巨大的图像上传到网络。如果您使用的是静态CMS而没有内容管理层，则尤其如此。即使作为技术人员，也很容易忘记调整您作为占位符弹出到文件夹中的巨型屏幕截图或相机图像的大小。

目前Chrome背后的旗帜是可以提供帮助的功能。这些功能背后的想法是突出显示有问题的图像，以便可以修复它们 - 而不会完全破坏网站。

该unsized-media功能政策查找图像或视频不具有尺寸在HTML或CSS设置。加载未大小的媒体元素时，可能会导致页面上的内容重排。

为了防止将任何未大小的媒体添加到站点，请设置以下标头。然后将显示媒体，默认大小为300×150像素。您将看到您的网站加载小媒体，并意识到您有一个问题需要解决。

Feature-Policy: unsized-media 'none'

查看演示（需要具有实验性Web平台功能的Chrome Canary）。

该oversized-images功能策略检查看到，图像不超过其容器得多大。如果是，则会显示占位符。此策略非常有用，可以检查您是否未向移动用户发送大量桌面映像。

Feature-Policy: oversized-images 'none'

查看演示（需要具有实验性Web平台功能的Chrome Canary）。

该unoptimized-images功能策略检查，看是否以字节为单位的图像的数据尺寸比其像素渲染大面积不超过0.5倍。如果启用此政策并且图片违反了此政策，则会显示占位符而不是图片。

Feature-Policy: unoptimized-images 'none'

查看演示（需要具有实验性Web平台功能的Chrome Canary）。

功能策略的测试和报告

Chrome DevTools会显示一条消息，通知您某些功能已被功能政策阻止或启用。如果您在站点上启用了功能策略，则可以检查这是否正常。

安全标题网站也添加了对功能政策的支持，这意味着您可以检查这些标题以及您网站上的内容安全策略或网络上的其他网站。

有一个Chrome的DevTools扩展，它可以让您开启或关闭不同功能的策略（也是一个伟大的方式来检查您的网页，而无需配置任何头）。

如果您想获得与报告API整合你的功能的策略，那么在如何做到这方面的详细信息在这里。

进一步阅读和资源

我找到了许多资源，其中很多都是我在研究这篇文章时使用的。这些应该为您提供在自己的应用程序中开始实现功能策略所需的一切。如果您已经在使用内容安全策略，这似乎是控制您的网站使用浏览器的方式的另一个合理步骤，以帮助确保使用您网站的用户的安全性和隐私。您还可以使用功能策略来帮助您随时了解添加到网站中的性能损坏元素。

佛山网站开发