f3oall / awesome-notifications

Lightweight JavaScript Notifications Library
https://f3oall.github.io/awesome-notifications/
MIT License
286 stars 40 forks source link

Inline styles are not compatible with CSP #49

Open rassie opened 3 years ago

rassie commented 3 years ago

Describe the bug With CSP (Content Security Policy) enabled, inline styles are blocked, which leads to progress bars not working. Incompatibility with CSP is bad in general and worse in environments like Electron, which strongly recommend enabling CSP. While it's possible to enable unsafe-inline as a workaround, this is strongly discouraged.

To Reproduce

  1. Add CSP headers to a project with awesome-notifications
  2. Observe warnings and errors in the browser console

Expected behavior No CSP errors or warnings should be displayed.

Additional context This problem can apparently be solved by changing styles dynamically instead of generating those inside an HTML element. See https://stackoverflow.com/a/57633457/6460 for details and an example.