拒绝加载图像'https://res.cloudinary.com/.. violngecurity策略指令:"img-src'自身'数据:" [英] Refused to load the image 'https://res.cloudinary.com/.. violngecurity Policy directive: "img-src 'self' data:"

问题描述

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

iam using vue.js and node.js and i upload photos in cloudinary and when i upload the website on heroku it work well but get me an error for images and i tried a lot of ways to solve but it does not work that is the error

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:".

这是我尝试使用的元标记

and that is my meta tag that i have tried to use

 <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';frame-src *;style-src *'unsafe-inline';

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

推荐答案

您已经在HTTP标头中发布了CSP，可能是通过

You have CSP published in HTTP header, probably via Helmet middleware.
Disable it in helmet.contentSecurityPolicy(options) if you wish to use <meta Content Security Policy> tag.
Or configure CSP header in Helmet.

如果同时有两个内容安全策略"，则将更加严格.

In case of two Content Security Policy at the same time more strict will aply.

顺便说一句:

• 'unsafe-dynamic'是不正确的令牌
• 'unsafe-inline'令牌在 connect-src / img-src / font-src 指令.

• 'unsafe-dynamic' is incorrect token
• 'unsafe-inline' token is not supported in connect-src/img-src/font-src directives.

这篇关于拒绝加载图像'https://res.cloudinary.com/.. violngecurity策略指令:"img-src'自身'数据:"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！