JavaScript内核与高级编程之：`JavaScript`的`CSP`：内容安全策略在前端安全中的作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位前端的弄潮儿们，大家好！我是你们的老朋友，今天咱们来聊聊一个听起来有点高冷，但实际上非常接地气的安全卫士——CSP，也就是内容安全策略。别怕，听名字唬人，其实它就像咱们家里的防盗门，专门用来挡住那些不速之客，保护咱们的网页不被恶意脚本入侵。

开场白：你的网页，你的城堡！

想象一下，你的网页就是一个精心打造的城堡，里面住着你的用户，展示着你的内容。你当然希望城堡固若金汤，不让任何心怀不轨的人进来搞破坏。但是，互联网的世界，恶意脚本就像无孔不入的蚊子，随时准备叮你一口，窃取你的数据，篡改你的页面，甚至直接搞瘫你的城堡。

这时候，CSP 就闪亮登场了。它就像城堡的守卫，告诉你哪些东西可以进来，哪些东西必须挡在外面。通过明确的策略，CSP 能有效阻止各种跨站脚本攻击 (XSS) 等安全威胁，保护你的用户和你的数据。

第一章：什么是 CSP？为什么要用它？

CSP，全称 Content Security Policy，中文名内容安全策略。顾名思义，它是一种安全策略，主要用来控制网页可以加载哪些资源，以及可以执行哪些操作。通过配置 CSP，你可以告诉浏览器：

“只允许从我的域名加载脚本”
“不允许执行任何内联 JavaScript 代码”
“只允许加载 HTTPS 协议的图片”
“不允许使用 eval() 函数”

等等等等。

为什么要用 CSP 呢？

防御 XSS 攻击： 这是 CSP 最主要的作用。 XSS 攻击是指攻击者通过注入恶意脚本，篡改你的网页，窃取用户数据，甚至冒充用户进行操作。 CSP 可以通过限制脚本来源，有效阻止 XSS 攻击。
防止点击劫持： 点击劫持是指攻击者通过透明的 iframe 覆盖在你的网页上，诱骗用户点击他们不想点击的链接。 CSP 可以通过 frame-ancestors 指令，限制哪些域名可以嵌入你的网页。
减少恶意软件风险： 恶意软件可能会通过各种方式注入你的网页，CSP 可以通过限制资源类型和来源，降低恶意软件的风险。
提升网站性能： 通过明确允许加载的资源，CSP 可以帮助浏览器更快地加载页面，提升网站性能。

第二章：CSP 的语法和指令

CSP 的语法其实很简单，就是一系列指令，每个指令都定义了某种资源的加载策略。指令之间用分号 ; 分隔。

例如：

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; style-src 'self' 'unsafe-inline';

这条策略的意思是：

default-src 'self': 默认情况下，只允许从当前域名加载资源。
script-src 'self' 'unsafe-inline': 允许从当前域名加载脚本，并且允许执行内联 JavaScript 代码。
img-src 'self' data:: 允许从当前域名加载图片，并且允许使用 data URI 格式的图片。
style-src 'self' 'unsafe-inline': 允许从当前域名加载样式，并且允许执行内联 CSS 样式。

常用的 CSP 指令：

