why does browser still refused to load the image base64 after I added the Content-Security-Policy mate

Question

i created a new project with the create-react-app and browser still refused to load the image base64 after I added the Content-Security-Policy mate

index.html

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

console

Refused to load the image 'data:image/gif;base64,R0lGODlhEwAVAMQAAOLx9cro7t3v89zu89bt8dXt8d/v89Ps8ODw9NLr8Nru88vo79ft8dnu8s/q79Hr783q787q78vp78nn7szp78no7gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAATABUAAAVvICCOZGmeqIisbOu2RizP9CzceK7nQ+//wJ9iSCwai42kcslcMp7QqDRKqFqv2Gthy+16u4eweEweJ87otDr9aLvf8LdjTq/b65G8fs/fQ/6AgYKBEoWGh4UUiBILjY6PkI8Bk5SVkxWWlBOZnJQhADs=' because it violates the following Content Security Policy directive: "img-src *". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. data:' must be added explicitely.

err msg image

Does anyone know why?

Answer 1

The policy you show is "img-src 'self' data: ;" while the the violated directive given in the error message is "img-src *". This means that there are multiple policies, and content needs to pass all policies. It does pass the one defined in your meta tag, but there is likely another policy set in a response header that you will also need to remove or modify to allow "data:".