Img-Src' Was Not Explicitly Set, So 'Default-Src' Is Used as a Fallback

img-src' was not explicitly set, so 'default-src' is used as a fallback

So how can i enable setting img src dynamically ?

The problem is not setting the src, the problem is setting the src to a data: scheme URI.

Add data: to the list of things allowed by the content security policy. Either for the default-src or you could define a separate img-src.

In the example below, I have added img-src 'self' data:; to the start of the meta tag in the index.html file.

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">

Content Security Policy: img-src 'self' data:

Try replacing this part:

img-src * 'self' data: https:;

So the complete tag:

<meta http-equiv="Content-Security-Policy" content="default-src *;
   img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
   style-src  'self' 'unsafe-inline' *">

Content Security Policy Reference

Refused to load the image because it violates the following Content Security Policy directive: default-src 'none'

You have status code 500 Internal Server Error Server, but not 200 OK. In this case NodeJS runs the finalhandler which publish the default CSP: Content-Security-Policy: default-src 'none' for security reasons.

default-src 'none' blocks all resourses include images.

I guess you have /favicon.ico blocked, browsers loads it by default from the web pages root /, here is a similar issue was solved.

You need to fix 500 Internal Server Error Server.

Refused to load the image 'blob:...' because it violates the following Content Security Policy

This is the fix for either image and base64.

Need to add img-src 'self' blob: data:; As follow:

<meta http-equiv="Content-Security-Policy" 
    content="
      worker-src blob:; 
      child-src blob: gap:;
      img-src 'self' blob: data:;
      default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">

---

Related Topics