CSP

网络安全防范

XSS的全称叫做跨域脚本攻击，是最常见且危害性最大的网页安全漏洞。

简单来说，就是攻击者想尽一切办法将可执行的代码插入到网页中。

比较常见的是在评论功能中，攻击者可以在评论区提交以下评论：

<script>alert(1)</script>

该评论被提交后，会存储在数据库中，当其他用户打开该页面时，该代码会被自动执行，用户就会被攻击到。

因此当我们在写代码的时候，必须时刻提防，对用户的输入永远保持不可信的态度。

为了防止XSS，我们在每次做项目的时候，做大量的编程措施。但这会做大量重复的工作，非常麻烦，显然不符合代码可重用可复用的理念。

有人就说了啊，能不能把这个工作交给浏览器去处理呢，让浏览器自动禁止外部恶意脚本？

然后**网页安全策略（CSP）**就出现了。

CSP的本质是添加白名单，开发者告诉客户端，哪些外部资源可以加载和执行，也就是添加白名单。客户端负责提供配置，实现和执行全部都交给浏览器。

开启CSP之后，网页的安全性得到了极大的保障。

开启CSP有两种方式。一种是通过HTTP头信息的Content-Security-Policy字段，另一种是通过网页的meta标签。

第一种可以在DevTools中的Network面板中查看：

github中的CSP设置

第二种如下：

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

开启之后，不符合CSP的外部资源就会被阻止加载。

CSP字段

CSP通过不同的字段限制不同类型的资源。

script-src：外部脚本
style-src：样式表
img-src：图像
media-src：音频和视频
font-src：字体
object-src：插件
child-src：框架
frame-ancestors：嵌入的外部资源<frame>
connect-src：HTTP连接
worker-src：worker脚本
manifest-src：manifest文件

默认配置使用default-src，默认配置即为各个字段的默认值。

有时候，我们除了防范XSS攻击，还希望可以记录此类行为，可以使用report-uri字段。

更多详细配置可以参考阮一峰 Content Security Policy 入门教程。

- END -