Content Security Policy (CSP) 介绍

关注

VIP免费原创最新推荐文章于 2026-07-16 14:39:55 发布 657 阅读 AI 写同款· GEO 优化 ›

内容安全策略（Content Security Policy，CSP） CSP是一组浏览器安全标头的规范，通过这些标头，网站所有者可以告诉浏览器哪些资源可以加载并执行，以及哪些不可以。这有助于防止恶意脚本的注入，因为浏览器将拒绝加载不符合CSP规则的内容。内容安全策略（Content Security Policy，CSP）是一个重要的安全机制，用于帮助保护网站免受恶意攻击和跨站脚本（XSS）等安全威胁。总之，CSP是一个有助于提高网站安全性的重要工具，但需要谨慎配置和管理，以确保安全性与功能之间的平衡。阅读详情

内容安全策略 (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。

起因

当我不经意间在 Twitter 页面 view source 后，发现了惊喜。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><title>Twitter</title><style> body {background-color: #ffffff;font-family: sans-serif;}a {color: #1da1f2;}svg {color: #1da1f2;display: block;fill: currentcolor;height: 21px;margin: 13px auto;width: 24px;} </style>
</head>
<body><noscript><center>If you’re not redirected soon, please <a href="/">use this link</a>.</center></noscript><script nonce="SG0bV9rOanQfzG0ccU8WQw=="> document.cookie = "app_shell_visited=1;path=/;max-age=5";location.replace(location.href.split("#")[0]); </script>
</body>
</html>

相比平时看到的其他站点的源码，可以说是很清爽了。没有乱七八糟的标签，功能却一样不少。特别有迷惑性，以为这便是页面所有的源码，但查看 DevTools 的 Source 面板后很容易知道这并不是真实的 HTML 代码。但为何页面源码给出的是如此清爽的版本，这里先不研究。

把目光移向 script 标签时，发现一个不认识的 nonce 属性。它以及它后面的神秘字符串成功引起了我的好奇。再去看 Google 首页的源码，也有好些 nonce 的运用。是时候去了解一下这里的 nonce 是什么了。

! <script nonce="SG0bV9rOanQfzG0ccU8WQw==">document.cookie = "app_shell_visited=1;path=/;max-age=5";location.replace(location.href.split("#")[0]);
</script>

Content Security Policy (CSP)

要了解 nonce，先了解 Content-Security-Policy(CSP)。

我们都知道浏览器有同源策略（same-origin policy）的安全限制，即每个站点只允许加载来自和自身同域（origin）的数据，https://a.com 是无法从 https://b.com 加载到资源的。每个站点被严格限制在了自已的孤岛上，自己就是一个沙盒，这样很安全，整个网络不会杂乱无章。主要地，它能解决大部分安全问题。假若没有同源策略，恶意代码能够轻松在浏览器端执行然后获取各种隐私信息：银行帐号，社交数据等。

那网站间如何进行数据共享，当然是有办法的，了解下 CORS。

现实中，问题是同源策略也并不是万无一失，跨域攻击 Cross-site scripting (XSS) 便包含五花八门绕开限制的手段，形式上通过向页面注入恶意代码完成信息的窃取或攻击。比如 UGC 类型的站点，因为内容依赖用户创建，这就开了很大一个口子，允许用户输入的内容运行在页面上。当然，因为我们都知道会有注入攻击，所以对用户输入的内容进行防 XSS 过滤也成了标配。

Content-Security-Policy 从另一方面给浏览器加了层防护，能极大地减少这种攻击的发生。

原理

CSP 通过告诉浏览器一系列规则，严格规定页面中哪些资源允许有哪些来源，不在指定范围内的统统拒绝。相比同源策略，CSP 可以说是很严格了。

其实施有两种途径：

服务器添加 Content-Security-Policy 响应头来指定规则

HTML 中添加标签来指定 Content-Security-Policy 规则

mobile.twitter.com header 中的 CSP 规则

为了测试方便，以下示例均使用 <meta> 标签来开启 CSP 规则。但 <meta> 中有些指令是不能使用的，后面会了解到。只有响应头中才能使用全部的限制指令。

一个简单示例

创建一个 HTML 文件放入以下内容：

csp_test.html

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Security-Policy" content="script-src 'self' https://unpkg.com"><title>CSP Test</title>
</head>
<body><script src="https://unpkg.com/react@16/umd/react.development.js"></script>
</body>
</html>

在该测试文件所在目录开启一个本地 server 以访问，这里使用 Python 自带的 server: