How to resolve error message of Content-security-policy

Question

I'm using react-leaflet version 4.2.1 and got the error message: "Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' blob: data:"

I've added a <meta /> tag to the index.html as describe:

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

and it doesn't solve the problem.

Any ideas?

Answer 1

Your problem is that there is a default Content Security Policy applied that all content needs to pass. When you add another policy it still needs to pass the original one, adding another can only make it stricter.

You need to modify the original policy, this answer can likely be helpful.