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??

Aaaaah @JoshLee.... that makes the difference... the origin is secured (accessible via https) but for some reason I was accessing it via http... when I access via https the `clipboard` object is available! This explains why I was convinced that it *had* been working previously. Perhaps I should forward all http to https. Thanks... if you submit an answer I'll mark it as correct. — drmrbrewer, Aug 13 '18 at 12:54
I had the same issue, but the given solution given here does not work. Until I found that the text-area or text field may NOT be DISABLED!! — Harm, Mar 02 '20 at 14:48

Josh Lee · Accepted Answer · 2018-12-21T11:45:24.253

170

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.

edited Dec 21 '18 at 11:45

answered Aug 13 '18 at 12:59

Josh Lee

161,055
37
262
269

4

BTW, the flag to disable TEMPORARILY https check is eg. --unsafely-treat-insecure-origin-as-secure=http://www.myexamplesite.com. – RikiRiocma Feb 03 '20 at 14:04
12

In `chrome://flags`, enable `Insecure origins treated as secure` and give it the origin you want. – Rokit Dec 07 '20 at 20:44
Doesn't work running chrome headlessly no matter what I throw at it – danronmoon May 16 '22 at 15:29

score 62 · Answer 2 · answered Feb 01 '21 at 16:27

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

cool, a little concisely: `textArea.style.position = "absolute"; textArea.style.opacity = 0;` and I think the focus call is unnecessary — NanoNova, Mar 13 '21 at 07:53
any other way since the document.exeCommand has been deprecated — Colasanto, Sep 13 '21 at 14:49
Thank you for explaining https context; this was a mystery blocker in other examples. — MarsAndBack, Jan 20 '22 at 18:47
Unfortunately I keep getting `DOMException: Document is not focused.` :( Calling it from chrome code snippets. — Kamajabu, Mar 12 '22 at 18:30

score 12 · Answer 3 · edited Jul 16 '21 at 09:57

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

This totally works, but code needs some refactoring – 1w3j Jul 09 '20 at 09:58 — 1w3j, Jul 09 '20 at 09:58
document.execCommand('copy'); is depricated – key Apr 07 '22 at 09:34 — key, Apr 07 '22 at 09:34

score 2 · Answer 4 · answered Oct 14 '21 at 13:00

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

score 2 · Answer 5 · answered Apr 21 '22 at 11:32

In localhost, the clipboard is blocked by the chrome browser. You check this by going to the following path

Chrome > settings > privacy and Security > site settings > View permissions and data stored across sites then click on your localhost URL which will mentation on the page and check the permission of the clipboard

score 1 · Answer 6 · answered Oct 11 '21 at 10:33

1

This solutions works at the moment (it includes cross browser support, error handling + clean up).

https://stackoverflow.com/a/33928558/318380

answered Oct 11 '21 at 10:33

jazkat

5,212
3
24
17

Seem does not work anymore – key Apr 07 '22 at 09:32
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) – Filip Happy Apr 11 '22 at 19:16

navigator.clipboard is undefined

6 Answers6

Linked

Related