Web 权限最佳实践

Marian Harbach
Marian Harbach
X
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.
}

浏览器支持

  • Chrome：43.
  • Edge：79。
  • Firefox：46.
  • Safari：16。

来源

帮助用户从屏蔽状态恢复

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

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

Chrome 浏览器中的网站控件。

使用网站控件更改权限后显示的重新加载提示。

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