SSL未対応の環境でClipboard APIが使用できない

Clipboard APIを使った実装を行った際、案件のテスト環境がSSL未対応(http)でうまく動作しないということがあったので、備忘録としてメモしておきます。

サンプルコード

MDNの引用ですが、SSL対応をしているサイトでないと機能を使用できないようです。

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

引用 – Clipboard – Web API | MDN

実際にボタンクリックでテキストをコピーする処理を実装してみます。

<button id="btn">コピーテスト</button>

document.getElementById('btn').addEventListener('click', function(e) {
	copy_to_clipboard('コピーテスト');
});
 
function copy_to_clipboard(value) {
    if(navigator.clipboard) {
        var copyText = value;
        navigator.clipboard.writeText(copyText);
    } else {
        alert('対応していません。');
    }
}

SSL未対応のページの場合、alertで「対応していません。」の表示になります。
SSL未対応の場合のデモページ

同じ内容でSSL対応のページの場合、問題なく動作します。
SSL対応している場合のデモページ

今回はテスト環境のみがSSL未対応で、本番環境はSSL対応していたため特に対応は行いませんでしたが、本番環境がSSL未対応で同じような実装が必要という場合、現在非推奨になっているexecCommand()を使った実装になりそうです。