IgcGrid - it will cause content security policy violations with a strict "style-src" policy

[jsakamotoIGJP]

Description

The "IgcGrid" component is not so friendly with a strict content security policy about style-src.

Steps to reproduce

1. Implement a web client app that uses the "IgcGrid" component. Make all CSS files of Ignite UI included from the "index.html", not imported from JavaScript files.
2. Apply a content security policy below to that client web app.
   • default-src 'self';
   • style-src 'self' https://fonts.googleapis.com;
   • font-src 'self' https://fonts.gstatic.com;
   • script-src 'self' 'unsafe-eval'

One of the way to do that, add a meta element in the head of the index.html, like below:

<meta
  http-equiv="content-security-policy"
  content="default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; script-src 'self' 'unsafe-eval'"
/>

3. Run that client web app on a web browser.

Result

You will see the error messages about the content security policy violations, particularly style-src, in the browser console, like below.

error --------| Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com". Either the 'unsafe-inline' keyword, a hash ('sha256-biLFinpqYMtWHmXfkA1BPeCY0/fNt46SAZ+BBk5YUog='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Expected result

It should be better that everything runs without errors, even with that strict content security policy, I explained above.

Attachments

📦igc-grid-and-csp.zip

1. Download and extract the zip file attached above.
2. Execute npm ci and npm start commands.
3. Then, you will see that your web browser will open the client web app, and you can find errors about content security policy violations in the browser console.

Remarks & Workarounds

I can avoid these content security policy violations by adding the 'unsafe-hash' and many sha256 hash values corresponding to each inline style for the style-src policy.

However, when the "IgcGrid" component has a paginator or bodyTemplate, it will add inline style with random strings, like below, so adding those sha256 hash values can not solve this case.

<style>[_nghost-ng-c1526679628]{display:none}</style>

Eventually, I can avoid the errors by adding the 'unsafe-inline', but it is not desirable because it is not a strict policy.