JavaScriptでテキストをクリップボードにコピーする機能を実装する機会があって、その作業を行った際のメモ書き。
以下のコードはその作業で記述したコードを抜粋したもの。
<p id="js-board">Lorem ipsum</p>
<button id="js-button">テキストをコピーする</button>const boardElement = document.getElementById('js-board');
const buttonElement = document.getElementById('js-button');
buttonElement.addEventListener('click', () => {
/** クリップボードに<p>のテキストをコピー */
navigator.clipboard.writeText(boardElement.textContent);
});Docker環境で作業・動作確認して、問題がなかったのでテストサーバーにアップロード。
しかし動作しない。
今回この機能を実装する上で利用したWeb APIの「Clipboard」だが、Clipboard – Web API | MDNを読んだところ、
このAPIは安全なコンテキストでしか動作しないらしい。テストサーバーはHTTP。成程、使えない訳だ。
Docker環境(http://127.0.0.1)で「Clipboard」が利用できたのは何故か。答えは安全なコンテキスト – ウェブセキュリティ | MDNに書かれていた。
https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts
http://127.0.0.1の URL、http://localhostの URL、http://*.localhostの URL (例http://dev.whatever.localhost/) 、file://の URL など、ローカルに配信されたリソースも安全に配信されていると考えられます。
Docker環境では127.0.0.1を利用していて、安全なコンテキストであると判断されたから「Clipboard」が利用できたのか。
Web APIの利用で詰まったら公式ドキュメントを読め。
良い。