Is there an alternative to inline-styles that is compatible with Content Security Policies?

[mickey-barron]

Hi all, I started writing a bug report, but realized this issue is likely not a bug, but I am going to include the same information here to start to hopefully provide any necessary context:

Steps to Reproduce:

1. add @finos/perspective, @finos/perspective-viewer, and @finos/perspective-viewer-datagrid to a page
2. add a content security policy (CSP), specifically with "style-src 'self'"
3. open the page in browser

Expected Result:

Display the data grid viewer appropriately.

Actual Result:

The browser refuses to apply inline styles, resulting in the perspective-viewer not displaying
When adding the hashes for some inline styles, the viewer displays correctly, but interaction does not work due to the dynamic inline style values

Environment:

Windows 11
Tried in FireFox 119.0 and Chrome 120.0.6099.5

Additional Context:

So, as I was attempting to fix this issue by adding specific hashes, I noticed that it seemed like there just kept being more and more hashes. Upon further inspection, I noticed the inline styles were quite dynamic, controlling most of the reactions to user input, which explained the never ending addition of hashes. After going in circles a bit more trying to identify a solution on my own, I figured I'd reach out here to see if anyone can provide some insight - I don't want to add unsafe-inline to my CSP, but I haven't come across an alternative that would work. Ultimately, I am wondering is there a way to use the perspective-viewer without needing to allow unsafe-inline as part of the CSP? Thank you for any help you can provide!

[texodus]

This can't be done externally, @finos/perspective-viewer (and a few others) would need to be updated. It is a moderate amount of labor.

I am interested in hearing what benefit there is to implementing this specific policy in your situation. Considering the other CSP policies you must allow to even load WebAssembly (e.g. unsafe-eval), I'm not clear what the goal is in disallowing style-src 'unsafe-inline' specifically.