fix: use HTTPS for API and WSS for WebSocket connections#12
Conversation
- Change VITE_APP_URL from http://:9009 to https:// in env files - Auto-detect ws/wss protocol based on page URL in aiChat.ts - Ensures getUserMedia works on HTTPS and WebSocket doesn't get blocked by mixed content policy
There was a problem hiding this comment.
Pull request overview
This PR updates the frontend’s API/WebSocket connection configuration to avoid mixed-content issues by moving staging/production URLs to HTTPS and switching WebSocket connections to WSS when appropriate.
Changes:
- Update
.env.testand.env.productionto usehttps://{{HOST}}(removing:9009). - Update
VocaTaWebSocketClient.connect()to choosewsvswssdynamically and build the WS URL fromVITE_APP_URL(with fallback towindow.location.origin).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| vocata-web/src/utils/aiChat.ts | Builds WS URL using a derived protocol (ws/wss) and host computed from VITE_APP_URL. |
| vocata-web/.env.test | Changes test env API base URL template to HTTPS and drops explicit port. |
| vocata-web/.env.production | Changes production env API base URL template to HTTPS and drops explicit port. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const appUrl = import.meta.env.VITE_APP_URL || window.location.origin | ||
| const isSecure = appUrl.startsWith('https') | ||
| const wsProtocol = isSecure ? 'wss' : 'ws' | ||
| const host = appUrl.replace(/^https?:\/\//, '') |
There was a problem hiding this comment.
isSecure is derived from VITE_APP_URL, but the PR description says WS protocol should be auto-detected from the current page URL. In practice VITE_APP_URL is typically always set via .env.*, so this won’t switch to wss when the page is served over HTTPS but the env is misconfigured.
Consider deriving the protocol from window.location.protocol (fallback to env only when window is unavailable) and build the host via new URL(appUrl) (or similar) to avoid edge cases like trailing slashes or accidental paths producing wss://example.com//ws/... or wss://example.com/foo/ws/....
| const appUrl = import.meta.env.VITE_APP_URL || window.location.origin | |
| const isSecure = appUrl.startsWith('https') | |
| const wsProtocol = isSecure ? 'wss' : 'ws' | |
| const host = appUrl.replace(/^https?:\/\//, '') | |
| const hasWindow = typeof window !== 'undefined' | |
| const appUrl = hasWindow ? window.location.origin : import.meta.env.VITE_APP_URL | |
| const baseUrl = new URL(appUrl) | |
| const isSecure = hasWindow ? window.location.protocol === 'https:' : baseUrl.protocol === 'https:' | |
| const wsProtocol = isSecure ? 'wss' : 'ws' | |
| const host = baseUrl.host |
| console.log('🔌 尝试连接WebSocket:', wsUrl) | ||
| console.log('🔐 使用Token:', token.substring(0, 20) + '...') |
There was a problem hiding this comment.
This logs part of the bearer token to the browser console. Even partial tokens can be sensitive when users share logs/screenshots or when console output is captured by monitoring tooling.
Recommend removing token logging or guarding it behind a strict development-only check (e.g., import.meta.env.DEV).
| console.log('🔌 尝试连接WebSocket:', wsUrl) | |
| console.log('🔐 使用Token:', token.substring(0, 20) + '...') | |
| console.log('🔌 尝试连接WebSocket:', `${wsProtocol}://${host}/ws/chat/${this.conversationUuid}`) |
| # 测试环境配置 | ||
| # 注意:VITE_APP_URL 将在CI/CD构建时动态替换 | ||
| VITE_APP_URL=http://{{STAGING_HOST}}:9009 | ||
| VITE_APP_URL=https://{{STAGING_HOST}} |
There was a problem hiding this comment.
This change removes the explicit :9009 port from VITE_APP_URL. If staging traffic still reaches the backend on a non-default port (or if TLS termination isn’t providing HTTPS on 443), API and WebSocket connections built from this value will break.
If the port is still required in some environments, keep it in the template (or introduce a dedicated port env var) so CI/CD substitution remains unambiguous.
| VITE_APP_URL=https://{{STAGING_HOST}} | |
| VITE_APP_URL=https://{{STAGING_HOST}}:9009 |
| # 生产环境配置 | ||
| # 注意:VITE_APP_URL 将在CI/CD构建时动态替换 | ||
| VITE_APP_URL=http://{{PRODUCTION_HOST}}:9009 | ||
| VITE_APP_URL=https://{{PRODUCTION_HOST}} |
There was a problem hiding this comment.
This change removes the explicit :9009 port from VITE_APP_URL. If production traffic still reaches the backend on a non-default port (or if TLS termination isn’t providing HTTPS on 443), API and WebSocket connections built from this value will break.
If the port is still required in some environments, keep it in the template (or introduce a dedicated port env var) so CI/CD substitution remains unambiguous.
| VITE_APP_URL=https://{{PRODUCTION_HOST}} | |
| VITE_APP_URL=https://{{PRODUCTION_HOST}}:9009 |
📌 变更内容
✅ 测试验证
PR 提交规范提醒: