Bootstrap's recommended implementation of progress bars violates CSP
The recommended implementation of progress bars in bootstrap requires inline styling: https://getbootstrap.com/docs/5.3/components/progress/#how-it-works
This violates our CSP, as we do not allow inline styling.
This has been brought up to the devs, and they basically said "wontfix, just use JavaScript": https://github.com/twbs/bootstrap/issues/17785
Now to the actual problem at hand: The progress bar in the statistics widget is currently broken on Chrome and I don't know how to fix it. There are a couple of options:
- 'unsafe-inline'. I imagine we don't want that.
- Use JavaScript to set the width directly. I'm not sure where the best place to put that JavaScript is, and while we do have
unsafe-inline
set for scripts, we probably want to move away from that. - Use a "gnarly hack" (cvrebert, 2015) where we make css classes for every width from 0 to 100. This is actually what the 3rd party bootstrap-hacks module does to address this exact issue.
- Not use progress bars, I guess
I also looked at nonces and hashes but that didn't yield any satisfying result. Nonces looked promising but they don't work for <div style="...">
type inline styling, only for <style>
blocks, which is not an option in this case as far as I can tell because this is a dynamically loaded widget and <style>
tags need to be in the <head>
section. Hashes would still require the unsafe-hashes
directive, which is probably better than unsafe-inline
, but it doesn't feel great.