第三方 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 訊息。這項限制是由所有瀏覽器廠商同意，目的是改善使用者的隱私和安全性，並防範惡意行為人 (例如不當廣告) 觸發非預期的分享動作。