From 5f955ccca63d43fd5e6096ebc79a818e0e1e81e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?d=20=F0=9F=94=B9?= Date: Sat, 25 Apr 2026 16:51:24 +0800 Subject: [PATCH] fix(frontend): drop empty/control-char auth headers (#1000) (#1003) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Co-authored-by: Dream Hunter --- CHANGELOG.md | 1 + CHANGELOG_EN.md | 1 + frontend/src/api/index.js | 31 +++++++--- frontend/src/utils/__tests__/headers.test.js | 64 ++++++++++++++++++++ frontend/src/utils/headers.js | 42 +++++++++++++ 5 files changed, 129 insertions(+), 10 deletions(-) create mode 100644 frontend/src/utils/__tests__/headers.test.js create mode 100644 frontend/src/utils/headers.js diff --git a/CHANGELOG.md b/CHANGELOG.md index d64d1b00..5f9e6ff4 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/CHANGELOG_EN.md b/CHANGELOG_EN.md index 3927374b..f1c795fa 100644 --- a/CHANGELOG_EN.md +++ b/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 diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js index b5f40df1..76f7bf09 100644 --- a/frontend/src/api/index.js +++ b/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: { - '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', - }, + headers, }); if (response.status === 401 && path.startsWith("/admin")) { showAdminAuth.value = true; diff --git a/frontend/src/utils/__tests__/headers.test.js b/frontend/src/utils/__tests__/headers.test.js new file mode 100644 index 00000000..9846adff --- /dev/null +++ b/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'); + }); +}); diff --git a/frontend/src/utils/headers.js b/frontend/src/utils/headers.js new file mode 100644 index 00000000..c60523d6 --- /dev/null +++ b/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; +};