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?

Answer 1

I have same error and i fix it. Problem was in dict. I have project folder in dict folder (dict/name-proj/) when i change in "angular.json" "outputPath": "dist/projectName" to "outputPath": "dist" This solved the problem for me

Answer 2

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.

Answer 3

The solution worked for me

app.use(helmet({
   contentSecurityPolicy: false,
}));

As well as a CSP in my index.html (from MSN docs)

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; img-src https://*; child-src 'none';">