このページは Cloud Translation API によって翻訳されました。

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