Skip to content

Fix navigator.clipboard crash over plain HTTP (non-secure context)#154

Merged
pufit merged 1 commit into
ClickHouse:mainfrom
constkolesnyak:upstream/clipboard-nonsecure-fallback
Jun 27, 2026
Merged

Fix navigator.clipboard crash over plain HTTP (non-secure context)#154
pufit merged 1 commit into
ClickHouse:mainfrom
constkolesnyak:upstream/clipboard-nonsecure-fallback

Conversation

@constkolesnyak

Copy link
Copy Markdown
Contributor

Problem

navigator.clipboard is only exposed in secure contexts — HTTPS or http://localhost. When the UI is accessed over plain HTTP via a LAN hostname/IP (e.g. http://192.168.x.x:8900, a .local mDNS name, a Tailscale IP with a self-signed cert, or a proxy without a trusted cert), the entire clipboard object is undefined and any call throws synchronously:

TypeError: Cannot read properties of undefined (reading 'writeText')

Two affected call sites, both silently failed without any UI feedback:

  • web/src/components/Chat/CodeBlock.tsx — the per-code-block Copy button.
  • web/src/pages/ChatPage.tsx — the Cmd+Shift+C "copy last response" keyboard shortcut.

Same root cause as #149 (which fixed crypto.randomUUID over plain HTTP). Both APIs gate on secure context.

Fix

Add a shared copyToClipboard helper in web/src/utils/clipboard.ts that prefers navigator.clipboard when available and falls back to a hidden off-screen <textarea> + document.execCommand('copy'). execCommand is deprecated but still implemented in every browser we care about.

Both call sites switched to the helper. grep confirms no other navigator.clipboard usages in the frontend.

Style

Mirrors utils/uuid.ts from #149 — same file naming convention, same fallback layering (native → legacy), same "client-side use, no crypto strength needed" reasoning.

Test plan

  • Click code-block Copy button under plain HTTP — text lands in clipboard.
  • Press Cmd+Shift+C under plain HTTP — last assistant text lands in clipboard.
  • Under HTTPS the native navigator.clipboard path is taken — no behavior change.
  • npm run build clean.

🤖 Generated with Claude Code

navigator.clipboard is only exposed in secure contexts (HTTPS or
http://localhost). When the UI is accessed over plain HTTP via a LAN
hostname/IP, or behind a proxy without a trusted cert, the entire
clipboard object is undefined and any call throws
'TypeError: Cannot read properties of undefined (reading writeText)'.

Two affected call sites:
- web/src/components/Chat/CodeBlock.tsx — the per-code-block Copy button
- web/src/pages/ChatPage.tsx — Cmd+Shift+C 'copy last response' shortcut

Both silently failed without surfacing any UI feedback.

Add a shared copyToClipboard helper that prefers navigator.clipboard
when available and falls back to a hidden off-screen <textarea> +
document.execCommand('copy'). execCommand is deprecated but still
implemented in every browser we care about.

Mirrors the same non-secure-context fallback pattern already used in
utils/uuid.ts (introduced by ClickHouse#149).
@pufit pufit merged commit 23c9789 into ClickHouse:main Jun 27, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants