前端常见安全响应头有哪些？它们分别解决什么问题？
简化版
安全响应头是服务端通过 HTTP Header 告诉浏览器启用某些安全策略。前端需要理解它们的作用并参与配置验证。常见头包括 CSP 防 XSS、X-Frame-Options 或 CSP frame-ancestors 防点击劫持、HSTS 强制 HTTPS、Referrer-Policy 控制来源泄露、Permissions-Policy 限制浏览器能力、COOP/COEP/CORP 做跨源隔离。它们不是替代代码安全，而是浏览器层的防线。
详细版
安全响应头属于纵深防御。代码里做输入输出处理，响应头则让浏览器在运行时帮助拦截风险。
| 响应头 | 主要作用 | 常见风险 |
|---|---|---|
| Content-Security-Policy | 限制脚本、样式、图片等来源 | XSS、资源注入 |
| X-Frame-Options | 限制页面被 iframe 嵌入 | 点击劫持 |
| Strict-Transport-Security | 强制后续使用 HTTPS | SSL stripping |
| Referrer-Policy | 控制 Referer 携带内容 | URL 敏感信息泄露 |
| Permissions-Policy | 限制摄像头、定位等能力 | 权限滥用 |
Content-Security-Policy: default-src 'self'; script-src 'self'
Strict-Transport-Security: max-age=31536000; includeSubDomains
Referrer-Policy: strict-origin-when-cross-origin面试里别只背名字，要说清“浏览器看到这个头之后会限制什么行为”。
完整版教学
一、安全响应头的定位
前端安全不能只靠业务代码。浏览器本身提供了很多安全机制，但有些机制需要服务端通过响应头开启或配置。
这些 Header 的价值是：即使代码出现漏洞，也能降低攻击成功率或缩小影响范围。
二、CSP 是最核心的安全头之一
CSP 可以限制资源加载来源，尤其是脚本来源。它能降低 XSS 注入脚本成功执行的概率。
Content-Security-Policy: default-src 'self'; script-src 'self' cdn.example.com更严格的 CSP 还会配合 nonce 或 hash，避免内联脚本随意执行。
三、防点击劫持相关头
旧方案是 X-Frame-Options：
X-Frame-Options: DENY新方案更推荐 CSP 的 frame-ancestors：
Content-Security-Policy: frame-ancestors 'self' https://trusted.example.com它们控制页面能否被别的网站放进 iframe。
四、HSTS 的作用
HSTS 告诉浏览器后续访问该站点必须使用 HTTPS。即使用户输入 http://，浏览器也会自动升级。
这能降低中间人把 HTTPS 降级成 HTTP 的风险。但开启前要确认全站和子域名都能稳定支持 HTTPS，否则可能造成访问问题。
五、Referrer-Policy 和 Permissions-Policy
Referrer-Policy 控制跳转或资源请求时 Referer 头带多少信息。URL 中如果包含 token、订单号、搜索词，Referer 泄露会很危险。
Permissions-Policy 可以限制页面或 iframe 使用浏览器能力，例如地理位置、摄像头、麦克风。
六、跨源隔离相关头
COOP、COEP、CORP 用于跨源隔离，常和 SharedArrayBuffer、高精度计时、WebAssembly 性能场景相关。
| Header | 作用 |
|---|---|
| COOP | 隔离浏览上下文组 |
| COEP | 要求嵌入资源明确允许 |
| CORP | 声明资源可被哪些来源加载 |
这些头配置不当可能导致第三方资源加载失败，所以要联调验证。
七、常见误区与追问
- 误区：安全响应头配了就不用修 XSS。 Header 是纵深防御，代码层输出转义和输入处理仍然必须做。
- 误区：所有站点都可以直接上最严格 CSP。 旧脚本、第三方 SDK 和内联代码可能被拦，需要灰度和 report-only。
- 误区：HSTS 随便加 includeSubDomains。 子域名如果没准备好 HTTPS，会造成访问中断。
- 追问：CSP Report-Only 有什么用？ 先只上报告模式，观察会拦哪些资源，不影响用户访问。
- 追问：X-Frame-Options 和 frame-ancestors 谁更推荐？ 新项目优先用 CSP
frame-ancestors，兼容旧浏览器时可同时配置。 - 追问：前端如何验证安全头？ 用 DevTools Network、curl、安全扫描和线上监控检查响应头是否生效。
八、加强记忆
安全响应头记成“浏览器安全开关”。CSP 管资源和脚本，frame 管嵌入，HSTS 管 HTTPS，Referrer 管来源泄露，Permissions 管能力，COOP/COEP/CORP 管跨源隔离。