指令	作用
`default-src`	定义所有类型资源的默认加载策略。
`script-src`	定义 JavaScript 脚本的加载策略。
`style-src`	定义 CSS 样式的加载策略。
`img-src`	定义图片的加载策略。
`font-src`	定义字体的加载策略。
`connect-src`	定义 XMLHttpRequest, WebSocket 和 EventSource 的加载策略。
`media-src`	定义 `<audio>`, `<video>` 和 `<track>` 元素的加载策略。
`object-src`	定义 `<object>`, `<embed>` 和 `<applet>` 元素的加载策略。
`frame-src`	定义 `<frame>` 和 `<iframe>` 元素的加载策略。（已经过时，建议使用 `child-src`）
`child-src`	定义 web workers 和嵌套的 browsing contexts (例如 `<frame>` 元素) 的加载策略。
`frame-ancestors`	定义哪些域名可以嵌入你的网页到 `<frame>`, `<iframe>`, `<object>`, `<embed>` 或 `<applet>` 元素中。
`form-action`	定义 `<form>` 元素可以提交到哪些 URL。
`upgrade-insecure-requests`	指示浏览器将所有不安全的 URL (HTTP) 升级为安全的 URL (HTTPS)。
`block-all-mixed-content`	阻止加载任何使用 HTTP 协议的资源，即使你已经在使用 HTTPS。
`report-uri`	指定一个 URL，浏览器会将违反 CSP 策略的报告发送到该 URL。（已经过时，建议使用 `report-to`）
`report-to`	指定一个或多个端点，浏览器会将违反 CSP 策略的报告发送到这些端点。
`worker-src`	定义 worker scripts 的加载策略。
`base-uri`	定义 `<base>` 元素可以使用的 URL。
`plugin-types`	定义浏览器可以加载的插件类型。
`sandbox`	为请求的资源启用沙箱。

指令值：

每个指令的值可以是一个或多个源列表 (source list)，源列表定义了允许加载资源的来源。常用的源值有：

'self': 允许从当前域名加载资源。
'none': 不允许加载任何资源。
'unsafe-inline': 允许执行内联 JavaScript 代码和 CSS 样式。 （慎用！）
'unsafe-eval': 允许使用 eval() 函数。 （慎用！）
'unsafe-hashes': 允许特定的内联事件处理程序。 （慎用！）
data:: 允许使用 data URI 格式的资源 (例如 data:image/png;base64,…)。
https:: 允许使用 HTTPS 协议加载资源。
http:: 允许使用 HTTP 协议加载资源。 (不建议使用！)
blob:: 允许使用 blob URI 格式的资源。
mediastream:: 允许使用 mediastream URI 格式的资源。
filesystem:: 允许使用 filesystem URI 格式的资源。
nonce-<base64-value>: 允许执行带有指定 nonce 属性值的内联脚本或样式。
sha256-<hash-value>, sha384-<hash-value>, sha512-<hash-value>: 允许执行带有指定哈希值的内联脚本或样式。
<host-source>: 允许从指定的域名加载资源 (例如 example.com, *.example.com)。

第三章：如何配置 CSP？

配置 CSP 主要有两种方式：

HTTP Header： 这是最常用的方式，通过在 HTTP 响应头中设置 Content-Security-Policy 字段来配置 CSP。

例如，在 Node.js 中：

const http = require('http');

