[JS] http環境ではnavigator.clipboard.writeTextがエラーになる

2020年11月30日 propg JavaScript, TypeScript, 0

クリップボードに簡単に値を設定するAsync Clipboard APIのnavigator.clipboard.writeText関数ですが、

ローカル環境で動かしていたときは動作していたのに、サーバにデプロイして動かすと、「Cannot read property ‘writeText’ of undefined」エラーになります。

このAPIはHTTP環境では動作しないように制限されているようです。

外部アクセス前提のサイトなら良いんですが、社内システムでhttpのまま動かしている場合、困ることになります。

クレジットカード番号などをコピーされて収集されるのを防ぐ目的でしょうか。

httpサイトでも使えるようにするには、前からある「document.execCommand(“copy”);」を使用する必要があります。

このコマンドはアクティブなエレメントにセットされている値の選択されている部分をコピーするものなので、navigator.clipboard.writeTextのように、文字列を引数に渡すだけでコピーできるものではありません。

htmlで定義するか、jsでelementを生成して、値をセットして文字列選択後にexecCommandを呼び出す必要があります。

execCommand自体も今後使えなくなる可能性大なので、社内システムでもhttps化を検討していく必要があります。

https環境であれば、やはりnavigator.clipboard.writeTextを使用するのが簡単で間違いないです。

== ランキングに参加しています。ぜひクリックお願いします ==

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。