拒绝加载图像 'https://res.cloudinary.com/.. violngecurity Policy directive: "img-src 'self' data:&quo

Posted 2023-02-22

【中文标题】拒绝加载图像 \'https://res.cloudinary.com/.. violngecurity Policy directive: "img-src \'self\' data:"

【英文标题】：Refused to load the image 'https://res.cloudinary.com/.. violngecurity Policy directive: "img-src 'self' data:"拒绝加载图像 'https://res.cloudinary.com/.. violngecurity Policy directive: "img-src 'self' data:"

【发布时间】：2021-05-30 22:51:48

【问题描述】：

iam 使用 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'; connect-src * '不安全的内联'; img-src * 数据：blob：'unsafe-inline'；帧源*； 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

【参考方案1】：

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

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

顺便说一句：

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

【讨论】：

谢谢你，太好了，我做错了，就像你说的那样使用 helmt，我像 app.use(hamlet( contentSecurityPolicy: false, )) 那样编辑了它，它现在可以工作了

是的，你能告诉我如何投票，因为我不知道

@AjeetShah 谢谢你，我真的很感激你，我没有使用它的经验，所以我还在学习

【参考方案2】：

我在评论中看到您已通过将 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'", "https:", "'unsafe-inline'" ],
        
    );

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

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