内容安全策略（CSP）如何工作？ [英] How does Content Security Policy (CSP) work?

问题描述

我在开发人员控制台中遇到了很多错误：

I'm getting a bunch of errors in the developer console:

拒绝评估字符串

Refused to evaluate a string

拒绝执行内联脚本，因为它违反了以下内容安全策略指令

Refused to execute inline script because it violates the following Content Security Policy directive

拒绝加载脚本

拒绝加载样式表

这是怎么回事？内容安全策略（CSP）如何工作？如何使用 Content-Security-Policy HTTP标头？

What's this all about? How does Content Security Policy (CSP) work? How do I use the Content-Security-Policy HTTP header?

具体地说，如何...

Specifically, how to...

1. ...允许多个来源？


2. ...使用不同的指令？


3. ..使用多个指令？


4. ...处理端口？


5. ...处理不同的协议？


6. ...是否允许 file：// 协议？


7. ...使用内联样式，脚本和标签< style> 和< script> ？


8. ... allow eval（）？

1. ...allow multiple sources?
2. ...use different directives?
3. ...use multiple directives?
4. ...handle ports?
5. ...handle different protocols?
6. ...allow file:// protocol?
7. ...use inline styles, scripts, and tags <style> and <script>?
8. ...allow eval()?

最后：

1. 'self'到底是什么意思？

1. What exactly does 'self' mean?

推荐答案

Content-Security-Policy 元标记可让您降低 XSS 攻击，它允许您定义可以从何处加载资源，从而防止浏览器从任何其他位置加载数据。这会使攻击者更难向您的网站中注入恶意代码。

The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code into your site.

我把头撞在砖墙上，试图弄清为什么我一个又一个地收到CSP错误，然后在那里似乎没有任何简洁明了的说明，说明其如何工作。因此，这是我尝试简要解释CSP的一些要点，主要集中在我发现难以解决的问题上。

I banged my head against a brick wall trying to figure out why I was getting CSP errors one after another, and there didn't seem to be any concise, clear instructions on just how does it work. So here's my attempt at explaining some points of CSP briefly, mostly concentrating on the things I found hard to solve.

为简洁起见，我不会写完整的内容在每个样本中标记。相反，我只会显示 content 属性，因此，一个示例显示 content = default-src'self' 的意思是：

For brevity I won’t write the full tag in each sample. Instead I'll only show the content property, so a sample that says content="default-src 'self'" means this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

1。我如何允许多个来源？

您只需在指令后以空格分隔的列表形式列出您的来源：

You can simply list your sources after a directive as a space-separated list:

content="default-src 'self' https://example.com/js/"

请注意，除特殊以外的其他参数（如'self'。此外，指令后没有冒号（：）。只是指令，然后是用空格分隔的参数列表。

Note that there are no quotes around parameters other than the special ones, like 'self'. Also, there's no colon (:) after the directive. Just the directive, then a space-separated list of parameters.

所有隐含在指定参数之下的内容都是允许的。这意味着在上面的示例中，这些将是有效的来源：

Everything below the specified parameters is implicitly allowed. That means that in the example above these would be valid sources:

https://example.com/js/file.js
https://example.com/js/subdir/anotherfile.js

以下这些无效：

http://example.com/js/file.js
^^^^ wrong protocol

https://example.com/file.js
                   ^^ above the specified path

2 。如何使用不同的指令？它们各自做什么？

最常见的指令是：

• default-src 用于加载javascript，图像，CSS，字体，AJAX请求等的默认策略


• script-src 定义javascript文件的有效来源


• style-src 定义css文件的有效来源


• img-src 定义图像的有效来源


• connect-src 为XMLHttpRequest（AJAX），WebSockets或EventSource定义有效的目标。如果尝试与此处不允许的主机建立连接，则浏览器将模拟 400 错误

• default-src the default policy for loading javascript, images, CSS, fonts, AJAX requests, etc
• script-src defines valid sources for javascript files
• style-src defines valid sources for css files
• img-src defines valid sources for images
• connect-src defines valid targets for to XMLHttpRequest (AJAX), WebSockets or EventSource. If a connection attempt is made to a host that's not allowed here, the browser will emulate a 400 error

还有其他一些，但是这些是您最需要的。

There are others, but these are the ones you're most likely to need.

3。我该如何使用多个指令？

您可以通过在每个元标记中以分号（; ）：

You define all your directives inside one meta-tag by terminating them with a semicolon (;):

