公開日: 2023年01月09日

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

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

目次

サンプルコード

HTML
<p id="js-clipboard">hogehoge</p>
<button id="js-clipboard-button">クリップボードにコピーする</button>
JavaScript
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://で安全なコンテキストだと判断されなかったため動作しなかったようです。

Clipboard - Web API | MDN

Clipboard インターフェイスはクリップボード API を実装し、ユーザーが許可する場合、システムクリップボードの内容に対する読み取りと書き込みの両方を提供します。クリップボード API は、ウェブアプリケーションに切り取り(カット)、コピー(複写)、貼り付け(ペースト)の機能を実装するために使うことができます。
https://developer.mozilla.org/ja/docs/Web/API/Clipboard

安全なコンテキスト - ウェブセキュリティ | MDN

安全なコンテキスト (セキュアコンテキスト) とは、認証と機密性の一定の最低基準を満たしている Window や Worker のことです。多くの Web API や機能は安全なコンテキストでのみアクセス可能です。安全なコンテキストの主な目的は、中間者攻撃 が攻撃の犠牲者をさらに危険にさらす可能性のある強力な API にアクセスすることを防ぐことです。
https://developer.mozilla.org/ja/docs/Web/Security/Secure_Contexts

Secure Context (安全なコンテキスト) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

安全なコンテキストとは、認証と機密性の一定の最低基準を満たした Window や Worker のことです。多くの Web API や機能は、安全なコンテキストでのみアクセス可能です。これにより、悪意のあるコードによって悪用される可能性を減らすことができます。
https://developer.mozilla.org/ja/docs/Glossary/Secure_Context

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

© 2024 blog.tksn.jp. All Rights Reserved.