🐛 Bug Report: Widget does not support safe CSP 2/3 Policies #8914
Description
📜 Description
The problem
Various certifications and security recommendations indicate that using a CSP of "unsafe-inline" is considered bad practice. For instance MDN says "Disallowing inline styles and inline scripts is one of the biggest security wins CSP provides".
This now leads to the problem that we cannot implement our desired CSP policies due to using the novu notification inbox. This uses style attributes quite extensively as shown below and style attributes are the worst case as the only alternative is using unsafe-hashes, which is not maintainable as we don't know all possible style tags beforehand. So right now the only option is using style-src: 'unsafe-inline' when using the novu inbox component.
The ways forward
There are basically 2 approaches:
- Ideally, the styles would be delivered in separate css files which can be loaded from the backend but I understand this might make distribution more difficult
- Having the styles in separate <style> tags instead of as attributes would make it possible to inject nonces for anyone using the widget also solving the problem.
👟 Reproduction steps
- Inspect code of the widget
- See that style attributes are used all over the place
👍 Expected behavior
It should be possible to integrate the novu inbox component using CSP style-src policies other than 'unsafe-inline'.
👎 Actual Behavior with Screenshots
Trying to implement a style-src policy other than 'unsafe-inline' leads to a browser error such as:
Refused to apply inline style because it violates the following Content Security Policy directive: [....]
Novu version
Novu SaaS and self-host
npm version
No response
node version
No response
📃 Provide any additional context for the Bug.
No response
👀 Have you spent some time to check if this bug has been raised before?
- I checked and didn't find a similar issue
🏢 Have you read the Contributing Guidelines?
- I have read the Contributing Guidelines
Are you willing to submit PR?
None