content="default-src 'self' https://example.com/js/; style-src 'self'"

4。我该如何处理端口？

所有内容，但需要通过在允许的域之后添加端口号或星号来明确允许默认端口：

Everything but the default ports needs to be allowed explicitly by adding the port number or an asterisk after the allowed domain:

content="default-src 'self' https://ajax.googleapis.com http://example.com:123/free/stuff/"

以上结果将导致：

https://ajax.googleapis.com:123
                           ^^^^ Not ok, wrong port

https://ajax.googleapis.com - OK

http://example.com/free/stuff/file.js
                 ^^ Not ok, only the port 123 is allowed

http://example.com:123/free/stuff/file.js - OK

正如我提到的，您还可以使用星号明确允许所有端口：

As I mentioned, you can also use an asterisk to explicitly allow all ports:

content="default-src example.com:*"

5。我如何处理不同的协议？

默认情况下，仅允许标准协议。例如，要允许WebSockets ws：// ，您必须明确允许它：

By default, only standard protocols are allowed. For example to allow WebSockets ws:// you will have to allow it explicitly:

content="default-src 'self'; connect-src ws:; style-src 'self'"
                                         ^^^ web Sockets are now allowed on all domains and ports.

6。我如何允许文件协议 file：// ？

6. How can I allow the file protocol file://?

如果您尝试将其定义为它不会工作。相反，您可以使用 filesystem 参数来允许它：

If you'll try to define it as such it won’t work. Instead, you'll allow it with the filesystem parameter:

content="default-src filesystem"

7。如何使用内联脚本和样式定义？

除非明确允许，否则您不能使用内联样式定义，即< script> 标记或 onclick 之类的标记属性中。您可以这样操作：

Unless explicitly allowed, you can't use inline style definitions, code inside <script> tags or in tag properties like onclick. You allow them like so:

content="script-src 'unsafe-inline'; style-src 'unsafe-inline'"

您还必须明确允许使用内联的base64编码图像：

You'll also have to explicitly allow inline, base64 encoded images:

content="img-src data:"

8。我如何允许 eval（）？

8. How can I allow eval()?

我敢肯定，很多人会说你不允许，因为评估是邪恶的，这是世界即将灭亡的最可能原因。那些人会错的。当然，您可以使用eval肯定会给您网站的安全性带来重大漏洞，但是它具有完全有效的用例。您只需要对使用它有所了解。您可以这样操作：

I'm sure many people would say that you don't, since 'eval is evil' and the most likely cause for the impending end of the world. Those people would be wrong. Sure, you can definitely punch major holes into your site's security with eval, but it has perfectly valid use cases. You just have to be smart about using it. You allow it like so:

content="script-src 'unsafe-eval'"

9。 'self'到底是什么意思？

9. What exactly does 'self' mean?

您可能会使用'self'表示本地主机，本地文件系统或同一主机上的任何内容。这并不意味着这些。这意味着与定义内容策略的文件具有相同的方案（协议），相同的主机和相同的端口的源。是否通过HTTP服务您的站点？

You might take 'self' to mean localhost, local filesystem, or anything on the same host. It doesn't mean any of those. It means sources that have the same scheme (protocol), same host, and same port as the file the content policy is defined in. Serving your site over HTTP? No https for you then, unless you define it explicitly.

在大多数示例中，我通常使用'self'，因为通常情况下，包含它的意义，但这绝不是强制性的。

I've used 'self' in most examples as it usually makes sense to include it, but it's by no means mandatory. Leave it out if you don't need it.

但是请稍等！我不能只使用 content =' ; default-src *'''并完成此操作？

But hang on a minute! Can't I just use content="default-src *" and be done with it?

否。除了明显的安全漏洞外，这也无法按您期望的那样工作。即使一些文档声称它允许任何操作，但事实并非如此。它不允许内联或评估，因此要确实使您的站点更加脆弱，可以使用以下方法：

No. In addition to the obvious security vulnerabilities, this also won’t work as you'd expect. Even though some docs claim it allows anything, that's not true. It doesn't allow inlining or evals, so to really, really make your site extra vulnerable, you would use this:

content="default-src * 'unsafe-inline' 'unsafe-eval'"

...但我相信您不会。

... but I trust you won’t.

进一步阅读：

http：// content-security-policy .com

http：//en.wikipedia。 org / wiki / Content_Security_Policy

这篇关于内容安全策略（CSP）如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！