navigator.clipboard is undefined navigator.clipboard is undefined google-chrome google-chrome

navigator.clipboard is undefined


This requires a secure origin — either HTTPS or localhost (or disabled by running Chrome with a flag). Just like for ServiceWorker, this state is indicated by the presence or absence of the property on the navigator object.

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

This is noted in the spec with [SecureContext] on the interface: https://w3c.github.io/clipboard-apis/#dom-navigator-clipboard

You can check the state of window.isSecureContext to learn if that's the reason a feature is unavailable. Secure contexts | MDN

And yes, you should set up HSTS to make sure HTTP redirects to HTTPS.


you can write an all-in-one wrapper function.

  • if in secure context (https) : use navigator clipboard api
  • if not : use the 'out of viewport hidden text area' trick
// return a promisefunction copyToClipboard(textToCopy) {    // navigator clipboard api needs a secure context (https)    if (navigator.clipboard && window.isSecureContext) {        // navigator clipboard api method'        return navigator.clipboard.writeText(textToCopy);    } else {        // text area method        let textArea = document.createElement("textarea");        textArea.value = textToCopy;        // make the textarea out of viewport        textArea.style.position = "fixed";        textArea.style.left = "-999999px";        textArea.style.top = "-999999px";        document.body.appendChild(textArea);        textArea.focus();        textArea.select();        return new Promise((res, rej) => {            // here the magic happens            document.execCommand('copy') ? res() : rej();            textArea.remove();        });    }}

use :

copyToClipboard("I'm going to the clipboard !")    .then(() => console.log('text copied !'))    .catch(() => console.log('error'));

ps : do not try it in a repl like jsfiddle/copeden/...


Try this:

if (typeof (navigator.clipboard) == 'undefined') {    console.log('navigator.clipboard');    var textArea = document.createElement("textarea");    textArea.value = linkToGo;    textArea.style.position = "fixed";  //avoid scrolling to bottom    document.body.appendChild(textArea);    textArea.focus();    textArea.select();    try {        var successful = document.execCommand('copy');        var msg = successful ? 'successful' : 'unsuccessful';        toastr.info(msg);    } catch (err) {        toastr.warning('Was not possible to copy te text: ', err);    }    document.body.removeChild(textArea)    return;}navigator.clipboard.writeText(linkToGo).then(function () {    toastr.info(`successful!`);}, function (err) {    toastr.warning('unsuccessful!', err);});