前端的CSP & CSP如何落地，了解一下

CSP(Content-Security-Policy)是一个HTTP response header, 它描述允许页面控制用户代理能够为指定的页面加载哪些资源, 可防止XSS攻击

使用方式：

Content-Security-Policy: 指令1 指令1的值1 指令1的值2 指令1的值3; 指令2 指令2的值1 指令2的值2
复制代码

调试工具： Chrome插件——modheader。通过随意设置响应头来测试CSP
简单过一遍常见的指令
获取资源相关的指令

font-src
frame-src
img-src
script-src
media-src
style-src
...等等，其他参考MDN
复制代码

这些src规定了页面只能加载里面所设置的font、iframe、img、script... 这些资源，比如有一个html页面的response header是:

Content-Security-Policy: img-src a.b.c; script-src 'unsafe-inline' a.b.c; style-src 'self'
复制代码

表示只能加载来自 a.b.c 域的图片、a.b.c 域的脚本和行内脚本(如 <script>console.log(1)</script> )、只能加载自己域下的style

这些xx-src，一般常见的配置有：

host配置

可精确匹配也可通配符匹配：

https://*.qq.com
https://a.b.com
*.qq.com
www.qq.com
复制代码

<