Web 权限最佳实践

Marian Harbach

Thomas Steiner

权限提示是 Web 保护可能给用户隐私和安全带来危险的强大功能的主要机制。通过权限提示，浏览器旨在确保用户打算允许请求访问权限的网站访问相关功能。权限提示适用于多种 API，包括媒体捕获（相机和麦克风）、地理位置信息、存储空间访问权限、MIDI 和通知（如需了解详情，请参阅 MDN 上的 Permissions API 文档）。

本指南概述了根据 Chrome 使用情况统计信息和用户调查向用户显示权限提示的最佳做法。遵循这些最佳实践后，用户遇到的不必要的提示应该会减少，从而降低开发者收到的“屏蔽”决定。本文最后介绍了一些用于处理需要权限的 API 的代码模式，以及帮助用户从屏蔽状态恢复的最佳实践。

提示最佳实践

您应在用户互动后请求权限，在用户能够理解您请求权限的原因以及授予权限的好处时请求权限。您应尽可能允许用户使用其他方式来实现相同的功能。一般而言，通过谨慎选择请求权限的时机，可以降低用户进入难以恢复的屏蔽状态的几率。以下最佳实践详细介绍了这些建议中的每一条。

切勿在网页加载时或在无用户互动的情况下询问

在网页加载时向用户请求权限，就相当于在客户走进实体店时向其索要敏感信息。看到权限提示（可能在其他几个用于注册简报和 Cookie 意见征求的提示中）会让人感到非常不舒服。用户无法理解系统为何询问此信息以及这对他们有什么好处。

即使您的 Web 应用在没有某项功能的访问权限的情况下无法运行，您也应让用户有机会了解为何需要该权限。例如，在权限提示前面添加您自己的提示，说明需要获取权限的原因并让用户做出选择（例如，尽可能提供其他方式来实现相同的功能）。如果您想不到比页面加载时更好的请求权限时机，请参阅本指南后面的几个示例。

同样的情况是，在没有事先用户互动的情况下请求权限（也称为暂时性用户激活）。Chrome 遥测数据显示，桌面版 Chrome 上 77% 的权限提示在显示时都没有提供这种非常基本的用户意图信号，因此只有 12% 的此类提示会被用户允许。在用户互动后，允许率会提高到 30%。因此，请仅在用户以某种形式与网页互动之后请求权限。

仅在用户能够理解您为何提出问题时才提出问题

权限决策通常是隐私权决策。基于情境完整性框架，我们知道隐私决策与情境高度相关。了解为什么需要访问权限可以视为一个关键方面。因此，您应仅请求为用户提供价值所需的功能（并且用户可能会同意您确实会为他们带来价值）。此外，您应在用户清楚为何需要相应功能时请求权限。目的是让用户尽可能轻松地了解使用情境。

我们的用户研究表明，如果用户了解网站请求访问权限的原因，并且能感受到好处，他们授予访问权限的可能性会大幅提高。我们还发现，用户希望先探索陌生网站，以便更好地了解允许访问后可以获得的价值。在此期间，他们通常会关闭或忽略权限提示。在单次授权的情况下，他们可能会先允许单次访问。您的应用需要支持这些行为。

尽可能提供其他方式来实现相同的功能

部分功能的结果可能对用户没有帮助。例如，没有 GPS 传感器的桌面设备的地理定位可能会返回错误的位置信息，因为该用户已连接到 VPN。其他用户可能不想提供剪贴板访问权限，因为他们更喜欢保持控制权，并手动使用按键组合触发这些事件。在这种情况下，请务必提供其他方式来实现相同的结果。例如，如果要请求地理定位权限，请提供一个文本字段，以便用户自行输入邮政编码或地址。对于剪贴板，请确保要复制的元素还可以通过按键组合或上下文菜单进行选择和复制。在通知中，提供用户接收电子邮件（而非推送通知）的选项。

