JSONP与旧式跨域传输风险识别与替换最佳实践

一、背景与核心风险JSONP以`<script>`方式加载并在调用者上下文中直接执行，存在回调名注入与任意代码执行风险。缺乏`Content-Type`约束与`nosniff`防护，易受MIME嗅探与XSSI影响。依赖Cookie跨域时可能触发CSRF与会话泄露，且无法做细粒度权限与方法控制。缓存与CDN场景中易被投毒，缺少`Vary`与来源校验导致污染传播。二、风险识别与拦截策略拒绝`callback`参数并统一返回JSON；对历史接口进行网关级阻断与灰度迁移。若临时兼容，必须严格校验回调名并对返回值使用JSON前缀防XSSI，同时禁止携带敏感数据。统一开启`X-Content-Type-Options: nosniff`与精确`Content-Type`，并设置最小CSP限制。三、禁用JSONP与统一响应type Res = { setHeader: (k: string, v: string) => void; status: (n: number) => Res; end: (b?: string) => void } type Req = { query: Record<string, string | undefined> } function sendJson(res: Res, data: any) { res.setHeader('Content-Type', 'application/json; charset=utf-8') res.setHeader('X-Content-Type-Options', 'nosniff') res.end(JSON.stringify(data)) } function rejectJsonp(req: Req, res: Res) { const hasCallback = typeof req.query['callback'] === 'string' if (hasCallback) return res.status(400).end('jsonp_not_supported') } 四、临时兼容场景的严格校验（仅迁移期）function isSafeJsonpCallback(name: string): boolean { if (name.length > 128) return false const re = /^[A-Za-z_$][A-Za-z0-9_$]*(\.[A-Za-z_$][A-Za-z0-9_$]*)*$/ return re.test(name) } function jsonWithPrefix(obj: any): string { const prefix = ")]}',\n" return prefix + JSON.stringify(obj) } function sendJsonp(res: Res, cb: string, data: any) { if (!isSafeJsonpCallback(cb)) return res.status(400).end('invalid_callback') res.setHeader('Content-Type', 'application/javascript; charset=utf-8') res.setHeader('X-Content-Type-Options', 'nosniff') res.end(`${cb}(${jsonWithPrefix(data)})`) } 五、CORS安全替代与精确配置type OriginCheck = (o: string) => boolean function corsHeaders(origin: string, check: OriginCheck) { const headers: Record<string, string> = {} if (check(origin)) { headers['Access-Control-Allow-Origin'] = origin headers['Vary'] = 'Origin' headers['Access-Control-Allow-Credentials'] = 'true' headers['Access-Control-Allow-Methods'] = 'GET,POST' headers['Access-Control-Allow-Headers'] = 'Content-Type,Authorization' headers['Access-Control-Max-Age'] = '600' } return headers } function applyCors(req: { headers: Record<string, string | undefined>; method: string }, res: Res, allow: Set<string>) { const origin = req.headers['origin'] || '' const hs = corsHeaders(origin, o => allow.has(o)) for (const [k, v] of Object.entries(hs)) res.setHeader(k, v) if (req.method === 'OPTIONS') return res.status(204).end() } 六、SSE与WebSocket作为推送替代import { ServerResponse } from 'http' function sse(res: ServerResponse) { res.setHeader('Content-Type', 'text/event-stream; charset=utf-8') res.setHeader('Cache-Control', 'no-cache') res.setHeader('X-Content-Type-Options', 'nosniff') res.write('retry: 5000\n') res.write(`data: ${JSON.stringify({ ok: true })}\n\n`) } type WsReq = { origin: string; token: string } function wsAllowedOrigin(req: WsReq, allow: Set<string>): boolean { return allow.has(req.origin) } function wsAuthorize(token: string): boolean { return /^[A-Za-z0-9_\-\.]{16,}$/.test(token) } 七、postMessage跨域整合type Msg = { type: string; payload?: any } function safePostMessage(target: Window, origin: string, message: Msg) { target.postMessage(message, origin) } function onMessage(ev: MessageEvent) { const allow = new Set(['https://example.com']) if (!allow.has(ev.origin)) return const msg = ev.data as Msg if (typeof msg?.type !== 'string') return } 八、迁移与验收步骤扫描并统计带`callback`参数的历史端点与调用方，建立清单与分级风险。网关拦截并返回`jsonp_not_supported`，前端改为`fetch`+CORS或SSE/WebSocket。验收项：无`callback`参数、`Content-Type`与`nosniff`正确、`Vary: Origin`设置、凭证跨域仅针对白名单来源。九、落地要点与参数校验清单回调名正则与长度限制已校验，最长128字符。`Access-Control-Allow-Origin`必须为精确匹配来源，不能使用`*`与携带凭证并存。`Access-Control-Max-Age`建议不超过`600`以降低策略漂移风险。SSE需设置`text/event-stream`与`nosniff`，并采用心跳与重试间隔控制。WebSocket需检查`Origin`与令牌格式，握手失败立即关闭。十、示例：统一接口处理流程function handle(req: Req & { headers: Record<string, string | undefined>; method: string }, res: Res) { rejectJsonp(req, res) applyCors({ headers: req.headers, method: req.method }, res, new Set(['https://example.com'])) sendJson(res, { ok: true }) }