クリップボード(Clipboard) APIが動かない場合の対処法

Clipboard APIを利用した実装につまずいたので備忘録として残します。

目次

• サンプルコード
• 現象
• 原因

サンプルコード

<p id="js-clipboard">hogehoge</p>
<button id="js-clipboard-button">クリップボードにコピーする</button>

const board = document.getElementById("js-clipboard");
const button = document.getElementById("js-clipboard-button");

button.addEventListener("click", () => {
    navigator.clipboard.writeText(board.textContent);
});

現象

ローカルのDockerコンテナ内で問題がなかったため、検証環境にデプロイしました。
検証環境での動作確認中、navigator.clipboard.writeText()が動作しないことに気がつきました。

原因

Clipboard APIは安全なコンテキストでしか動作しないようです。

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

ローカルのDocker環境はhttp://localhostで安全なコンテキストだと判断されたため動作し、検証環境はhttp://で安全なコンテキストだと判断されなかったため動作しなかったようです。

「安全なコンテキスト」というものがあることを今回知りました…。