navigator.clipboard is undefined

Question

Why is navigator.clipboard always undefined in the following snippet?

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. :-(');
    });
}

More on the clipboard API can be found here.

Chrome Version: 68.0.3440.106.

I'm sure this was working at some point, but no longer is. It's confusing because this table suggests that the Clipboard API is implemented in Chrome (has been for some time), but this table of specific API methods suggests that none of the methods of the API is supported??

Solution 1

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.

Solution 2

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 promise
function 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/...

Solution 3

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);
});

Solution 4

A minimal solution for copying tooltips when HTTPS is not yet available and the solution with document.execCommand('copy') does not work. But it requires that the user selects and copies by hand what is displayed in the alert.

function copyToClipboard(text) {
  if(navigator.clipboard) {
    navigator.clipboard.writeText(text);
  }
  else{
    alert(text);
  }
}

View more solutions

Comments

[RikiRiocma]

BTW, the flag to disable TEMPORARILY https check is eg. --unsafely-treat-insecure-origin-as-secure=myexamplesite.com‌​.

[Rokit]

In chrome://flags, enable Insecure origins treated as secure and give it the origin you want.

[NanoNova]

cool, a little concisely: textArea.style.position = "absolute"; textArea.style.opacity = 0; and I think the focus call is unnecessary

[Admin]

any other way since the document.exeCommand has been deprecated

[MarsAndBack]

Thank you for explaining https context; this was a mystery blocker in other examples.

[Kamajabu]

Unfortunately I keep getting DOMException: Document is not focused. :( Calling it from chrome code snippets.

[key]

Seem does not work anymore

[key]

document.execCommand('copy'); is depricated

[Filip Happy]

Beautiful, it tries 3 automatic methods, if they fail, it displays a manual alert. It can be improved with a bit of reworking to your needs, but overall it is the best solution I have seen so far (searching for an hour)

[danronmoon]

Doesn't work running chrome headlessly no matter what I throw at it

[isherwood]

Link-only answers are not considered valuable on SO. If that answer is correct the question should be flagged as a duplicate.