拒绝加载映像'https://res.cloudinary.com/..冲突‘安全策略指令："img-src 'self’data:“
我正在使用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标记
<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 * 'unsafe-inline'；img-src * data: blob：'unsafe-inline'；frame-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回答 4
Stack Overflow用户
发布于 2021-03-01 20:10:01
您可以通过Helmet中间件在header中发布CSP。
如果您希望使用<meta Content Security Policy>标签，请在helmet.contentSecurityPolicy(options)中禁用它。
或在头盔中配置CSP报头。
在两个内容安全策略同时存在的情况下，将采用更严格的策略。
顺便说一句：
'unsafe-dynamic'不正确。connect-src/img-src/font-src指令中不支持token'unsafe-inline'标记。
Stack Overflow用户
发布于 2021-04-29 21:39:43
我在评论中看到你已经通过将contentSecurityPolicy设置为false来解决问题，这样你就禁用了CSP，我不认为这是你想要的……
如果您想要授予对特定域访问权限，则应该将其添加到img-src下的helmet指令中，如下所示
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来防止大量攻击。
Stack Overflow用户
发布于 2022-02-01 21:45:36
也有同样的问题，但现在它从cloudinary加载图像
app.use(
helmet.contentSecurityPolicy({
useDefaults: true,
directives: {
"img-src": ["https://mysitename.com", "https://res.cloudinary.com/"],
upgradeInsecureRequests: [],
},
reportOnly: false,
})
);https://stackoverflow.com/questions/66421706
复制相似问题
腾讯云开发者
