[解決済み] navigator.clipboardが未定義である

質問

なぜ navigator.clipboard は常に undefined を使うのでしょうか？

var clipboard = navigator.clipboard;
if (clipboard == undefined) {
    console.log('clipboard is undefined');
} else {
    clipboard.writeText('stuff to write').then(function() {
        console.log('Copied to clipboard successfully!');
    }, function() {
        console.error('Unable to write to clipboard. :-(');
    });
}

クリップボードAPIの詳細については はこちら .

Chromeのバージョン：68.0.3440.106。

以前は動作していたはずですが、現在は動作していません。 というのも、紛らわしいのですが このテーブル は、クリップボード API が Chrome に実装されていることを示唆しています（以前から実装されています）。 この表 は、特定のAPIメソッドのメソッドのどれもサポートされていないことを示唆しているのでしょうか？

どのように解決するのですか？

これにはセキュアなオリジン、つまりHTTPSかローカルホストが必要です（またはフラグを立ててChromeを実行することで無効にできます）。ServiceWorkerの場合と同様に、この状態はnavigatorオブジェクト上のプロパティの有無によって示されます。

https://developers.google.com/web/updates/2018/03/clipboardapi

このことは、仕様書ではインターフェイスに[SecureContext]と記載されています。 https://w3c.github.io/clipboard-apis/#dom-navigator-clipboard

の状態を確認することができます。 window.isSecureContext の状態を確認し、それが機能が利用できない理由であるかどうかを知ることができます。 セキュアなコンテキスト｜MDN

そして、そうです、あなたが設定すべきは HSTS を設定して、HTTP が HTTPS にリダイレクトされるようにする必要があります。