Web UI: Basic Auth incompatible with crossorigin attributes on assets

[kokucoding]

Description

When using OPENCODE_SERVER_PASSWORD to protect the web UI, users get stuck in an authentication loop. The page loads after entering credentials, but assets (JS/CSS) fail to load with 401 Unauthorized.

Root Cause

The HTML page includes assets with crossorigin attribute:

<script type="module" crossorigin src="/assets/index-Qb2EVj9N.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-z4TcDjz-.css">

When crossorigin is used without crossorigin="use-credentials", browsers make anonymous CORS requests that don't include HTTP Basic Auth credentials. This causes:

1. Browser loads main HTML page with auth ✅
2. Browser requests JS/CSS with crossorigin (anonymous) → 401 Unauthorized ❌
3. Auth popup appears again for each failed asset
4. Infinite loop - even re-entering credentials doesn't fix it

Environment

• OpenCode version: 1.1.16
• Access method: Cloudflare tunnel (remote access)
• Browser: Chrome/Firefox (both affected)

Steps to Reproduce

1. Start OpenCode web with password:

   OPENCODE_SERVER_PASSWORD=secret opencode web --port 4096
   

2. Access via browser (especially through reverse proxy/tunnel)
3. Enter username opencode and password secret
4. Observe: Page appears but is blank/broken, repeated auth prompts appear

Expected Behavior

After successful authentication, all assets should load without additional auth prompts.

Suggested Fixes

1. Use crossorigin="use-credentials" on asset tags:

   <script type="module" crossorigin="use-credentials" src="/assets/index.js"></script>
   

2. Switch to cookie-based authentication instead of HTTP Basic Auth for web access

3. Exempt static assets from authentication (JS, CSS, images, fonts)

Workaround

Currently, users must run without OPENCODE_SERVER_PASSWORD when accessing via tunnels/proxies, relying on the obscurity of the tunnel URL for security.

---

Thank you for the great project! Happy to provide more details or test fixes.