Refused to load the image ‘＜URL＞‘ because it violates the following Content Security Policy directiv

前言：

        旧项目开发新功能时，页面上展示图片失败，控制台报错！

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data: base64".

拒绝加载图像‘<URL>’，因为它违反了以下内容安全策略指令：“img-src 'self' data: base64”。

检索了很多方法都是让前端在页面上添加下方代码：

<meta http-equiv="Content-Security-Policy" content="default-src 'self';img-src * data:; style-src 'self' 'unsafe-inline'; script-src 'self'"/>

 但是，添加了，没有用！！！

找后端搭子让他在自己的代码中搜索看是否出现 “img-src 'self' data: base64” 代码，果不其然，在后端有这个配置，通过把img-src的值换成 * ，图片展示正常，控制台没有了报错！

 有的时候写项目别老觉得是自己的问题，可以大胆的怀疑一下自己的搭档 ^_^

 正文：

Web 安全之内容安全策略（Content-Security-Policy）简称CSP!

内容安全策略（Content Security Policy，简称CSP）是一种以可信白名单作机制，来限制网站是否可以包含某些来源内容，缓解广泛的内容注入漏洞，比如 XSS。 简单来说，就是我们能够规定，我们的网站只接受我们指定的请求资源。

CSP在前端页面使用：

<meta http-equiv="content-security-policy" content="策略集">

CSP语法：

        1、每一条策略都是指令与指令值组成

        2、策略与策略之间用分号隔开

        3、在一条策略中，如果一个指令中有多个指令值，则指令值之间用空号隔开

Content-Security-Policy:指令a 指令值a1 指令值a2；指令b 指令值b；指令c 指令值c

 CSP指令：

• default-src : 定义针对所有类型（js/image/css/font/ajax/iframe/多媒体等）资源的默认加载策略，如果某类型资源没有单独定义策略，就使用默认的。
• script-src : 定义针对 JavaScript 的加载策略。
• style-src : 定义针对样式的加载策略。
• img-src : 定义针对图片的加载策略。
• font-src : 定义针对字体的加载策略。
• media-src : 定义针对多媒体的加载策略，例如:音频标签<audio>和视频标签<video>。
• object-src : 定义针对插件的加载策略，例如：<object>、<embed>、<applet>。
• child-src :定义针对框架的加载策略，例如： <frame>,<iframe>。
• connect-src : 定义针对 Ajax/WebSocket 等请求的加载策略。不允许的情况下，浏览器会模拟一个状态为400的响应。
• sandbox : 定义针对 sandbox 的限制，相当于 <iframe>的sandbox属性。
• report-uri : 告诉浏览器如果请求的资源不被策略允许时，往哪个地址提交日志信息。
• form-action : 定义针对提交的 form 到特定来源的加载策略。
• referrer : 定义针对 referrer 的加载策略。
• reflected-xss : 定义针对 XSS 过滤器使用策略。

CSP指令值：

指令值	说明
*	允许加载任何内容
‘none’	不允许加载任何内容
‘self’	允许加载相同源的内容
www.a.com	允许加载指定域名的资源
*.a.com	允许加载a.com任何子域名的资源
https://a.com	允许加载a.com的https资源
https:	允许加载https资源
data:	允许加载data:协议，比如base64编码的图片
‘unsafe-inline‘	允许加载 inline 资源，例如style属性、onclick、inline js、inline css等
‘unsafe-eval‘	允许加载动态 js 代码，例如 eval()

     

参考文章：Web 安全之内容安全策略（Content-Security-Policy,CSP）配置问题_content security policy (csp) header not set-优快云博客