CSP连接端点治理（connect-src白名单）最佳实践

---

title: CSP连接端点治理（connect-src白名单）最佳实践

keywords:

• connect-src
• 端点白名单
• fetch/XHR
• WebSocket
• Beacon

description: 通过CSP的connect-src白名单限制fetch/XHR/WebSocket/Beacon等连接端点，降低数据泄露与恶意外联风险。

categories:

• 文章资讯
• 编程技术

---

背景与价值

连接类API易被滥用。通过connect-src白名单可在浏览器层阻断不受控外联。

统一规范

• 白名单：仅允许受控域与子路径。
• 特殊通道：针对WebSocket端点单独治理。
• 动态更新：按环境与页面差异化下发。

核心实现

头设置

type Res = { setHeader: (k: string, v: string) => void }

function setConnectCsp(res: Res, endpoints: string[]) {
  const v = `connect-src 'self' ${endpoints.join(' ')}`
  res.setHeader('Content-Security-Policy', v)
}

落地建议

• 将API与WebSocket端点纳入白名单并按环境区分；禁止通用通配。

验证清单

• 是否按白名单下发 connect-src；端点是否仅限受控域。