'Angular application throwing "inline style..." error due to CSP response header configured on server
I am working on an angular application.I am working in angular 8 application with CLI.My application is running on local server without any failure.
On deploying the code to prod server(build using ng build --prod) I am getting the below errors , as you can see in below screen shot:
I know this error is due to CSP response header implemented on server side, which is preventing inline css(you can see the CSP header value in below screen shot set on response header on server):
I know If I update the CSP header with 'unsafe-inline' for style-src value, above errors will be fixed.
Other workaround(without updating the CSP header) is that not using styleUrls or styles property in component metadata as in below example(styleUrls is commented):
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
// styleUrls: ['./app.component.scss']
})
I just want to know, I have not used any inline CSS then why I am getting these errors?
Solution 1:[1]
It could be that Angular inject inline styles in the background due to Encapsulation.
That can be causing that issue, despite you are not using inline styles.
Solution 2:[2]
Had similar problem when working with Angular and Chrome extensions. In my case I had to set up 2 things for either scripts or styles:
SCRIPTS: Build the project with subresource-integrity option in order to have all scripts with hash: Angular subresource integrity
ng build --subresource-integrity
CSS ( your case ): Disable Inline Critical CSS in angular.json: Disable Inline Critical CSS
"inlineCritical": false
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Eimard |
| Solution 2 | fuegonju |