Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

web: copy button on code blocks silently fails on insecure (non-HTTPS) origins

Open Beginner friendly
#50,988 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Domain
frontend, web-dev

Research direction

Look for the copy button component in the frontend code, likely in a UI or components directory. The handler using navigator.clipboard needs a fallback to document.execCommand('copy') or a user hint when the API is unavailable. Test by serving the app over HTTP from a non-localhost IP and verifying the button provides feedback or works via the fallback.

Written by the indexing model from the issue text.

Description

Description

Summary

The "copy code" button on code blocks in the web UI does nothing when the page is served over plain HTTP from a non-localhost origin. navigator.clipboard is unavailable in insecure contexts, so the click handler fails silently.

Environment

  • opencode version: 2.0.15 (Docker image ghcr.io/anomalyco/opencode:2.0.15)
  • OS: rockylinux
  • Terminal: Unavailable: not applicable — web UI issue
  • Shell: Unavailable: not applicable — web UI issue
  • Install/channel: Docker image, release (/api/info reports 2.0.15)
  • Active plugins: none found

Reproduction

  1. Run opencode serve --hostname 0.0.0.0 --port 4096 and expose the port (e.g. host 7000 → server 4096).
  2. From another device, open http://<server-ip>:7000 in Chrome --> — plain HTTP, non-localhost origin.
  3. Open any session containing a response with a fenced code block.
  4. Tap the copy button on the code block.

Expected Behavior

The code block content is copied to the clipboard, with some feedback from the button.

Actual Behavior

Nothing happens — no copy and no error UI. In DevTools, typeof navigator.clipboard evaluates to "undefined" on this origin: the Clipboard API is disabled in insecure contexts, so the handler fails silently. On mobile there is no DevTools, so the button simply appears broken.

Confirmed with an isolation test: enabling chrome://flags/#unsafely-treat-insecure-origin-as-secure for http://<server-ip>:7000 and restarting Chrome makes the button work immediately, which localizes the cause to the insecure origin rather than the button markup or handler.

Additional Context

  • Impact: serve is explicitly intended for LAN/remote deployment (--hostname 0.0.0.0), but plain-HTTP LAN access is an insecure context — so the copy button never works in exactly the deployment shape the docs recommend, unless served behind HTTPS or accessed via localhost.
  • Suggested fix: feature-detect navigator.clipboard and fall back to document.execCommand('copy') (or show a "long-press to select" hint) when unavailable.
  • Workarounds: long-press → select → copy; open via http://localhost:7000 on the same machine; serve behind HTTPS.
  • Frequency: 100% reproducible on insecure origins.
Plugins

No response

OpenCode version

No response

Steps to reproduce

No response

Screenshot and/or share link

No response

Operating System

No response

Terminal

No response

Dominant language
TypeScript
Stars
209k
Forks
27.5k
Avg merge
9h 42m
Merged PRs (30d)
389

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from anomalyco/opencode

All issues in anomalyco/opencode

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.