Clipboard API Support Detection and Usage

Clipboard API Detection

The modern Clipboard API provides an asynchronous interface for reading and writing to the system clipboard, replacing the older document.execCommand('copy') approach.

Detection

const hasClipboard = !!navigator.clipboard;
const hasClipboardWrite = !!(
  navigator.clipboard && navigator.clipboard.writeText
);
const hasClipboardRead = !!(
  navigator.clipboard && navigator.clipboard.readText
);

Writing to Clipboard

async function copyText(text) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    await navigator.clipboard.writeText(text);
    return true;
  }
  // Fallback
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  const success = document.execCommand('copy');
  document.body.removeChild(textarea);
  return success;
}

Permissions and Security

• Write: Generally allowed without permission when triggered by user gesture
• Read: Requires explicit user permission via the Permissions API
• HTTPS: Required for the async Clipboard API (falls back to execCommand on HTTP)
• User gesture: Most browsers require a recent user interaction (click, keypress) to allow clipboard access
• Cross-origin iframes: Need the clipboard-write and clipboard-read permissions policy

Rich Content

The ClipboardItem API allows writing rich content like images:

const blob = new Blob([htmlContent], { type: 'text/html' });
const item = new ClipboardItem({ 'text/html': blob });
await navigator.clipboard.write([item]);