🥶
navigator.clipboard.writeTextが動かなかった理由
navigator.clipboard.writeText というブラウザAPIがある。
同じようなコマンドで execCommand('copy') というのがあるが、現在は非推奨になっている。
そのため、navigator.clipboard.writeText を使うことが多いのだが、何度やってもエラーになってしまい途方に暮れていた。
こちらをじっくり読んでみると、何やら怪しい文言が。
安全なコンテキスト用 …？
こんなページが存在していた。
さらに読み進めてみる。
こんなページもあった。
よく見てみる。
http://127.0.0.1 の URL、http://localhost の URL、http://*.localhost の URL (例 http://dev.whatever.localhost/) 、file:// の URL など、ローカルに配信されたリソースも安全に配信されていると考えられます。
なんてこった。
hostsで名前解決を上書きしていると、使えないってことじゃないか。
ということで、navigator.clipboard.writeText を使うにはlocalhostをルートドメインに含めるか、httpsの通信で使いましょうということでした。
追記:
window.isSecureContext というのもあり、現在のコンテキストが安全なコンテキストなのか確認する手段もあります（僕がエラーで困っていた時はちゃんとfalseでした）
Discussion