CODEWITHSUNDEEP
node.jsvue.jsmongoosecontent-security-policycloudinary
Ammar Lee
Ammar Lee

Reputation: 61

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:"

after i uploaded my website on herokuy the images do not working and it gave me that error

Refused to load the image '' because it violates the following Content Security Policy directive: "img-src 'self' data:".

i have tried somethings like

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src data:" />

that but it does not work also

Upvotes: 5

Views: 16088

Answers (4)

Arju S Moon
Arju S Moon

Reputation: 1

This fixed the issue

app.use(helmet());
app.use(helmet.crossOriginEmbedderPolicy({ policy: "credentialless" }));
app.use(
    helmet({
        crossOriginEmbedderPolicy: false,
        originAgentCluster: true
    })
);
app.use(
    helmet.contentSecurityPolicy({
        useDefaults: true,
        directives: {
            "img-src": ["'self'", "https:", "data:", "blob:"]
        }
    })
);

Upvotes: 0

ebed meleck
ebed meleck

Reputation: 373

app.use(helmet({ crossOriginEmbedderPolicy: false, originAgentCluster: true }));
app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "img-src": ["'self'", "https: data: blob:"],
    },
  })
);

Upvotes: 6

Charleskimani
Charleskimani

Reputation: 510

Better practice instead of setting contentSecurityPolicy to false which should be the most last option. Using the Helmet documentation helps alot. I used this in my app and it solves the issue very well. My app is hosted here. Checkout my source code here.

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "img-src": ["'self'", "https: data:"]
    }
  })
)

Upvotes: 3

yerghd
yerghd

Reputation: 29

This disables the contentSecurityPolicy middleware but keeps the rest:

app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

Upvotes: 2

Related Questions