Web Share API

概要

この仕様は、テキスト、リンク、その他のコンテンツをユーザーが選択した任意の送信先に共有するためのAPIを定義します。

利用可能な共有先はこの仕様では指定されていません。ユーザーエージェントが提供します。例えば、アプリ、ウェブサイト、連絡先などが考えられます。

このセクションは規範的ではありません。

この例は基本的な共有操作を示します。ボタンのクリックに応じて、このJavaScriptコードは現在のページのURLを共有します。

例 1: テキストとURLの共有

shareButton.addEventListener("click", async () => {
  try {
    await navigator.share({ title: "Example Page", url: "" });
    console.log("Data was shared successfully");
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});

url が '' の場合は、リンクと同様に現在のページURLを指します。他の絶対URLや相対URLも使用できます。

share() の呼び出しに応じて、ユーザーエージェントはピッカーや選択ダイアログを表示し、ユーザーがタイトルとページURLの共有先を選択できるようにします。

この例はファイルを共有する方法を示します。files メンバーは配列であり、複数のファイルを共有できます。

例 2: ファイルの共有

shareButton.addEventListener("click", async () => {
  const file = new File(data, "some.png", { type: "image/png" });
  try {
    await navigator.share({
      title: "Example File",
      files: [file]
    });
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});

canShare() メソッドに ShareData 辞書を渡すと、共有データの検証が行われます。share() と異なり、一時的なアクティベーションなしで呼び出すことができます。

例 3

const file = new File([], "some.png", { type: "image/png" });

// ファイルがサポートされているか確認
if (navigates.canShare({files: [file]})) {
  // pngファイルの共有はおそらく可能です...
}

// URLの共有が可能か確認
if (navigates.canShare({ url: someURL })) {
  // URLは有効で、共有可能です...
}

WebIDL辞書の仕様により、share() にユーザーエージェントが認識しないメンバーを渡した場合、それらは無視されます。複数のメンバーを共有する際、ユーザーエージェントが一部のメンバーをサポートしない場合は問題となることがあります。すべてのメンバーがサポートされていることを確認したい場合は、canShare() に個別に渡してサポートされているか確認できます。

例 4: 共有の将来対応

const data = {
  title: "Example Page",
  url: "https://example.com",
  text: "This is a text to share",
  someFutureThing: "some future thing",
};
const allSupported = Object.entries(data).every(([key, value]) => {
  return navigator.canShare({ [key]: value });
});
if (allSupported) {
  await navigator.share(data);
}

または、サポートされていないメンバーのUIコンポーネントを表示しないようにアプリケーションのUIを調整することもできます。

例 5: サポートされていないメンバーの除外

const data = {
  title: "Example Page",
  url: "https://example.com",
  text: "This is a text to share",
  someFutureThing: "some future thing",
};

// サポートされていないもの...
const unsupported = Object.entries(data).filter(([key, value]) => {
  return !navigator.canShare({ [key]: value });
});

デフォルトの許可リストである 'self' により、Web Share APIはデフォルトでファーストパーティコンテキストでのみ利用可能です。

サードパーティは、iframeの allow 属性を使って、このAPIの利用を許可できます：

例 6: サードパーティコンテキストでweb-share APIを有効化

<iframe
  src="https://third-party.example"
  allow="web-share">
</iframe>

また、ファーストパーティコンテキストでAPIを無効化するには、HTTPレスポンスヘッダーを指定します：

例 7: Permissions Policyを使ったWeb ShareのAPI HTTP無効化

Permissions-Policy: web-share=()

詳細やオリジンごとのパーミッションポリシーの制御方法については Permissions Policy 仕様をご参照ください。

WebIDLpartial interface Navigator {
  [SecureContext] Promise<undefined> share(optional ShareData data = {});
  [SecureContext] boolean canShare(optional ShareData data = {});
};

このAPIは Navigator インターフェイスに以下の内部スロットを追加します。

Promise? [[sharePromise]]: this.[[sharePromise]] は、ユーザーが現在データを共有先に共有しようとする意図を表すPromiseです。初期値は null です。

MDN✅

Navigator/share

この機能は全ての主要エンジンで利用可能です。

Chrome	89+
Chrome Android	61+
Edge	未対応
Edge Mobile	?
Firefox	71+
Firefox Android	79+
Opera	?
Opera Android	48+
Safari	12.1+
Safari iOS	?
Samsung Internet	?
WebView Android	未対応

share() メソッドが引数 data を指定して呼び出された場合、以下のセキュリティ上の影響を考慮しながら、以下に列挙された手順を実行する。

Web Share を使用すると、ウェブサイトから共有ターゲットへデータを送信でき、これはネイティブアプリケーションである場合がある。この機能は Web Share に固有のものではないが、潜在的なセキュリティリスクが多数存在し、その深刻度は（基盤となるプラットフォームによって）異なる可能性がある。

share() に渡されたデータは、共有を受信する共有ターゲットに存在するバッファオーバーフローやその他のリモートコード実行脆弱性を悪用するために使用される可能性がある。これを防ぐ一般的な方法は存在しないが、実装者はその可能性があることを認識しておく必要がある（特にファイルを共有する場合）。

共有された URL を参照解除し、その情報を転送する共有ターゲットは、本来は機密である可能性のある情報を、意図せず転送してしまう場合がある。共有が、そのアプリケーション、それが実行されるホスト、またはそのネットワーク上の場所からのみアクセス可能なコンテンツを参照している場合、予期しない情報漏洩につながる可能性がある。

悪意のあるサイトは、最終的にローカルリソースへ解決される URL を提供することで、情報を漏洩する共有ターゲットを悪用する可能性がある。これには、"file:" URL や、通常であればアクセスできない可能性があるローカルサービスなどが含まれるが、それらに限定されない。この API では共有される URL を制限された一連の共有可能なスキームに限定しているものの、他の URL へのリダイレクトや、それらの URL 内のホストに対する DNS レコードの変更を利用して、アプリケーションにコンテンツを取得させる可能性がある。

これらの攻撃に利用されることを避けるため、共有ターゲットは URL を受け取り、コンテンツを取得し、その情報を共有せずに処理できる。たとえば、写真編集アプリケーションは、自身に「共有」された画像を取得する場合がある。共有ターゲットはまた、参照先コンテンツを一切取得せずに URL を共有することもできる。

プレビューの提供またはコンテンツの共有を目的としてコンテンツを取得する共有ターゲットには、情報漏洩のリスクがある。ユーザーによってプレビューされ、許可されたコンテンツは転送しても安全である可能性があるが、どの情報を機密とすべきかを人が常に判断できるとは限らないため、あらゆるコンテンツの転送にはリスクが伴う。特に、title は、攻撃者がコンテンツの性質をユーザーに誤認させるために使用する可能性がある（5. アクセシビリティに関する考慮事項も参照）。

DOMException を使用するあらゆる場合と同様に、実装者は、 share() が拒否されたときに、エラーメッセージでどのような情報が明らかになるかを慎重に考慮する必要がある。利用可能な共有ターゲットが存在しない場合と、ユーザーによるキャンセルの場合を区別するだけでも、ユーザーのデバイスにどの共有ターゲットがインストールされているかに関する情報が明らかになる可能性がある。

global を this の関連するグローバルオブジェクトとする。
document を global の関連付けられた Documentとする。
document が完全にアクティブでない場合、"InvalidStateError" DOMException で拒否された promiseを返す。
document が使用を許可されていない "web-share" の場合、 "NotAllowedError" DOMException で拒否された promiseを返す。
this.[[sharePromise]] が null でない場合、 "InvalidStateError" DOMException で拒否された promiseを返す。
global が一時的なアクティベーションを持たない場合、"NotAllowedError" DOMException で拒否された promiseを返す。
global のユーザーアクティベーションを消費する。
base を this の関連する設定オブジェクトの API ベース URLとする。
data と base を用いて共有データを検証した結果が false を返す場合、TypeError で拒否された promiseを返す。
data の url メンバーが存在する場合:
1. url を、data の url に対し base を用いて URL パーサーを実行した結果とする。
2. 表明: url は URL である。
3. data を data のコピーに設定し、その url メンバーを、url に対して URL シリアライザーを実行した結果に設定する。
セキュリティ上の考慮事項によりファイルタイプがブロックされている場合、 "NotAllowedError" DOMException で拒否された promiseを返す。
this.[[sharePromise]] を新しい promise に設定する。
this.[[sharePromise]] を返し、並行して:
1. 利用可能な共有ターゲットが存在しない場合、global を使用してユーザーインタラクションタスクソース上にグローバルタスクをキューに入れ、次を行う:
  1. this.[[sharePromise]] を "AbortError" DOMException で拒否する。
  2. this.[[sharePromise]] を null に設定する。
  3. このアルゴリズムを終了する。
2. ユーザーに 1 つ以上の共有ターゲットの選択肢と、操作を中止する機能を提示する。この UI サーフェスはセキュリティ確認として機能し、ウェブサイトがネイティブアプリケーションへ密かにデータを送信できないようにする。ユーザーエージェントは、ユーザーが共有されるコンテンツを確認できる中間 UI を（OS レベルの UI がこの機能を提供しない場合）表示するべきである。
3. ユーザーの選択を待つ。
4. ユーザーが共有操作の中止を選択した場合、global を使用してユーザーインタラクションタスクソース上にグローバルタスクをキューに入れ、次を行う:
  1. this.[[sharePromise]] を "AbortError" DOMException で拒否する。
  2. this.[[sharePromise]] を null に設定する。
  3. このアルゴリズムを終了する。
5. 選択された共有ターゲットをアクティブ化し、 data をターゲットに取り込むのに適した形式へ変換し、変換されたデータをターゲットへ送信する。
6. ターゲットの起動またはデータの送信中にエラーが発生した場合、 global を使用してユーザーインタラクションタスクソース上にグローバルタスクをキューに入れ、次を行う:
  1. this.[[sharePromise]] を "DataError" DOMException で拒否する。
  2. this.[[sharePromise]] を null に設定する。
  3. このアルゴリズムを終了する。
7. データが共有ターゲットへ正常に送信されたか、または OS へ正常に送信された時点で（共有ターゲットへの送信を確認できない場合）、 global を使用してユーザーインタラクションタスクソース上にグローバルタスクをキューに入れ、次を行う:
  
  注記
  
  共有ターゲットにペイロードが渡された時点で、共有は成功したものとみなされる。ターゲットがそのデータを受け入れられないと判断した場合、またはエラーが発生した場合は、正常に回復するか、エンドユーザーにエラーメッセージを表示できるが、送信側がエラーを処理することを期待することはできない。言い換えると、 share() メソッドは「ファイア・アンド・フォーゲット」であり、ターゲットがペイロードを承認または拒否するまで待機しない。
  1. this.[[sharePromise]] を undefined で解決する。
  2. this.[[sharePromise]] を null に設定する。

MDN✅

Navigator/canShare

この機能は全ての主要エンジンで利用可能です。

Chrome	89+
Chrome Android	75+
Edge	未対応
Edge Mobile	?
Firefox	96+
Firefox Android	96+
Opera	?
Opera Android	?
Safari	14+
Safari iOS	?
Samsung Internet	?
WebView Android	未対応

canShare() メソッドが引数 ShareData data を指定して呼び出された場合、次の手順を実行する:

document を this の関連するグローバルオブジェクトの関連付けられた Document とする。
document が完全にアクティブでない場合、false を返す。
document が使用を許可されていない "web-share" の場合、 false を返す。
data と this の関連する設定オブジェクトの API ベース URLを用いて共有データを検証した結果を返す。

注記: canShare() は将来互換ではない

Web Share API の canShare() メソッドは、ShareData 辞書で定義されていないメンバーを含むオブジェクトとともに使用すると、偽陽性の結果を返す可能性がある。WebIDL の動作方法により、ブラウザーは入力オブジェクトから未知のメンバーを破棄し、残りのメンバーをテストすると true を返す。この動作は将来互換ではない。

共有可能性を確実にテストするため、開発者は ShareData 辞書で定義されているメンバーだけを使用して入力オブジェクトを構築できる。オブジェクトに追加のメンバーが含まれている場合、定義されたメンバーだけを個別にテストするよう分割代入するべきである。

これは現在のどの実装にも影響しないが、ワーキンググループは仕様の将来の改訂でこの問題への対処に取り組む予定である。特に ShareData 辞書に何らかの修正を加える場合が該当する。この問題への対処方法に関するアイデアを提案するには、GitHub の Issue #108 を参照されたい。

共有可能なスキームとは、以下の URL スキームのいずれかです：

http
https
ユーザーエージェントが共有目的でサポートする安全リスト化されたスキーム

共有データの検証を data と base で実行するには、次の手順を実行します：

data の title, text、url、files のいずれも存在しない場合、false を返します。
title、text、url のいずれかが存在する場合、titleTextOrUrl を true とします。
data の files メンバーが存在する場合：
1. titleTextOrUrl が false で、data の files メンバーが空の場合、false を返します。
  
  注記
  
  { files: [] } のような辞書は空辞書として扱われます。ただし {text: "text", files: []} のような辞書は、files が単に無視されるだけなので問題ありません。
2. 実装がファイル共有をサポートしていない場合、false を返します。
3. ユーザーエージェントが files 内のいずれかのファイルが悪意ある共有（内容・サイズ・その他特徴によって悪意があると判断した場合）になると考える場合、false を返します。
data の url メンバーが存在する場合：
1. url を URLパーサーで data の url メンバーと base を使い、エンコーディングオーバーライド無しで実行した結果とします。
2. url が失敗の場合、false を返します。
3. url のスキームがローカルスキーム、file、javascript、ws、wss のいずれかの場合、false を返します。
4. url のスキームが共有可能なスキームでない場合、false を返します。
true を返します。

WebIDLdictionary ShareData {
  sequence<File> files;
  USVString title;
  USVString text;
  USVString url;
};

ShareData 辞書は複数のオプションのメンバーで構成されています：

files メンバー: 共有するファイル。
text メンバー: 共有されるメッセージ本文となる任意のテキスト。
title メンバー: 共有される文書のタイトル。共有先によっては無視される場合があります。
url メンバー: 共有されるリソースを指すURL文字列。

注記

Web Share API

概要

この文書のステータス

実装状況

1. 使用例

1.4 メンバーのサポート状況の確認

1.5 サードパーティコンテキストでのAPI有効化

2. API定義

2.1 `Navigator` インターフェイスへの拡張

2.1.1 内部スロット

2.1.3 `canShare(data)` メソッド

2.2 `ShareData` 辞書

4. Permissions Policy との統合

6. プライバシーに関する考慮事項

7. 適合性

8. IDL索引

9. 変更履歴

A. 謝辞

B. 参考文献

B.1 規範的参考文献

B.2 参考情報

Web Share API

概要

この文書のステータス

実装状況

1. 使用例

1.1 テキストとリンクの共有

1.2 ファイルの共有

1.3 共有の検証

1.4 メンバーのサポート状況の確認

1.5 サードパーティコンテキストでのAPI有効化

2. API定義

2.1 Navigator インターフェイスへの拡張

2.1.1 内部スロット

2.1.2 share() メソッド

2.1.3 canShare(data) メソッド

2.1.4 共有データの検証

2.2 ShareData 辞書

3. 共有先

3.1 共有先の例

4. Permissions Policy との統合

5. アクセシビリティに関する考慮事項

6. プライバシーに関する考慮事項

7. 適合性

8. IDL索引

9. 変更履歴

A. 謝辞

B. 参考文献

B.1 規範的参考文献

B.2 参考情報

2.1 `Navigator` インターフェイスへの拡張

2.1.2 `share()` メソッド

2.1.3 `canShare(data)` メソッド

2.2 `ShareData` 辞書