Angular: avoid inline javascript

Issue

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 ?

Solution

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

Answered By – Aedvald Tseh

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.