Web API見本市
OS連携権限プロンプトありスマホ推奨判定中...

Async Clipboard API

OSのクリップボードへ非同期でテキストや画像を読み書きできるAPI。document.execCommand の後継。

MDNのドキュメントを見る

1対応判定

ブラウザ対応バージョン
Chrome66+
Firefox125+（read含む完全対応）
Safari13.1+

備考: 主要3ブラウザ対応

2権限フロー

  1. 権限不要

    API呼び出しだけで動く。プロンプトも操作起点の縛りもない

  2. ユーザージェスチャー必須

    ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない

  3. 権限プロンプトありこのAPI

    呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ

  4. iOS独自requestPermission

    iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る

書き込みはユーザージェスチャー内なら概ね許可される。読み取り（read/readText）は権限プロンプトやペースト確認UIが表示される。

現在の権限状態（navigator.permissions.query）: このブラウザでは取得できません

3ライブデモ: テキストと画像のコピー＆ペースト

4コードスニペット

TypeScript（要約版）
// テキストの書き込み（ユーザージェスチャー内で）
await navigator.clipboard.writeText("こんにちは");

// 画像(PNG Blob)の書き込み
const blob = await new Promise<Blob>((resolve) =>
  canvas.toBlob((b) => resolve(b!), "image/png")
);
await navigator.clipboard.write([
  new ClipboardItem({ "image/png": blob }),
]);

// 読み取り（権限プロンプト/ペースト確認が出る）
const items = await navigator.clipboard.read();
for (const item of items) {
  if (item.types.includes("image/png")) {
    const imgBlob = await item.getType("image/png");
    imgEl.src = URL.createObjectURL(imgBlob);
  } else if (item.types.includes("text/plain")) {
    const text = await (await item.getType("text/plain")).text();
    console.log(text);
  }
}