@ledsun blog

無味の味は佳境に入らざればすなわち知れず

FirefoxではAsynchronous Clipboard APIを使ってもクリップボードから読み込めない

Clipboard API and events を読みました。 Asynchronous Clipboard APIを使ったサンプルをCodepenで作りました。

Google Chromeだと、全部動きます。 FirefoxだとwriteTextしか動きません。writewriteで書き込むためのClipbordItemがサポートされていないので、インスタンス化しようとするとReferenceError: ClipboardItem is not definedエラーが起きます。

Chromeでも、readreadTextを初めて実行する時は、次のようなダイアログが出るはずです。

f:id:ledsun:20211207221629p:plain
クリップボードへのアクセスを求めるダイアログ

出した許可は chrome://settings/content から取り消せます。

Codepenを埋め込むと動きません。

See the Pen Try to use Ascncronouse Clipboard API by shigeru.nakajima (@ledsun) on CodePen.

Deprecating Permissions in Cross-Origin Iframes - The Chromium Projects をチラ見した感じでは、Codepenの埋め込みスクリプトはiframeを使っているけど、iframeを使う時はallow属性を使って明示的に許可しないといけないようです。