一种有用的模式是，同时使用备选界面来说明访问此界面可能有益的原因。如果用户在触发地理位置 API 的按钮旁边看到用于输入位置信息的选项，就会觉得自己可以控制接下来会发生的情况，因为他们知道自己也可以直接输入地址。同样，如果用户可以选择通过推送通知或电子邮件接收通知，或者在加入会议时不允许访问相机和麦克风，那么用户更容易理解自己做出的权衡。

不要让自己陷入被屏蔽的状态，很难从中恢复

一旦用户决定永久禁止访问受权限控制的功能，浏览器就会遵循该决定。如果可以继续提示用户授予访问权限，恶意网站就会不断向用户发出提示。因此，从功能的阻塞状态中恢复时，用户需要付出一些精力。因此，请避免在很多用户可能不允许访问的情况下请求用户授予权限。

常见的方法是使用所谓的预提示，在其中向用户说明即将发生的情况以及应用为何需要您要请求的功能。只有当用户对此类预先提示做出肯定回应时，您才应触发浏览器的权限提示。在某些情况下，用户可能有正当理由需要从该状态恢复。如需了解详情，请参阅帮助用户从屏蔽状态恢复部分。

注意第三方内容

请注意，有一种意外的权限提示来源。如果您在网站上添加了第三方脚本，这些脚本可能会触发您不打算显示的权限提示。这可能会影响用户对您网站的体验，尤其是当此类提示不遵循上述最佳实践时。为了更好地控制用户体验，您应仔细阅读您添加到自己代码中的所有第三方库和脚本的文档。

何时请求权限

以下是一些遵循上述最佳实践的适合请求权限的时机示例：

• 用户点击用于手动输入地址的表单字段旁边的“使用我的位置”按钮后。
• 用户订阅视频频道或帖子后，点击对话框中说明可以通过电子邮件或通知将动态发送到其手机或桌面设备的肯定按钮。
• 用户到达准备加入视频通话的页面后，在预设提示中肯定地回答他们希望在视频通话中展示自己的画面和声音（请参阅这篇 Google Meet 案例研究）。

请求权限的代码模式

获取使用 API 的权限的方式因 API 而异。某些（通常是较旧的）API 采用的模型是，浏览器会在您首次尝试使用该 API 时自动请求权限。例如，调用 navigator.geolocation.getCurrentPosition() 时，Geolocation API 会产生费用。

try {
  navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
  console.error(error);
}

在其他 API 中，您需要使用静态方法明确请求权限。一个很好的示例是用于允许通知的 Notification.requestPermission()，或不太常见的 DeviceOrientationEvent.requestPermission()（属于 Device Orientation Events API）。请注意，某些浏览器可能会自动向给定 API 授予权限。例如，Chrome 始终允许访问设备的屏幕方向，而 Safari 会显示提示。

const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
  /* Use the API. */
}

如何查看权限状态

如需检查您是否可以使用某个 API，请使用 Permissions API 中的 navigator.permissions.query() 方法。

const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
  // Use the API.
}

帮助用户从屏蔽状态恢复

如需帮助用户排查访问权限问题，请使用 Permissions API 检测用户是否已屏蔽访问权限，并向他们提供有关如何更改设置的指南。例如，当用户与与需要权限的功能关联的界面元素互动时，请使用上一部分中所述的模式并打开问题排查对话框。更改权限状态的确切步骤因浏览器而异，因此您可能需要根据用户代理字符串以及您产品中最常用的浏览器提供匹配的说明。

在 Chrome 中，用户应点击地址栏左侧的“调整”图标，前往网站控制。在这里，他们可以开启相应的权限。在某些情况下，他们可能需要先重新加载页面，然后才能使用该功能。在这种情况下，窗口顶部会显示一条消息栏，点击相应按钮即可重新加载。

其他浏览器中也存在用于控制权限的类似界面（例如，了解此功能在 Firefox 中的运作方式）。