fix(frontend): drop empty/control-char auth headers (#1000) (#1003)

Stale localStorage credentials (`jwt` / `auth` / `adminAuth` / `userJwt` /
`access_token`) can be the empty string, the literal string `"undefined"`,
or carry a stray newline / control character left over from an older
build. axios + undici reject these eagerly with `Invalid character in
header content ["Authorization"]`, so every API call crashes client-side
before reaching the worker.

This adds two tiny helpers in `frontend/src/utils/headers.js`:

- `safeHeaderValue(v)` returns the trimmed value when it is a non-empty
  string with no control chars (per RFC 7230) and no `"undefined"` /
  `"null"` sentinel; otherwise `undefined`.
- `safeBearerHeader(jwt)` wraps a safe JWT with `Bearer `, otherwise
  `undefined`.

`apiFetch` builds the headers object incrementally and only sets each
auth header when its value is safe. Missing/unsafe credentials now drop
out cleanly and the worker returns a normal 401, which the existing
`response.status === 401` flow already handles by surfacing the auth
prompt — the same UX users see on a fresh session.

Tests: `frontend/src/utils/__tests__/headers.test.js` adds 9 vitest
cases covering safe input, sentinel strings, control chars (\\n / \\r /
\\t / NUL / 0x1F / DEL), trimming, and `Bearer` construction. Build
(`pnpm build`) and tests (`pnpm test`) both pass.

Co-authored-by: voidborne-d <voidborne.d@agentmail.to>
Co-authored-by: Dream Hunter <dreamhunter2333@gmail.com>

CHANGELOG.md

@@ -19,6 +19,7 @@
 
 - fix: |Frontend| 收窄地址管理相关弹窗宽度，并让地址表格在弹窗内部横向滚动，避免多地址场景撑宽弹窗
 - fix: |Frontend| 修复 `/open_api/settings` 未返回 `domains` 数组时前端设置初始化直接调用 `map()` 报 `undefined` 错误的问题，统一按空数组兜底处理
+- fix: |Frontend| 修复前端在 `jwt` / `auth` / `adminAuth` 等 localStorage 凭据为空字符串、字面量 `"undefined"` 或包含换行/控制符时，请求构造的 `Authorization` 等头部抛出 `Invalid character in header content` 导致前端所有接口报错的问题（issue #1000）。新增 `safeHeaderValue` / `safeBearerHeader` 工具，对全部认证头做 RFC 7230 校验，不安全的值直接跳过该头部，让 worker 走标准 401 而不是请求级崩溃
 
 ### Improvements
 

CHANGELOG_EN.md

@@ -19,6 +19,7 @@
 
 - fix: |Frontend| Narrow address-management modal widths and keep address tables horizontally scrollable inside the modal to prevent multi-address lists from stretching the dialog
 - fix: |Frontend| Fix the frontend settings bootstrap throwing an `undefined` error when `/open_api/settings` does not return a `domains` array by normalizing the field to an empty array before mapping it
+- fix: |Frontend| Fix every API call crashing client-side with `Invalid character in header content ["Authorization"]` when stale localStorage credentials (`jwt` / `auth` / `adminAuth` / `userJwt` / `access_token`) are empty, the literal string `"undefined"`, or contain a stray newline or other control character (issue #1000). Adds `safeHeaderValue` / `safeBearerHeader` helpers that validate every auth header against RFC 7230 and omit the header entirely when unsafe, so the worker returns a clean 401 instead of the request being rejected by axios/undici
 
 ### Improvements
 

frontend/src/api/index.js

@@ -4,6 +4,7 @@ import axios from 'axios'
 
 import i18n from '../i18n'
 import { getFingerprint } from '../utils/fingerprint'
+import { safeBearerHeader, safeHeaderValue } from '../utils/headers'
 
 const API_BASE = import.meta.env.VITE_API_BASE || "";
 const {
@@ -24,19 +25,29 @@ const apiFetch = async (path, options = {}) => {
         // Get browser fingerprint for request tracking
         const fingerprint = await getFingerprint();
 
+        // Skip auth headers whose value is empty / "undefined" / contains
+        // control chars (otherwise axios throws "Invalid character in header
+        // content" before the request is sent — see issue #1000).
+        const headers = {
+            'x-lang': i18n.global.locale.value,
+            'x-fingerprint': fingerprint,
+            'Content-Type': 'application/json',
+        };
+        const userTokenHeader = safeHeaderValue(options.userJwt || userJwt.value);
+        if (userTokenHeader) headers['x-user-token'] = userTokenHeader;
+        const userAccessHeader = safeHeaderValue(userSettings.value.access_token);
+        if (userAccessHeader) headers['x-user-access-token'] = userAccessHeader;
+        const customAuthHeader = safeHeaderValue(auth.value);
+        if (customAuthHeader) headers['x-custom-auth'] = customAuthHeader;
+        const adminAuthHeader = safeHeaderValue(adminAuth.value);
+        if (adminAuthHeader) headers['x-admin-auth'] = adminAuthHeader;
+        const authorizationHeader = safeBearerHeader(jwt.value);
+        if (authorizationHeader) headers['Authorization'] = authorizationHeader;
+
         const response = await instance.request(path, {
             method: options.method || 'GET',
             data: options.body || null,
-            headers: {
+            headers,
-                'x-lang': i18n.global.locale.value,
-                'x-user-token': options.userJwt || userJwt.value,
-                'x-user-access-token': userSettings.value.access_token,
-                'x-custom-auth': auth.value,
-                'x-admin-auth': adminAuth.value,
-                'x-fingerprint': fingerprint,
-                'Authorization': `Bearer ${jwt.value}`,
-                'Content-Type': 'application/json',
-            },
         });
         if (response.status === 401 && path.startsWith("/admin")) {
             showAdminAuth.value = true;

frontend/src/utils/__tests__/headers.test.js

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest';
+import { safeHeaderValue, safeBearerHeader } from '../headers';
+
+describe('safeHeaderValue', () => {
+    it('returns the trimmed value for safe input', () => {
+        expect(safeHeaderValue('abc123')).toBe('abc123');
+        expect(safeHeaderValue('  abc123  ')).toBe('abc123');
+    });
+
+    it('skips null / undefined / non-string inputs', () => {
+        expect(safeHeaderValue(null)).toBeUndefined();
+        expect(safeHeaderValue(undefined)).toBeUndefined();
+        expect(safeHeaderValue(123)).toBeUndefined();
+        expect(safeHeaderValue({})).toBeUndefined();
+    });
+
+    it('skips empty / whitespace-only / sentinel strings (issue #1000)', () => {
+        expect(safeHeaderValue('')).toBeUndefined();
+        expect(safeHeaderValue('   ')).toBeUndefined();
+        expect(safeHeaderValue('undefined')).toBeUndefined();
+        expect(safeHeaderValue('null')).toBeUndefined();
+    });
+
+    it('skips values containing control characters (issue #1000)', () => {
+        // \n inside a JWT-shaped value would otherwise trigger
+        // "Invalid character in header content" from axios/undici.
+        expect(safeHeaderValue('eyJhbGc\nxyz')).toBeUndefined();
+        expect(safeHeaderValue('foo\rbar')).toBeUndefined();
+        expect(safeHeaderValue('foo\tbar')).toBeUndefined();
+        expect(safeHeaderValue('foo\x00bar')).toBeUndefined();
+        expect(safeHeaderValue('foo\x1fbar')).toBeUndefined();
+        expect(safeHeaderValue('foo\x7fbar')).toBeUndefined();
+    });
+
+    it('preserves printable ASCII and the typical JWT alphabet', () => {
+        const jwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ4In0.x';
+        expect(safeHeaderValue(jwt)).toBe(jwt);
+    });
+});
+
+describe('safeBearerHeader', () => {
+    it('wraps a safe JWT in a Bearer prefix', () => {
+        expect(safeBearerHeader('abc123')).toBe('Bearer abc123');
+    });
+
+    it('returns undefined when the JWT is empty so the header is dropped', () => {
+        // This is the central guard for #1000: a fresh client with no JWT
+        // must not send "Bearer " (trailing space) — which some HTTP stacks
+        // reject as "Invalid character in header content".
+        expect(safeBearerHeader('')).toBeUndefined();
+        expect(safeBearerHeader(null)).toBeUndefined();
+        expect(safeBearerHeader(undefined)).toBeUndefined();
+        expect(safeBearerHeader('undefined')).toBeUndefined();
+    });
+
+    it('returns undefined when the JWT carries control characters', () => {
+        expect(safeBearerHeader('eyJhbGc\nxyz')).toBeUndefined();
+        expect(safeBearerHeader('eyJhbGc\rxyz')).toBeUndefined();
+    });
+
+    it('trims surrounding whitespace before building the header', () => {
+        expect(safeBearerHeader('  abc123  ')).toBe('Bearer abc123');
+    });
+});

frontend/src/utils/headers.js

@@ -0,0 +1,42 @@
+// Control characters (0x00-0x1F, plus DEL 0x7F) are forbidden in HTTP header
+// values per RFC 7230. Sending them through axios / fetch raises
+// "Invalid character in header content".
+const hasControlChar = (str) => {
+    for (let i = 0; i < str.length; i++) {
+        const code = str.charCodeAt(i);
+        if (code < 32 || code === 127) return true;
+    }
+    return false;
+};
+
+/**
+ * Returns a header value that is safe to attach to an outgoing request, or
+ * `undefined` to mean "skip this header".
+ *
+ * Common reasons callers receive an unsafe value:
+ *   - stale localStorage credentials carry a stray newline,
+ *   - a missing token has been coerced to the literal string "undefined",
+ *   - an empty placeholder ("") leaves us building "Bearer " with a trailing space.
+ *
+ * Returning `undefined` lets axios omit the header entirely, which yields a
+ * clean 401 from the worker instead of a request-level crash on the client.
+ */
+export const safeHeaderValue = (value) => {
+    if (value === null || value === undefined) return undefined;
+    if (typeof value !== 'string') return undefined;
+    const trimmed = value.trim();
+    if (trimmed === '' || trimmed === 'undefined' || trimmed === 'null') {
+        return undefined;
+    }
+    if (hasControlChar(trimmed)) return undefined;
+    return trimmed;
+};
+
+/**
+ * Build an Authorization: Bearer ... header from a raw JWT, or `undefined` if
+ * the JWT is missing or unsafe.
+ */
+export const safeBearerHeader = (jwt) => {
+    const safe = safeHeaderValue(jwt);
+    return safe ? `Bearer ${safe}` : undefined;
+};