プライバシーとセキュリティを強化するために、サードパーティの iframe での Web Share API 呼び出しを明示的に許可することが必要になりました。
この記事では、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 で実行する必要がある場合は、最近の仕様変更で、その操作を明示的に許可する必要があります。これを行うには、allow
属性を <iframe>
タグに追加し、値を 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
が返されます。この制限は、ユーザーのプライバシーとセキュリティを改善し、不正な行為者(不正な広告など)によって予期しない共有アクションがトリガーされるのを防ぐために、すべてのブラウザ ベンダーの同意を得ています。