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