Skip to main content

How to Resolve the "navigator.clipboard is undefined" Error in JavaScript

The navigator.clipboard API is the modern, secure way to interact with the system clipboard, allowing you to programmatically copy and paste text. A common issue developers face is that navigator.clipboard is undefined, leading to a TypeError: Cannot read properties of undefined. This error almost always occurs for a specific, security-related reason.

This guide will explain why navigator.clipboard might be undefined, show you the correct solution for both development and production, and provide a robust fallback function for older browsers or insecure contexts.

The Core Problem: Secure Contexts (HTTPS)​

For security and privacy reasons, modern browser APIs—especially those that interact with user hardware or the operating system like the clipboard, camera, or microphone—are only available in a secure context.

A secure context is, for the most part, a page served over HTTPS.

If your site is served over plain HTTP, navigator.clipboard will be undefined, and any attempt to use it will fail. You can check if your current context is secure with a simple property:

console.log(window.isSecureContext); // Output: true on HTTPS, false on HTTP

Solution 1 (Production): Serve Your Site Over HTTPS​

The definitive, long-term solution is to serve your website over HTTPS. This is the standard for all modern web applications. Services like Netlify, Vercel, and GitHub Pages provide free SSL certificates and HTTPS by default. For your own servers, services like Let's Encrypt provide free SSL certificates.

This is the only correct solution for a production environment.

Solution 2 (Development): Treating Insecure Origins as Secure​

During local development, you might be using a simple HTTP server (e.g., http://localhost:3000). To test the Clipboard API without setting up HTTPS locally, you can instruct your browser to treat this specific origin as secure.

Solution (for Chrome/Edge)

  1. Navigate to chrome://flags/#unsafely-treat-insecure-origin-as-secure in your address bar.
  2. Enable the flag.
  3. In the text box that appears, enter the origin you want to treat as secure (e.g., http://localhost:3000).
  4. Relaunch your browser.

After relaunching, navigator.clipboard will be available when you visit http://localhost:3000.

Solution 3 (Fallback): A Universal copyToClipboard Function​

If you need to support older browsers or environments where HTTPS is not available, the best practice is to create a function that uses the modern Clipboard API if available, but falls back to the older, deprecated document.execCommand('copy') method if not.

Solution: this async function provides a universal solution for copying text.

async function copyToClipboard(textToCopy) {
  // Use the modern Clipboard API when available
  if (navigator.clipboard && window.isSecureContext) {
    await navigator.clipboard.writeText(textToCopy);
  } else {
    // Fallback for older browsers and insecure contexts
    const textArea = document.createElement('textarea');
    textArea.value = textToCopy;
    
    // Make the textarea invisible
    textArea.style.position = 'absolute';
    textArea.style.left = '-999999px';
    
    document.body.prepend(textArea);
    textArea.select();

    try {
      document.execCommand('copy');
    } catch (err) {
      console.error('Fallback: Oops, unable to copy', err);
    } finally {
      textArea.remove();
    }
  }
}

// Example Usage:
const copyButton = document.getElementById('copy-btn');
copyButton.addEventListener('click', async () => {
  try {
    await copyToClipboard('Text to be copied!');
    console.log('Text copied successfully!');
  } catch (err) {
    console.error('Failed to copy text.');
  }
});

How the Fallback Function Works​

The document.execCommand('copy') method is a legacy API. It doesn't operate on a string directly; it operates on the current user selection on the page. The fallback logic is a clever workaround:

  1. A <textarea> element is created in memory.
  2. The text you want to copy is set as its value.
  3. The textarea is added to the DOM but positioned far off-screen so it's invisible to the user.
  4. .select() is called on the textarea to programmatically highlight its content.
  5. document.execCommand('copy') is called. Since the textarea's content is now the active selection, it gets copied to the clipboard.
  6. Finally, the temporary textarea is removed from the DOM.

While this method is deprecated, it is still widely supported and serves as an excellent fallback.

Conclusion​

The navigator.clipboard is undefined error is a security feature, not a bug, designed to protect users.

  • The correct solution for production is to serve your site over HTTPS.
  • For local development, you can use browser flags to treat your localhost origin as secure.
  • If you need to support older browsers or HTTP, the best practice is to create a universal copy function that uses the modern Clipboard API when available and gracefully falls back to the document.execCommand('copy') method when it's not.

Table of Contents