Angular: Refused to evaluate a string as JavaScript because 'unsafe-eval'

Question

In my application a blob fetched by means of a API-call is passed on to a custom npm-package that will show the blob on the screen (it’s an image). Locally it works! Only not on the development server.

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://www.example.com 'unsafe-inline' https://www.anotherexample.com".

A plane application has be made that fetches the blob and uses the same custom npm-package. The problem seem to be with Angular or better said with my settings. The settings locally are the same and its not clear what the problem is.

Answer 1

The error is not originated in Angular, the problem is your Content-Security-Policy (CSP). Your CSP is either defined in the index.html file as a meta tag in the header section, or set as a header on your server.

You could simply add 'unsafe-eval' to the CSP, but this is very risky in terms of security. To me, it seems like the library you are using here uses eval at some place, which is bad and should be avoided.

With development server, do you mean it is actually deployed, or the local server that starts with ng serve?