JavaScript copy to clipboard (navigator.clipboard.writeText, secure context)

Modern browsers expose the Clipboard API through navigator.clipboard.writeText() (and related read APIs) whenever the page runs in a secure context—HTTPS or localhost. Real-world flows await the returned Promise, surface NotAllowedError when the user has not granted permission or a gesture is missing, and usually trigger the copy from a click or keyboard handler rather than on page load (MDN: Clipboard API, MDN: writeText). When the string you copy is assembled from table or list data, companion guides on copying arrays in JavaScript and converting strings to arrays are often useful next steps.

The first runnable example uses globalThis.navigator?.clipboard ?? { … } so it resolves in Node.js as well as the browser; on HTTPS pages you normally call navigator.clipboard directly.

Tested on: Node.js v20.18.2 (stubbed clipboard in snippets). In real browsers, expect secure-context and permission behavior as described in each section.

Quick reference

writeText is for pasting plain text; readText is stricter; always check isSecureContext and navigator.clipboard before calling.

writeText — JavaScript copy string to clipboard

The usual javascript copy string to clipboard path is Clipboard.prototype.writeText: pass a string, await the Promise, and branch on success vs NotAllowedError or SecurityError. This pattern is what most copy to clipboard javascript tutorials mean by an async clipboard write.

(async () => {
  const clipboard =
    globalThis.navigator?.clipboard ??
    { writeText: () => Promise.resolve() };
  try {
    await clipboard.writeText("Hello, world!");
    console.log("Text copied to clipboard");
  } catch (error) {
    console.log("Failed:", error.name);
  }
})();

You should see one line: Text copied to clipboard (under Node with the stub; failures would print Failed: …).

readText — JavaScript clipboard reads

Reading the javascript clipboard with readText() is more sensitive than writing: browsers may require stronger permissions or a user gesture, and the returned string reflects whatever the user last copied. The snippet below uses a stub clipboard object so copy clipboard javascript readers can see the Promise shape without a live browser clipboard.

const clipboard = {
  readText() {
    return Promise.resolve("pasted line");
  },
};
clipboard.readText().then((text) => console.log("From clipboard:", text));

You should see one line: From clipboard: pasted line.

In production, replace clipboard with navigator.clipboard; the string you read depends on what the user last copied.

Secure context check — guard for copy to clipboard JS

Before you call js copy to clipboard APIs, guard on secure context and API presence: window.isSecureContext should be true on HTTPS, and navigator.clipboard should exist. This avoids half of “copy to clipboard javascript not working” reports that are really environment issues (HTTP, embedded iframe policy, or non-browser runtimes).

console.log(
  Boolean(globalThis.isSecureContext),
  typeof globalThis.navigator?.clipboard?.writeText
);

You should see one line like: false undefined when run in Node (no browser navigator). In a page served over HTTPS, isSecureContext is typically true and writeText is a function.

NotAllowedError when copy clipboard JavaScript is blocked

When copy clipboard javascript is blocked—no recent click, policy denial, or non-secure page—writeText rejects with NotAllowedError. Catching by DOMException name keeps copy clipboard js UX predictable: show a message or offer a manual “select and copy” fallback.

(async () => {
  const clipboard = {
    writeText() {
      return Promise.reject(new DOMException("Denied", "NotAllowedError"));
    },
  };
  try {
    await clipboard.writeText("x");
  } catch (e) {
    console.log(e.name);
  }
})();

You should see one line: NotAllowedError.

Summary

navigator.clipboard.writeText is the modern plain-text write path—await it, run from user gesture on HTTPS, and catch NotAllowedError; avoid new execCommand('copy') unless legacy forces it.

• Prefer await navigator.clipboard.writeText(text) for javascript copy to clipboard of plain strings in secure contexts.
• readText() covers reading clipboard text in JavaScript but is stricter than writeText.
• Check isSecureContext and navigator.clipboard before calling APIs in copy to clipboard js code paths.
• Handle NotAllowedError when user activation or permissions block the write.
• Avoid new work on document.execCommand('copy') unless legacy support forces it.

References

MDN references for the Clipboard API, secure contexts, and the exact signatures behind javascript copy string to clipboard and read flows.

• MDN: Clipboard API
• MDN: Clipboard.writeText()
• MDN: Clipboard.readText()
• MDN: Secure context
• MDN: Window.isSecureContext