拒绝加载图像 'https://res.cloudinary.com/.. violngecurity Policy 指令：“img-src 'self' 数据：”

问题描述

我使用 vue.js 和 node.js，我在 cloudinary 中上传照片，当我在 heroku 上上传网站时，它运行良好，但出现图像错误，我尝试了很多方法来解决，但它不起作用这是错误

Refused to load the image 'https://res.cloudinary.com/ammarleejot/image/upload/v1609954985/j7v7ezyvnax9fuokrryb.jpg' because it violates the following Content Security Policy directive: "img-src 'self' data:".

这是我尝试使用的元标记

 <Meta charset="utf-8">
    <Meta http-equiv="Content-Security-Policy"
    content="default-src *  data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval' 'unsafe-dynamic'; script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; connect-src * data: blob: 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src * data: blob: ; style-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline';">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">

default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval';连接-src * '不安全的内联'; img-src * 数据：blob：'unsafe-inline'；框架-src *; style-src * 'unsafe-inline';

and when i check my website on https://csper.io/evaluations/603cd4e5b55c2090fdd9fb4a
it show me that result 

default-src 'self'
base-uri 'self'
block-all-mixed-content
font-src 'self' data: https:
frame-ancestors 'self'
img-src 'self' data:
object-src 'none'
script-src 'self'
script-src-attr 'none'
style-src 'self' 'unsafe-inline' https:
upgrade-insecure-requests

解决方法

您可能通过 Helmet 中间件在 HTTP 标头中发布了 CSP。
如果您希望使用 helmet.contentSecurityPolicy(options) 标签，请在 <meta Content Security Policy> 中禁用它。
或者在 Helmet 中配置 CSP 头。

如果同时采用两项内容安全政策，则将适用更严格的政策。

顺便说一句：

'unsafe-dynamic' 是不正确的令牌
'unsafe-inline' 令牌在 connect-src/img-src/font-src 指令中不受支持。

我在评论中看到您已通过将 contentSecurityPolicy 设置为 false 来解决，这样您就禁用了 CSP，我认为这不是您要寻找的...

如果您想授予对该特定域的访问权限，您应该像这样将其添加到 img-src 下的头盔指令中

helmet.contentSecurityPolicy({
        directives: {
            "default-src":[ "'self'" ],"base-uri":[ "'self'" ],"font-src":[ "'self'","https:","data:" ],"frame-ancestors":[ "'self'" ],"img-src":[ "'self'","data:","http://res.cloudinary.com"],<--- HERE
            "script-src":[ "'self'" ],"script-src-attr":[ "'none'" ],"style-src":[ "'self'","'unsafe-inline'" ],}
    });

您可以在此处添加或删除，具体取决于您要允许的内容。

这取决于您的应用程序，但通常最好启用 CSP 以防止大量攻击。

content-security-policy html meta-tags vue.js