Skip to content

fix: clipboard fallback for non-secure contexts (HTTP on LAN IPs)#163

Open
zhaoqirong wants to merge 1 commit intobenjitaylor:mainfrom
zhaoqirong:fix/clipboard-fallback-non-secure-context
Open

fix: clipboard fallback for non-secure contexts (HTTP on LAN IPs)#163
zhaoqirong wants to merge 1 commit intobenjitaylor:mainfrom
zhaoqirong:fix/clipboard-fallback-non-secure-context

Conversation

@zhaoqirong
Copy link
Copy Markdown

Summary

  • navigator.clipboard.writeText requires a secure context (HTTPS, localhost, or 127.0.0.1). When the page is served over plain HTTP on a LAN IP (e.g. http://10.2.3.4:3000), the Clipboard API is unavailable and the copy button silently fails.
  • This PR adds a copyTextToClipboard() utility that tries the modern Clipboard API first, then falls back to the legacy document.execCommand("copy") approach which works in all contexts.
  • Includes 5 unit tests covering: happy path, fallback on SecurityError, fallback when API is missing, both-fail case, and DOM cleanup verification.

Changes

File What
package/src/utils/clipboard.ts New utility: tries navigator.clipboard.writeText, falls back to hidden <textarea> + execCommand("copy")
package/src/utils/clipboard.test.ts 5 tests covering all branches
package/src/components/page-toolbar-css/index.tsx Replaced direct navigator.clipboard.writeText call with copyTextToClipboard()

Why this happens

Browsers treat these as secure contexts (Clipboard API works):

  • https:// any domain
  • http://localhost / http://127.0.0.1 (special-cased)

Browsers treat these as non-secure contexts (Clipboard API unavailable):

  • http://10.x.x.x, http://192.168.x.x, or any plain HTTP on a non-loopback address

This is a common scenario for development teams testing on LAN.

Test plan

  • All 88 existing + new tests pass (pnpm test)
  • Build succeeds (pnpm build)
  • No breaking API changes — copyToClipboard prop behavior is unchanged

🤖 Generated with Claude Code

`navigator.clipboard.writeText` requires a secure context (HTTPS, localhost,
or 127.0.0.1). When the page is served over plain HTTP on a LAN IP such as
`http://10.2.3.4:3000`, the Clipboard API is unavailable and the copy button
silently fails.

This adds a `copyTextToClipboard` utility that tries the modern Clipboard API
first, then falls back to the legacy `document.execCommand("copy")` approach
which works in all contexts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 25, 2026

Someone is attempting to deploy a commit to the Benji Taylor's Projects Team on Vercel.

A member of the Team first needs to authorize it.

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.

1 participant