CSP通过限制资源加载来源有效防止XSS攻击，核心是配置script-src禁止内联脚本与动态执行，推荐使用nonce或哈希值允许安全脚本，避免unsafe-inline等宽松策略。
前端安全中，内容安全策略（Content Security Policy，简称 CSP）是防止跨站脚本攻击（XSS）、数据注入等攻击的重要手段。通过配置 CSP，可以明确浏览器只允许加载指定来源的资源，从而有效限制恶意代码的执行。JavaScript 作为可执行脚本的核心部分，是 CSP 防控的重点对象。
理解 CSP 的基本原理
CSP 是一种由 HTTP 响应头或 meta 标签定义的安全策略，告诉浏览器哪些资源可以被加载和执行。它通过白名单机制控制脚本、样式、图片、字体等资源的来源。对于 JavaScript，CSP 能够：
- 阻止内联脚本（如 onclick、<script>alert(1)</script>）执行
- 限制外部脚本只能从可信域名加载
- 禁止使用 eval()、new Function() 等动态执行代码的方法
这样即使攻击者成功注入了脚本，由于不符合 CSP 策略，也无法执行。
如何配置有效的 CSP 策略
配置 CSP 主要通过设置 HTTP 响应头 Content-Security-Policy 实现。以下是一些关键指令及其对 JavaScript 的影响：
立即学习“Java免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- default-src 'self'：默认所有资源只能从同源加载
- script-src 'self'：仅允许加载同源的 JavaScript 文件
- script-src 'self' https://trusted.cdn.com：允许同源和指定 CDN 的脚本
- script-src 'self' 'unsafe-inline' 'unsafe-eval'：不推荐，会降低安全性
- script-src 'nonce-random123'：仅允许带有指定 nonce 值的 script 标签执行
- script-src 'sha256-abc123...'：通过哈希值允许特定内联脚本
示例响应头：
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.jsdelivr.net; object-src 'none'; base-uri 'self';避免常见配置错误
错误的 CSP 配置可能形同虚设，甚至影响正常功能。需要注意：
- 不要随意使用 'unsafe-inline' 或 'unsafe-eval'，这会使 XSS 攻击重新变得可行
- 避免将 script-src 设置为 * 或包含未受控的第三方域名
- 注意 JSONP 接口可能引入动态脚本，需单独评估风险
- 开发环境与生产环境应保持一致的 CSP 策略，避免遗漏
可通过浏览器开发者工具查看 CSP 违规日志，定位问题脚本。
结合其他措施提升安全性
CSP 不是万能的，应与其他前端安全措施配合使用：
- 对用户输入进行严格过滤和转义，防止 XSS
- 设置 X-XSS-Protection 和 X-Content-Type-Options 头（虽部分已被现代浏览器弃用，但仍有兼容价值）
- 使用 Subresource Integrity（SRI）确保外部脚本未被篡改
- 定期审计依赖库和第三方脚本的安全性
基本上就这些。一个严格的 CSP 策略能极大增强前端应用的防御能力，尤其是针对 JavaScript 执行的控制。关键是合理规划资源来源，避免过度宽松，同时保证应用正常运行。
