Zenn
Open4

Clipboard APIの調査

OSAMU NAKAMURAOSAMU NAKAMURA

APIの基本

安全なコンテキスト

Clipboard は安全なコンテキスト用のAPIなので、 window.isSecureContext プロパティを参照して安全なコンテキスト内であるか確認して呼び出す必要がある。さもなければ例外が発生する。

権限API:

clipboard-read は実験的機能なので、FirefoxやSafariではサポートされていない。

  • Firefox では clipboard.readText() を呼び出したタイミングで権限確認のダイアログが表示される。
    clipboard-read は将来にわたりサポートされない模様
  • Safariの動作は未確認。

Chromeでは 設定 の プライバシーとセキュリティ サイトの設定
で　すべてのサイトに保存されている権限とデータを表示 から設定を確認できる。

OSAMU NAKAMURAOSAMU NAKAMURA

Chromeの動作

クリップボードの認可が 確認 状態

  1. 権限をクエリすると prompt になる
  2. 権限のクエリなしで clipboard.readText() を呼ぶと、権限確認のダイアログが表示される。
    • 許可すると、Promiseがresolve されクリップボードのテキストが返る。クリップボードのテキストは許可ボタンを押したタイミングのものであり、readTextを実行した時の値ではない。
    • ダイアログを閉じると、 readText() のPromiseが reject される
    • （３回ダイアログを閉じると） 自動的に拒否扱いとなる（参考）
    • 拒否すると、Promiseがrejectされる
OSAMU NAKAMURAOSAMU NAKAMURA

clipboard.read() の調査(Chromeのみ)

clipboard.read() は ClipboardItem の配列をPromiseとして返す.

ClipboardItem.types に ["text/html", "text/plain"]が設定される
ClipboardItem.getType("text/html") を呼び出すと、Blob オブジェクトのPromiseが返る。

クリップボードの中身によっては、 types が空のことがある。
例）ローカルのファイルをコピーした場合

spreadsheetからの貼り付け

"text/html" (tableっぽいデータだが将来変わる可能性あるし、データ型などは分からない）と "text/plain" (TSV)

配列の要素数

clipboard.read() は ClipboardItem の配列をPromiseとして返すが、配列が複数の要素を持つケースはない理解。MDNのClipboardItemにメモとして記載あり。