CSP报显示图片源被阻止但已配置’srcset’还是不行怎么办？
我在开发环境设置了CSP头，但控制台一直报标签的图片被阻止，明明已经在’srcset’里写了self和具体域名，怎么还是不行？
配置是这样的：Content-Security-Policy: img-src 'self' https://cdn.example.com;，但加载的图片地址确实是https://cdn.example.com/test.jpg啊。
报错信息是这样的：
{
"csp-report": {
"blocked-uri": "https://cdn.example.com/test.jpg",
"document-uri": "http://localhost:3000/",
"violated-directive": "img-src"
}
}
尝试过加nonce和sha256哈希也没用，难道和开发服务器配置有关？其他资源比如CSS/JS都没问题，就图片一直报这个错…
2 条解答
img-src 'self' https://cdn.example.com;，但要注意的是，如果你的页面是在http://localhost:3000/这种非HTTPS环境下运行的，浏览器可能会自动忽略掉HTTPS来源的白名单。先检查一下你的开发环境是不是用的HTTP协议而不是HTTPS。如果是HTTP，浏览器可能会认为这是混合内容（mixed content），即使你在CSP里写了
https://cdn.example.com，它也不会生效。解决办法有两种：
1. 把开发环境改成HTTPS，比如用一些简单的本地证书工具（像mkcert）生成一个本地证书。
2. 如果不想折腾HTTPS，可以试试把CSP改成：
Content-Security-Policy: img-src 'self' http: https:;这样允许所有HTTP和HTTPS的图片源。另外再确认一下，图片加载的时候是不是用了动态插入或者通过JavaScript修改了
src属性，如果是的话，可能还需要额外加个script-src的规则。试试看吧，应该能解决。如果还有问题，可以把更详细的代码贴出来，再看看有没有其他地方漏掉了。
http://localhost:3000这个源。虽然图片地址是https://cdn.example.com，但document-uri是http://localhost:3000，浏览器可能会把它当作混合内容处理。试试把CSP改成这样：如果还是不行，检查下是不是其他地方又重写了CSP头。