Web 权限最佳实践

权限提示是 Web 保护可能给用户隐私和安全带来危险的强大功能的主要机制。通过权限提示,浏览器旨在确保用户愿意让提出请求的网站访问相关功能。许多 API 都会使用权限提示,包括媒体捕获(摄像头和麦克风)、地理定位、存储空间访问权限、MIDI 和通知(如需了解详情,请参阅 MDN 的 Permissions API 文档)。

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

提示最佳实践

您应该在用户互动之后请求用户授予权限,此时用户应该就能明白您提出请求的原因,以及同意会带来什么好处。您应尽可能允许用户使用其他方式来实现相同的功能。一般而言,选择您谨慎请求权限的时刻以降低请求权限的频率,有助于降低用户进入难以恢复的被阻止状态的几率。以下最佳做法详细介绍了各项建议。

加载网页时或在没有用户互动的情况下一律不询问

在网页加载时请求用户授予权限相当于在客户走进实体店时向其索要一条敏感信息。看到权限提示(可能是关于简报注册和 Cookie 意见征求的其他几个提示)会非常令人不快。用户无法理解为什么要提出这样的要求以及这会带来哪些好处

即使您的 Web 应用没有某项功能的访问权限就无法运行,您也应该让用户有机会了解需要该功能的原因。例如,在权限提示前面添加您自己的提示,说明需求并为用户提供选择(例如,在可能的情况下,提供实现相同功能的替代方法)。如果您认为请求权限比网页加载时更合适,本指南后面提供了几个示例。

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

仅在用户能够理解您询问的原因时询问

权限决策通常是隐私决策。基于情境完整性框架,我们知道隐私决策与情境高度相关。了解为什么需要访问权限可以视为一个关键方面。因此,您应仅请求那些需要为用户提供价值的功能(并且在用户很可能同意您,他们确实会获得价值的情形)下。此外,您应该在用户显而易见到该功能有帮助的时刻请求权限。目的是让用户尽可能容易地了解使用情境。

我们的用户研究表明,当用户了解网站要求访问的原因并认识到网站好处时,他们通常会更有可能允许访问。我们还发现,用户希望先探索陌生网站,以便更好地了解允许访问可换来的价值。在此期间,他们通常会关闭或忽略权限提示。而对于单次访问,它们可能允许先访问一次。您的应用需要支持这些行为。

请尽可能提供实现相同功能的替代方法

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

一种有用的模式是,将备用界面也用作解释访问权限可能有益的原因。如果用户在触发 Geolocation 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.
}

浏览器支持

  • 43
  • 79
  • 46
  • 16

来源

帮助用户从阻塞状态恢复

为了帮助用户排查访问问题,请检测用户是否使用 Permissions API 阻止了访问,并为用户提供有关如何更改设置的指南。例如,当用户与与受权限控制的功能相关联的界面元素互动时,请使用上一部分中介绍的模式并打开问题排查对话框。更改权限状态的具体步骤因浏览器而异,因此您可能需要根据用户代理字符串以及您产品中最常用的浏览器提供匹配的说明。

在 Chrome 中,用户应通过点击地址栏左侧的“调整”图标转到网站控件。在这里,他们可以开启相应的权限。在某些情况下,他们可能需要重新加载页面才能使用该功能。在这种情况下,窗口顶部会显示一个消息栏,提示您在点击相应的按钮时重新加载。

Chrome 浏览器中的网站控件。

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

其他浏览器中也存在类似的权限控制界面(例如,查看在 Firefox 中的工作原理)。