第三方 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。所有瀏覽器供應商都同意這項限制，以改善使用者的隱私和安全性，並防止惡意行為人 (例如濫用廣告) 觸發意外的分享動作。