Angular: avoid inline javascript

user_3451919 0
Viewed 191

I'm in charge of building an application with Angular 12.0.5. Our developing guidelines states that we are not allowed to use inline javascript and that we have to use a Content Security Policy that prevents inline javascript. Therefore I added this to my Index.html:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'unsafe-inline' 'self';script-src 'self';">

This works nicely as long I work with node dev-server which I start with npm start.

But when I build this website with ng build and deploy it to the productive web server I see this error in my developer console and my application stops working:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' …

This error disappears when I remove the CSP.

Any idea how I can make this work without removing the CSP ?

content-security-policy angular security javascript
1 Answers

When building the web application Angular bundles and minimises JavaScript and it introduces inline JavaScript to save space.

Luckily, it is possible how the web application is built can be configured in angular.json in "projects"/"architect"/"configurations". You can avoid inline JavaScript by changing the production-configuration to this:

"production": {
  "buildOptimizer": true,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": true,
  "sourceMap": true,
  "namedChunks": true,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "outputHashing": "all"
},

In fact the "optimization": false turns off the generation of Inline Javascript.

Read this to learn more about how Angular does bundling

user_34519190
Related