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

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

本文介绍了 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。所有浏览器供应商都同意了此限制,目的是更好地保护用户的隐私和安全,并防止不良行为者(例如滥用广告)触发意外的分享操作。