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

Devoid

Is the page served from a secure origin? – Felske

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. – Devoid

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!! – Badminton

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

Felske

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

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

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

The advice to use HSTS in the context of the question is really bad advice. – Aramenta

Answer 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

async function copyToClipboard(textToCopy) {
    // Navigator clipboard api needs a secure context (https)
    if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(textToCopy);
    } else {
        // Use the 'out of viewport hidden text area' trick
        const textArea = document.createElement("textarea");
        textArea.value = textToCopy;
            
        // Move textarea out of the viewport so it's not visible
        textArea.style.position = "absolute";
        textArea.style.left = "-999999px";
            
        document.body.prepend(textArea);
        textArea.select();

        try {
            document.execCommand('copy');
        } catch (error) {
            console.error(error);
        } finally {
            textArea.remove();
        }
    }
}

Usage:

try {
    await copyToClipboard("I'm going to the clipboard !");
    console.log('Text copied to the clipboard!');
} catch(error) {
    console.error(error);
}

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

Electrojet

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

any other way since the document.exeCommand has been deprecated – Serous

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

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

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

Symptomatology

document.execCommand('copy'); is depricated – Shipe

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

Fortune

I'm using chrome v105, cannot select alert text :( – Cowey

Hello, I just tested it on Ubuntu 22.04 and it worked : Version 105.0.5195.102. It seems strange Chrome would remove this feature. – Fortune

Maybe you're using Chrome on smartphone where selecting text can be cumbersome ? – Fortune

It's probably something related to this bug support.google.com/chrome/thread/9959602/… my text is in fact pretty long, I used a prompt instead :) – Cowey

How does alert() function serve for this purpose? – Chantay

In most browsers, you can select with your mouse/keyboard the text of your alert message and then Ctrl-C or contextual menu Copy to have it in the buffer by hand. It requires more work from the user though @Chantay – Fortune

Didn't realize there were even an option to copy from javascript alert() statement but I guess I learn something new everyday – Chantay

Answer 5

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

Camelliacamelopard

Answer 6

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

https://mcmap.net/q/22221/-how-do-i-copy-to-the-clipboard-in-javascript

Anguine

Seem does not work anymore – Shipe

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) – Elizaelizabet

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

Answer 7

const copy = (text: string) => {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text)
  } else {
    const input = document.createElement('textarea')
    input.value = text
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
  }
}

Dachia

Answer 8

you can use :

change the :

navigator.clipboard.writeText("Content")

to : navigator['clipboard'].writeText("Content") instead.

Matteson

The change you suggested is not a change. Both line of code are identical. They do the same thing. It's just a different way to instruct the browser to do the the same thing. – Courtly

but in my case it's work – Matteson

its probably working for you because your testing it via https. as mentioned by the above answer, this is cause by an unsecure (http) page. – Ilium