Content Security Policy(CSP)应用及说明

　　什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。通过CSP协定，让WEB处于一个安全的运行环境中。 有什么用? 我们知道前端有个很著名的”同源策略”,简而言之,就是说一个页面的资源只能从与之同源的服务器获取,而不允许跨域获取.这样可以避免页面被注入恶意代码,影响安全.但是这个策略是个双刃剑,挡住恶意代码的同时也限制了前端的灵活性,那有没有一种方法既可以让我们可以跨域获取资源,又能防止恶意代码呢? 答案是当然有了,这就是csp,通过csp我们可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起跨域请求,而不符合我们策略的恶意攻击则被挡在门外。
指令设置详情见上传comments附件。 参考文档： https://blog.csdn.net/JoeBlackzqq/article/details/89017945?ops_request_misc=&request_id=&biz_id=102&utm_term=content-security-policy.com&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-89017945.142^v19^rank_v32,157^v15^new_3&spm=1018.2226.3001.4187
　　CSP配置方式：

1.通过响应包头（Response Header）实现： Content-Security-policy: default-src 'self'; script-src 'self' allowed.com; img-src 'self' allowed.com; style-src 'self';

2.通过HTML 元标签实现： <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

CSP常见指令：

script-src：这个指令规定了网站中可执行脚本的来源，同时也控制了 XSLT 的来源;

style-src：定义了样式文件的来源;

media-src：规定了富媒体（音视频、视频文本轨格式）资源的来源;

child-src：规定了像 worker 、frame 这种嵌入可使用的链接;

font-src：规定了字体的来源，如果在网页中使用了第三方字体可以使用这个指令;

img-src：规定了网站中的图片的来源;

form-action：规定了网页中的 form 元素 action 的可提交地址;

connect-src：规定了脚本中发起连接的地址，像 XMLHttpRequest 的 send 方法、WebSocket 连接地址、EventSource 等;

frame-src：这个指令规定了 frame 的可使用链接。

在 CSP level 2 中废弃了，文档中叫我们用 child-src 来代替这个指令，但在 level 3 中恢复使用; object-src：规定了一些插件的来源，像 Flash 等; report-uri：这个指令是指定一个 CSP 上报地址，当浏览器检测到有不通过指令时，将通过这个指定地址进行上报。值得注意的是，这个指令不能在 meta 元素中使用，并且在 CSP level3 中这个指令会被废弃，用 report-to 来代替，为了保证这个指令有效，官方推荐 report-uri & report-to 同时使用; worker-src：这个指令是 CSP level3 中加的，规定了 Worker、SharedWorker、serviceWorker 中可用的地址; base-uri：规定了页面 base 标签中的链接; frame-ancestors：规定了当前的页面可以被哪些来源所嵌入。作用于 <frame>, <iframe>, <embed>, <applet>。该指令不能通过 <meta>指定且只对非 HTML 文档类型的资源生效;