Angular Content Security Policy violation in production on file upload

Question

I have an angular app where users can upload and submit images, when working locally everything works fine but once i built my project and hosted it i am getting Content Security Policy violation errors when i try to upload an image through a file input and showing a preview of the image.

here is an example of the errors i am getting:

Refused to load the image 'data:image/png;base64,/9j/...' because it violates the following
Content Security Policy directive: "default-src https: 'unsafe-eval' 'unsafe-inline'".
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

the error shows immediately after the user chose a file using the file input inside the form and the preview image is shown as a broken link.

i tried implementing some CSP in my index.html meta tags like so:

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

but it did not work, is their some documentation you can recommend in order to understand my problem?

if you need any piece of code or more information please let me know, to be honest i am not sure what is causing the problem in the first place.

Answer 1

Maybe this can help? https://github.com/Azure/static-web-apps/issues/2 and this https://learn.microsoft.com/en-us/azure/static-web-apps/routes#default-headers I don't have access to azure so I can't help more than pointing to resources, but maybe by following these resources, you'll have the ability to change the csp to fit your need.