プライバシーとセキュリティを強化するため、サードパーティの iframe での Web Share API 呼び出しは明示的に許可する必要があります。
Thomas Steiner
この記事では、Web Share API の互換性を破る可能性のある変更について説明します。この変更はすでに Firefox に実装されており、Chrome バージョン 110 以降に実装され、Safari にもまもなく実装される予定です。
Web Share API を使用すると、テキスト、URL、ファイルを共有できます。最もシンプルな形式の共有コードは次のようになります。
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>
GitHub のデモでこの動作を確認し、ソースコードを表示できます。属性を指定しないと、Failed to execute 'share' on 'Navigator': Permission denied というメッセージとともに NotAllowedError が発生します。この制限は、ユーザーのプライバシーとセキュリティを強化し、悪意のある広告などの不正行為者が予期しない共有アクションをトリガーすることを防ぐために、すべてのブラウザ ベンダーが合意したものです。