{"record":{"id":"14973d305ad06b9a","repo":"AykutSarac/jsoncrack.com","slug":"clipboard-write-permission-denied-please-allow-cl","errorCode":null,"errorMessage":"Clipboard write permission denied. Please allow clipboard access in your browser settings.","messagePattern":"Clipboard write permission denied\\. Please allow clipboard access in your browser settings\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"apps/www/src/features/modals/DownloadModal/index.tsx","lineNumber":106,"sourceCode":"        backgroundColor: fileDetails.backgroundColor,\n        skipFonts: true,\n      };\n\n      const blob = await toBlob(imageElement, imageOptions);\n\n      if (!blob) return;\n\n      await navigator.clipboard?.write([\n        new ClipboardItem({\n          [blob.type]: blob,\n        }),\n      ]);\n\n      toast.success(\"Copied to clipboard\");\n      gaEvent(\"clipboard_img\");\n    } catch (error) {\n      if (error instanceof Error && error.name === \"NotAllowedError\") {\n        toast.error(\n          \"Clipboard write permission denied. Please allow clipboard access in your browser settings.\"\n        );\n      } else {\n        toast.error(\"Failed to copy to clipboard\");\n      }\n    } finally {\n      toast.dismiss(\"toastClipboard\");\n      onClose();\n    }\n  };\n\n  const exportAsImage = async () => {\n    try {\n      toast.loading(\"Downloading...\", { id: \"toastDownload\" });\n\n      const imageElement = getExportElement();\n      if (!imageElement) {\n        toast.error(\"Canvas not found.\");","sourceCodeStart":88,"sourceCodeEnd":124,"githubUrl":"https://github.com/AykutSarac/jsoncrack.com/blob/3c9af69e23c635356293b6b28cf4cd0af10d1059/apps/www/src/features/modals/DownloadModal/index.tsx#L88-L124","documentation":"Toast shown when navigator.clipboard.write rejects with a DOMException whose name is 'NotAllowedError'. This is the Permissions API path: the browser blocked clipboard write because the document is not in a secure context (HTTPS/localhost), the user denied the permission, or the call did not occur during a user gesture. The error is matched explicitly via error.name.","triggerScenarios":"Site served over HTTP (not a secure context); clipboard permission denied in browser settings; the ClipboardItem write was triggered programmatically outside a user activation; running inside an iframe without the `clipboard-write` permission policy.","commonSituations":"Local development over plain IP/HTTP; embedding the app in a sandboxed iframe; browser privacy settings blocking clipboard; programmatic (non-click) export attempts.","solutions":["Serve the app over HTTPS (or localhost) so the async Clipboard API is available.","Ensure the export is triggered from a user gesture (click handler).","Add `allow=\"clipboard-write\"` to any embedding iframe.","Fall back to document.execCommand('copy') or a download link when NotAllowedError occurs."],"exampleFix":"// before\nawait navigator.clipboard?.write([new ClipboardItem({ [blob.type]: blob })]);\n\n// after — fall back to a download when clipboard permission is denied\ntry {\n  await navigator.clipboard?.write([new ClipboardItem({ [blob.type]: blob })]);\n  toast.success(\"Copied to clipboard\");\n} catch (error) {\n  if (error instanceof DOMException && error.name === \"NotAllowedError\") {\n    downloadURI(URL.createObjectURL(blob), `${fileDetails.filename}.png`);\n    toast(\"Clipboard blocked — downloaded instead.\");\n  } else {\n    throw error;\n  }\n}","handlingStrategy":"validation","validationCode":"// Verify secure context + clipboard permission before offering copy\nexport function canWriteClipboard(): boolean {\n  return typeof window !== \"undefined\"\n    && window.isSecureContext\n    && !!navigator.clipboard\n    && typeof ClipboardItem !== \"undefined\";\n}","typeGuard":"// Identify the permission-denied DOMException\nexport function isClipboardDenied(error: unknown): error is DOMException {\n  return error instanceof DOMException && error.name === \"NotAllowedError\";\n}","tryCatchPattern":"// Match NotAllowedError explicitly, fall back otherwise\nif (isClipboardDenied(error)) {\n  toast.error(\"Clipboard write permission denied. Allow clipboard access.\");\n} else {\n  // fall back to download\n}","preventionTips":["Serve over HTTPS/localhost so the async Clipboard API is available.","Trigger clipboard writes from a user gesture.","Add allow=\"clipboard-write\" to embedding iframes."],"tags":["clipboard","permissions","secure-context","browser","export"],"backgroundTag":null,"analyzedSha":"3c9af69e23c635356293b6b28cf4cd0af10d1059","analyzedAt":"2026-08-12T19:00:27.891Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}