17370845950

CSP通过限制资源加载来源有效防止XSS攻击，核心是配置script-src禁止内联脚本与动态执行，推荐使用nonce或哈希值允许安全脚本，避免unsafe-inline等宽松策略。

前端安全中，内容安全策略（Content Security Policy，简称 CSP）是防止跨站脚本攻击（XSS）、数据注入等攻击的重要手段。通过配置 CSP，可以明确浏览器只允许加载指定来源的资源，从而有效限制恶意代码的执行。JavaScript 作为可执行脚本的核心部分，是 CSP 防控的重点对象。

理解 CSP 的基本原理

CSP 是一种由 HTTP 响应头或 meta 标签定义的安全策略，告诉浏览器哪些资源可以被加载和执行。它通过白名单机制控制脚本、样式、图片、字体等资源的来源。对于 JavaScript，CSP 能够：

• 阻止内联脚本（如 onclick、）执行
• 限制外部脚本只能从可信域名加载
• 禁止使用 eval()、new Function() 等动态执行代码的方法

这样即使攻击者成功注入了脚本，由于不符合 CSP 策略，也无法执行。

如何配置有效的 CSP 策略

配置 CSP 主要通过设置 HTTP 响应头 Content-Security-Policy 实现。以下是一些关键指令及其对 JavaScript 的影响：

• 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...'：通过哈希值允许特定内联脚本

示例响应头：

避免常见配置错误

错误的 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 执行的控制。关键是合理规划资源来源，避免过度宽松，同时保证应用正常运行。