CloudObsidian

CSP 详细须知

5 min read

好的 👍 我来给你整理一份 更详细的 CSP 须知清单，涵盖从基础概念、常见指令到部署与排坑。你可以把它当作 CSP 使用手册 来理解和实践。

CSP 详细须知

一、CSP 的工作原理

浏览器在加载页面时，会根据响应头或 <meta> 中的 Content-Security-Policy 规则来判断：

  • 哪些资源（JS、CSS、图片、字体等）允许加载

  • 哪些脚本可以执行

  • 哪些内联脚本被禁止

  • 是否允许混合内容（HTTPS 页面下引入 HTTP 资源）

  • 是否允许 <iframe>、<object> 等嵌入

如果有违规行为：

  • 严格模式：直接拦截并报错。

  • Report-Only 模式：不拦截，只上报给你配置的 URL。

二、常见 CSP 指令（重点）

  1. 资源加载控制

    • default-src：默认资源加载策略（如果其他指令没写，走这个）。

    • script-src：控制 JS 的来源，支持 nonce-、sha256- 校验。

    • style-src：控制 CSS 来源，避免外部样式注入。

    • img-src：控制图片来源。

    • font-src：控制字体来源。

    • media-src：控制音频、视频来源。

    • frame-src：控制嵌入的 iframe 来源。

  2. 脚本执行控制

    • 'unsafe-inline'：允许内联 JS（不推荐）。

    • 'unsafe-eval'：允许 eval()、new Function()（危险）。

    • nonce-xxxx：动态标记允许执行的内联脚本。

    • sha256-xxxx：允许指定哈希的脚本。

  3. 其他安全相关

    • connect-src：控制 Ajax / WebSocket / Fetch 的请求地址。

    • form-action：限制 <form> 的提交目标。

    • frame-ancestors：限制页面是否能被嵌入到别的 iframe（防止点击劫持）。

    • upgrade-insecure-requests：自动把 HTTP 资源升级为 HTTPS。

    • block-all-mixed-content：禁止 HTTPS 页面加载 HTTP 资源。

  4. 违规上报

    • report-uri https://example.com/csp-report

    • report-to csp-endpoint（CSP3 推荐方式）

三、配置建议（最佳实践）

  1. 最小权限原则

    • default-src 'self';

    • 其他资源按需单独开放，例如：

      script-src 'self' https://cdn.jsdelivr.net;
style-src 'self' https://fonts.googleapis.com;
font-src https://fonts.gstatic.com;
img-src 'self' data:;
connect-src 'self' https://api.example.com;

  2. 避免危险关键字

    • 不要随意用 'unsafe-inline' 和 'unsafe-eval'。

    • 如果必须使用内联脚本，优先用 nonce 或 sha256。

  3. 调试与上线流程

    • 阶段 1：启用 Content-Security-Policy-Report-Only，收集日志，不拦截。

    • 阶段 2：逐步清理违规项，完善白名单。

    • 阶段 3：切换为 Content-Security-Policy，正式拦截。

  4. 日志监控

    • 收集 CSP 报告并存储，分析第三方库是否违规。

    • 建议接入日志服务（如 ELK、Sentry）进行报警。

四、常见坑点

  1. 第三方 SDK/广告脚本

    • 常常加载自有域名下的子资源，要仔细配置。

  2. 内联脚本

    • 如果前端框架（Vue/React）生成内联代码，需要用 nonce 或 hash。

  3. 旧代码迁移

    • 如果项目里有大量 eval、innerHTML 动态执行代码，开启 CSP 会很痛苦，需要逐步重构。

  4. 混合内容

    • CSP 开启后，HTTP 资源会被阻止，旧系统要迁移到 HTTPS。

五、实用模板

一个相对安全的通用配置：

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-ABC123' https://cdn.jsdelivr.net https://www.googletagmanager.com;
  style-src 'self' 'nonce-ABC123' https://fonts.googleapis.com;
  img-src 'self' data:;
  font-src https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';
  upgrade-insecure-requests;
  block-all-mixed-content;
  report-uri /csp-report;

六、最佳时机

  • 开发后期 → 上线前：用 Report-Only 收集数据。

  • 上线初期：逐步收紧策略，保证功能不受影响。

  • 稳定运营期：强制执行，并长期监控上报日志。

要不要我帮你写一份 适合典型前后端分离（React/Vue 前端 + Node/PHP 后端）项目的 CSP 白名单配置模板，直接可用？

Graph View