内容安全策略如何工作？

Question

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

拒绝评估字符串

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

拒绝加载脚本

拒绝加载样式表

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

具体来说，如何…

1. …允许多个来源？
2. …使用不同的指令？
3. …使用多个指令？
4. …处理端口？
5. …处理不同的协议？
6. …允许的file://协议？
7. …使用内联样式，脚本和标签<style>以及<script>？
8. …允许eval()吗？

最后：

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

Answer 1

通过使用Content-Security- Policy元标记，您可以定义可以从何处加载资源，从而防止浏览器从任何其他位置加载数据，从而降低XSS攻击的风险。这使攻击者更难将恶意代码注入您的站点。

我把头撞在砖墙上，试图弄清楚为什么我一次又一次地遇到CSP错误，而且似乎没有关于它如何工作的任何简洁明了的指示。因此，这是我尝试简要解释CSP的
一些 要点，主要集中在我发现难以解决的问题上。

为简便起见，我不会在每个样本中都写上完整标签。取而代之的是，我仅显示该content属性，因此一个示例表示content="default-src 'self'"如下：

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

1.如何允许多个来源？

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

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

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

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

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错误

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

3.如何使用多个指令？

您可以在一个元标记中定义所有指令，方法是使用分号（;）终止它们：

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

4.如何处理端口？

必须通过在允许的域之后添加端口号或星号来明确允许除默认端口之外的所有端口：

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

如前所述，您还可以使用星号显式允许所有端口：

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

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

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

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

6.如何允许文件协议file://？

如果您尝试这样定义它，它将无法正常工作。相反，您可以使用filesystem参数：

content="default-src filesystem"

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

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

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

您还必须显式允许内联，base64编码的图像：

content="img-src data:"

8.如何允许eval()？

我敢肯定，很多人会说你不会，因为“评估是邪恶的”，这是世界即将终结的最可能原因。那些人会错的。当然，您可以使用eval肯定会打扰您网站的安全性，但是它具有完全有效的用例。您只需要对使用它有所了解。您可以这样允许它：

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

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

您可能会'self'指本地主机，本地文件系统或同一主机上的任何内容。这并不意味着这些。这意味着与定义内容策略的文件具有相同的方案（协议），相同的主机和相同的端口的源。是否通过HTTP服务您的站点？那么，除非您明确定义，否则不为您提供https。

我'self'在大多数示例中都使用过，因为通常将其包含在内是有意义的，但绝不是强制性的。如果您不需要它，则将其保留。

但是等一下！ 我不能只是使用content="default-src *"并完成它吗？

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

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

…但是我相信你不会。