Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

75
Views
Angular 12 CSS optimization inline event handler with Content Security Policy

After upgrading to Angular 12 my Content Security Policy blocks styles from loading correctly.

The Angular 12 devkit seems to add a new inline event handler to the CSS bundle reference in index.html, example below.

<link rel="stylesheet" href="styles.5951e4ca367b697db091.css" crossorigin="anonymous" integrity="sha384-2031E8+oC87S0N7NzRGcF8fqx777KEJOgQ3KcUN4aX6xsR3BVaV5sh4fibR5joOc" media="print" onload="this.media='all'">

Error

Refused to execute inline event handler because it violates the following Content Security Policy directive...

This seems to be related to this RFC: https://github.com/angular/angular-cli/issues/18730 but I can't find any more information about how to use it with a strict (no 'unsafe-inline') CSP.

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

I had the same problem after Angular 12 upgrade.

The solution for me was to set the workspace option optimization "inlineCritical" to false. The inlineCritical option was changed in Angular 12 to default true to improve First Contentful Paint, see https://angular.io/guide/workspace-config#styles-optimization-options

here is an example workspace configuration

"project": {
  "architect": {
    "build": {
      "configurations": {
        "production": {
          "optimization": {
            "scripts": true,
            "styles": {
              "minify": true,
              "inlineCritical": false
            },
            "fonts": true
          }
        }
      }
    }
  }
},
over 4 years ago · Santiago Trujillo Report

0

ATTENTION! Answer updated

UPDATED ANSWER (July 16th 2021)

The original solution posted below breaks Safari (MacOS) so we had to rollback and disable optimization.styles.inlineCritical.

Also, as commented by masterfloda below, the choice should be security over performance in most if not all cases. My original thinking was that it would be difficult to exploit (unsafe-hashes), but I have not done a thorough InfoSec risk scoring on that.

There is a ticket open for this on the Angular repo - #20864. I suggest you disable optimization.styles.inlineCritical for now and like and subscribe to that issue.


ORIGINAL ANSWER (June 9th 2021)

Yes, this issue was introduced by Angular v12's Styles optimization options (inlineCritical: true) which adds an onload event handler to the link tag for the main stylesheet as follows:

<link rel="stylesheet" href="styles.<hash>.css" media="all" onload="this.media='all'">

It can be solved without disabling inlineCritical or enabling 'unsafe-inline' in the CSP, as follows:

  • Hash the contents of the onload handler: this.media='all'
  • Report URI has a handy tool for that: Script And Style Hasher
  • Add the hash to the script-src directive in the CSP
  • For Chrome (but not for FF), you also need to add 'unsafe-hashes' to the script-src directive, otherwise it blocks with the following log in the console: Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!