Angular: avoid inline javascript-CodePudding

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 ?

CodePudding user response：

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