Error no angular: "Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'"

Question

My project in Angular 6.2.8, was going very well. However, this error started to appear on the console:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-2P8mXF+NOGY5a6oJ1jDjLINrckn9RgJYdEesn+Qf4rQ='), or a nonce ('nonce-...') is required to enable inline execution.

Does anyone have any idea how I can fix this?

Can you provide more information about packages and scripts that you are using? — Bozhinovski
SOLUTION - My dockerfile was upgrading the helmet to 4.0.0, which is showing the problem. As a solution, I changed the dockerfile and informed the helmet and espress versions. Example: RUN cd /srv/opmet/ && npm init -y && npm install --save --no-progress [email protected] [email protected] — Jefferson Cardoso

granty granty · Accepted Answer · 2020-11-16T19:36:26

Unfortunately the solution in the comments:

SOLUTION - My dockerfile was upgrading the helmet to 4.0.0, which is showing the problem. As a solution, I changed the dockerfile and informed the helmet and espress versions. Example: RUN cd /srv/opmet/ && npm init -y && npm install --save --no-progress [email protected] [email protected]

is not perfect. You just swipe rubbish under the carpet, but the rake is still there, and you will step on these sooner or later. And it's not helmet/express issue, it's just RTFM.

Crux of the matter is that helmet 3 disable CSP by default, but Helmet 4 enables it by default for additional security. So after migrate to helmet 4 you have CSP enabled by default.
You definitely have an inline script in the index.html:

<script>
if (global === undefined) {
var global = window;
}
</script>

that's why you have CSP violation in script-src.
Also you have CSP violation in the font-src directive because of:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

Right solution is:

either disable the CSP header in helmet (will works in any versions):
app.use(helmet({
contentSecurityPolicy: false,
}));
either to craft a Content Security Policy for more security your app.

Error no angular: "Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'"

2 Answers