CODEWITHSUNDEEP
javascriptangularsecuritycontent-security-policy
Aedvald Tseh
Aedvald Tseh

Reputation: 1917

Angular: avoid inline javascript

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 ?

Upvotes: 1

Views: 2477

Answers (2)

plex4r
plex4r

Reputation: 363

Aedvald Tseh's answer did help me so thanks for that. However, I found that the following finer-grained configuration also corrects this error but allows for some of the production optimization:

              "optimization": {
              "scripts": true,
              "styles": {
                "minify": true,
                "inlineCritical": false
              },
              "fonts": true
            },

For info see the Angular documentation: Angular doc on optimization

Upvotes: 0

Aedvald Tseh
Aedvald Tseh

Reputation: 1917

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

Upvotes: 3

Related Questions