I'm developing an enterprise application using Angular 6 with Angular Material 6.
Now I have to build the project for a new customer that have very strict CSP, that is just
Content-Security-Policy: "default-src 'self';"
The policy cannot be modified.
I searched for previous answers but only came with the fact of moving my components styles from stylesUrls to the styles property in the angular.json. But even doing so, I still have many errors
Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
I noticed that when the application starts a lot of < style > tags are added to the head of the page by the compiler, and I think that this is the reason of those repeated errors.
The meta tag for the Content-Security-Policy is added by me and its only use is to simulate the services response header.
Is there a way to avoid this behaviour? To build all the css in one single file and add it as a < link > tag when the application is loaded?
EDIT:
I found a way to get this working by removing all the stylesUrl from the components and by importing the components stylesheet into the main style.scss. Then I manually copied everything that was into those style tags into a a css file. Finally I simply linked this css file in my index.html.
The errors in the console have still remained but the application is working correctly.