针对第三方 iframe 中的 Web Share API 的新要求

为了更好地保护隐私和安全，现在需要明确允许在第三方 iframe 中进行 Web Share API 调用。

Thomas Steiner

本文介绍了 Web Share API 的一项潜在重大变更。此更改已在 Firefox 中实施，将在 Chrome 110 版中实施，并且预计很快会在 Safari 中实施。

借助 Web Share API，您可以分享文本、网址或文件。最简单的分享代码如下所示：

try {
  await navigator.share({
    title: 'Title',
    text: 'Text',
    url: location.href,
  });
} catch (err) {
  console.error(`${err.name}: ${err.message}`);
}

如果分享操作需要在第三方 iframe 中执行，近期的规范变更要求您明确允许此操作。为此，请向 <iframe> 标记添加 allow 属性，并将其值设为 web-share。这会告知浏览器，嵌入网站允许嵌入的第三方 iframe 触发共享操作。

<!DOCTYPE html>
<html lang="en">
  <body>
    <h1>Web Share in third-party iframes</h1>
    <!-- The embedding page is hosted on https://example.com/index.html. -->
    <iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
  </body>
</html>

您可以在 Glitch 上的演示中查看此操作的实际运行情况，并查看源代码。如果未提供该属性，将会导致 NotAllowedError 并显示消息 Failed to execute 'share' on 'Navigator': Permission denied。所有浏览器供应商都同意了此限制，以改善用户的隐私和安全，并防止不良行为者（例如滥用广告）触发意外的分享操作。