Content Security Policy（CSP）是现代浏览器提供的一种重要的安全机制，它能有效防止XSS攻击、数据注入等安全威胁。今天我们就来详细了解一下CSP，并通过几个可以直接运行的示例来掌握它的用法。

什么是CSP？

Content Security Policy（内容安全策略，简称 CSP）是现代浏览器提供的一项重要安全机制，主要作用是帮助网站防范多种常见的客户端攻击，尤其是跨站脚本攻击（XSS）和数据注入攻击。

除了 Internet Explorer 之外，目前所有主流现代浏览器均已原生支持 CSP。所以在绝大多数场景下，开发者可以放心地在项目中启用并使用这一安全功能。

CSP 的核心机制是通过设置 HTTP 响应头 Content-Security-Policy（或通过 HTML 的 标签），定义哪些外部资源可以被加载和执行。当浏览器解析页面时，会先检查该策略配置，再决定是否允许加载指定的资源。

例如，当页面需要加载 JavaScript 文件、图片、样式表、字体或 iframe 等资源时，浏览器会依据 CSP 策略进行校验：只有符合策略规定的资源才会被加载；不符合的则会被阻止，并在开发者控制台中记录相关警告或错误信息。

为什么需要CSP？

想象一下，如果你的网站允许用户输入评论，而恶意用户输入了这样的脚本：

传统的防御手段虽然有效，但CSP提供了更深层的保护——它通过白名单机制，告诉浏览器只加载和执行来自特定来源的资源。

CSP两种设置CSP的方式

通过HTTP响应头设置（推荐）

Content-Security-Policy: default-src 'self'

通过Meta标签设置

常用指令说明

default-src：默认策略

script-src：控制JavaScript

style-src：控制CSS

img-src：控制图片

connect-src：控制Ajax请求

实战示例

下面我们通过两个个可以直接运行的示例来理解CSP的工作原理。

示例1：没有CSP保护的基础HTML页面

具体效果如下图：

加载外部图片失败

示例2：启用严格CSP保护的页面

• 页面启用了CSP保护
• 使用了nonce属性允许特定脚本执行
• 阻止了外部脚本加载（只允许同源脚本）
• 允许加载HTTPS图片
• 阻止了eval()等危险函数
• 使用了安全的textContent而不是innerHTML
• 展示了CSP如何防止XSS攻击

具体如下图：

加载外部脚本

加载外部图片

启动eval

CSP配置详解

常用指令值

'self'：只允许同源资源

'none'：禁止所有资源

'unsafe-inline'：允许内联脚本/样式（不推荐）

'unsafe-eval'：允许eval等动态代码执行（不推荐）

https:：允许所有HTTPS资源

总结

CSP是一项强大的安全技术，实际应用过程中应该记住以下原则：

渐进实施：从报告模式开始，逐步转向强制执行

最小权限原则：只授予必要的权限

持续监控：定期检查违规报告，优化策略

平衡安全与功能：在安全性和开发便利性之间找到平衡点

大家如果使用过程中有问题的话欢迎评论区沟通交流！