Refused To Load The Image 'https://res.cloudinary.com/.. Violngecurity Policy Directive: "img-src 'self' Data:"

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 sol

Solution 1:

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.

BTW:

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

Solution 2:

I saw in the comment that you have solved by setting contentSecurityPolicy to false, in this way you are disabling CSP, I don't think that it is what you were looking for...

If you want to give access to that specific domain you should add it to your helmet directive under img-src just like this

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'" ],
        }
    });

And here you can add or remove depending on what you want to allow.

It depend on your application but usally is better to enable CSP to prevent a good amount of attacks.