CSP面试宝典实战教程：从零到上线全流程

CSP(Content-Security-Policy 内容安全策略)面试宝典实战教程|从零到上线全流程

面向 Web 安全、渗透测试、后端开发、前端安全岗面试;CSP 核心定位：浏览器端白名单安全机制，纵深防御，主要用来对抗 XSS、资源注入、点击劫持MDN Web Do... 主线：原理 → 指令语法 → 两种部署方式 → 灰度上线完整流程(Report-Only 先行)→ 排坑、调优、面试高频题、故障复盘一句话核心：先报告、不拦截;收敛白名单;禁止 inline-script /eval;最后切正式防护头

一、基础认知(面试开篇必背)

1. 什么是 CSP

CSP 是 HTTP 响应头，告诉浏览器哪些源(script、img、style、font、media、frame 等)允许加载、哪些脚本可以执行;浏览器强制执行策略，违规资源会阻止加载 / 执行，并上报违规报告MDN Web Do...。

它不是 WAF，不是防火墙;是浏览器侧防护，属于客户端纵深防御，不能修复后端漏洞，但能大幅缩小 XSS 漏洞危害。

2. 两个头部(面试必考)

Content-Security-Policy-Report-Only：只上报、不拦截，灰度阶段专用，业务零损伤，收集违规日志

Content-Security-Policy：正式生效，拦截违规资源、脚本，同时上报

面试高频坑：不要直接上正式头，容易线上大面积白屏、功能失效。

3. 基础关键字源(背熟)

'self'：同源(同协议、域名、端口)

'none'：禁止加载该类型所有资源

unsafe-inline：允许内联脚本、内联样式(能不用就不用，CSP 最核心就是干掉 inline 脚本)

unsafe-eval：允许 eval、new Function 等动态代码执行，高危，尽量禁止

data:：base64 内嵌图片等

shturl.cc/yyMmO：指定可信第三方域名白名单

4. 核心指令清单(面试高频)

default-src：兜底默认源，所有没单独配置的资源类型继承这个策略(最佳实践优先配置)

script-src：JS 脚本(重中之重，XSS 防御核心)

style-src：CSS 样式

img-src：图片

font-src：字体

connect-src：fetch、axios、websocket 请求

frame-src：iframe 嵌入页面(防点击劫持、恶意嵌入)

object-src：flash、插件，现代站点建议 object-src 'none'

report-uri / report-to：违规日志上报地址

最简安全示范(报告模式)

Content-Security-Policy-Report-Only:

default-src 'self';

script-src 'self' shturl.cc/FpMHZ8pIl;

style-src 'self';

img-src 'self' data:;

connect-src 'self';

frame-src 'none';

object-src 'none';

report-uri /csp-report;

二、CSP 从零上线标准全流程(面试最核心大题：怎么落地 CSP，步骤是什么)

标准答案流程：需求评估 → 收集资源清单 → 开启 Report-Only 灰度 → 持续采集违规日志 → 修复内联脚本 /eval → 扩充白名单 → 小流量试切正式头 → 全量发布 → 持续监控迭代

Step1：前期评估与资源测绘

梳理站点所有页面、SPA 路由、第三方 SDK(统计、埋点、广告、验证码、地图、客服)

区分：外部 JS、CDN 脚本、内联 script、onclick 事件、eval、动态创建 script、iframe

风险识别：老项目大量内联脚本、模板引擎拼接 JS、第三方脚本多，CSP 落地难度高

面试题：老项目大量 inline 脚本怎么处理?答：优先迁移到外部 JS 文件;无法迁移的，使用 nonce 随机值 或者 hash 摘要 替代 unsafe-inline。

✅ nonce 方案(推荐)后端每次请求生成一次性随机 nonce，放在 HTTP 头 script-src 'nonce-abc123xxx'，内联脚本增加属性