NGX-Charts does not seem to support Content-Security-Policies with nonces properly

[Christiaan Verwijs]

I recently upgraded our web projects to use strict Content Security Policies. This includes the use of nonces both for scripts and stylesheets. Unfortunately, this breaks the ngx-charts module. Instead of nice line graphs, it just renders a black block and throws a CSP error:

How to replicate

This issue can be replicated by:

1. Configure the web server to return a Content-Security-Policy header like this: "default-src 'self'; frame-ancestors 'self'; form-action 'self'; script-src 'self' 'nonce-[nonce]'; style-src 'self' 'nonce-[nonce]'"
2. Configure the Angular project to use nonces. Add "ngcspnonce=[nonce]" to
3. Generate a random nonce on the server and inject it both in the header and in the index.html. I use NGINX to set the header and replace a dynamic nonce tag in the index.html (sub_filter NGINX-CSP-NONCE $request_id).

Why is this a problem?

The issue here is the inline styling of ngx-charts elements. Inline styling is a security risk, and should ideally be blocked by CSPs. Unfortunately, it is not possible to use the hash approach ("sha256-[somehash]") as nonces can't be used in conjunction with hashes. The hash also always seems to be different for the styling generated by ngx-charts. Moreover, nonces are probably the safest approach to restrict what styles can be applied.

Potential resolution

Angular supports CSP nonces from version 16 and onward. So I suspect that upgrading Angular to 16 would work. Alternatively, a user should be able to pass the dynamic nonce to the ngx-charts image, where it is used to decorate styles and scripts with it to allow them to run.