サードパーティの iframe での Web Share API に関する新しい要件

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