const server = http.createServer((req, res) => {
  res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; style-src 'self' 'unsafe-inline'");
  res.writeHead(200, {'Content-Type': 'text/html'});
  res.end('<h1>Hello, CSP!</h1><script>alert("Hello from inline script!");</script><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w+gYmAyAwQYgJwAAAABJRU5ErkJggg==">');
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

在 Apache 中，可以在 .htaccess 文件中添加：

Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; style-src 'self' 'unsafe-inline'"

在 Nginx 中，可以在 nginx.conf 文件中添加：

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; style-src 'self' 'unsafe-inline'";

HTML Meta 标签： 你也可以在 HTML 文档中使用 <meta> 标签来配置 CSP。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; style-src 'self' 'unsafe-inline'">
  <title>CSP Example</title>
</head>
<body>
  <h1>Hello, CSP!</h1>
  <script>alert("Hello from inline script!");</script>
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w+gYmAyAwQYgJwAAAABJRU5ErkJggg==">
</body>
</html>

注意： 使用 <meta> 标签配置 CSP 有一些限制，例如不支持 frame-ancestors 指令。建议优先使用 HTTP Header 方式配置 CSP。

第四章：CSP 的最佳实践

配置 CSP 是一项需要谨慎对待的任务。如果配置不当，可能会导致网站功能受损。以下是一些 CSP 的最佳实践：

从 Report-Only 模式开始： 在正式启用 CSP 之前，建议先使用 Content-Security-Policy-Report-Only 响应头。这样，浏览器只会报告违反 CSP 策略的行为，而不会阻止这些行为。你可以根据报告结果，逐步调整你的 CSP 策略，直到它能够满足你的安全需求，同时不会影响网站的正常功能。
```
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'unsafe-inline'; report-uri /csp-report-endpoint;
```
使用 default-src 指令： default-src 指令定义了所有类型资源的默认加载策略。如果你没有为某个特定类型的资源定义策略，浏览器就会使用 default-src 指令来决定是否允许加载该资源。因此，建议你始终设置 default-src 指令，并将其设置为一个安全的默认值，例如 'self'。
尽量避免使用 'unsafe-inline' 和 'unsafe-eval'： 这两个指令会降低 CSP 的安全性，因为它们允许执行内联 JavaScript 代码和使用 eval() 函数。如果你必须使用内联 JavaScript 代码，可以考虑使用 nonce 或 hash 属性来允许特定的内联脚本。如果你必须使用 eval() 函数，可以考虑使用 Function() 构造函数来代替。
使用 nonce 或 hash 属性： nonce 和 hash 属性可以用来允许特定的内联脚本或样式。 nonce 属性是一个随机字符串，你需要在 CSP 策略和 HTML 代码中都指定相同的 nonce 值。 hash 属性是内联脚本或样式的哈希值，你需要在 CSP 策略中指定哈希值。

使用 Nonce：
```
<script nonce="rAnd0mN0nc3">
  alert('Hello, CSP with nonce!');
</script>
```
```
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-rAnd0mN0nc3';
```
使用 Hash：
```
<script>
  alert('Hello, CSP with hash!');
</script>
```
```
Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-YOUR_SCRIPT_HASH';
```
你需要计算 <script> 标签内代码的 SHA256 哈希值，并将其添加到 CSP 策略中。

使用 report-to 指令： report-to 指令可以用来指定一个或多个端点，浏览器会将违反 CSP 策略的报告发送到这些端点。你可以使用这些报告来监控你的网站的安全性，并及时发现和修复安全漏洞。

Content-Security-Policy: default-src 'self'; script-src 'self'; report-to csp-endpoint;

Content-Security-Policy: default-src 'self'; script-src 'self'; report-uri /csp-report-endpoint; // 兼容旧版本浏览器

你需要配置一个端点来接收 CSP 报告。例如，在 Node.js 中：

app.post('/csp-report-endpoint', (req, res) => {
  console.log('CSP Violation Report:', req.body);
  res.sendStatus(204); // 必须返回 204 No Content
});

定期审查和更新你的 CSP 策略： 随着你的网站的不断发展，你的 CSP 策略也需要不断更新。定期审查你的 CSP 策略，确保它能够满足你的安全需求，并且不会影响网站的正常功能。

第五章：CSP 的实际应用案例

阻止第三方脚本加载： 很多网站都会使用第三方脚本，例如广告脚本、分析脚本等。这些脚本可能会带来安全风险，例如注入恶意代码、窃取用户数据等。使用 CSP 可以限制第三方脚本的加载，从而降低安全风险。
```
Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com;
```
这条策略只允许从当前域名和 https://example.com 加载脚本。
防止点击劫持攻击： 使用 frame-ancestors 指令可以防止点击劫持攻击。
```
Content-Security-Policy: frame-ancestors 'self';
```
这条策略只允许当前域名嵌入你的网页。
限制表单提交的目标： 使用 form-action 指令可以限制表单提交的目标。
```
Content-Security-Policy: form-action 'self' https://example.com;
```
这条策略只允许表单提交到当前域名和 https://example.com。

总结：CSP，前端安全的守护神！

CSP 就像前端安全的守护神，它能有效阻止各种跨站脚本攻击 (XSS) 等安全威胁，保护你的用户和你的数据。虽然配置 CSP 可能需要一些时间和精力，但它绝对是值得的。

希望今天的讲座能让你对 CSP 有更深入的了解。记住，安全无小事，让我们一起努力，打造更安全、更可靠的 Web 应用！

如果大家还有什么问题，欢迎随时提问，咱们下期再见！

发表回复 取消回复

发表回复取消回复