Progress Bars violate CSP style-src directive unless directive has 'unsafe-inline' in it

[nchelluri]

I see this in the docs for v3.3.5 but I'm using an older 3.x version and see the behavior in my application.

From the docs: http://getbootstrap.com/components/#progress

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

That last attribute, the inline style, causes a CSP violation for me (and I assume anyone else using an effective CSP policy, since 'unsafe-inline' is considered, well, unsafe).

A bit of searching helped me find an existing workaround for this issue: https://github.com/danielnixon/bootstrap-hacks/blob/master/progressbar.css

One thing to note is that I had to do a round on my percent values in order to make the bootstrap-hacks package work properly (e.g. aria-valuenow="50.0" doesn't work but aria-valuenow="50" does).

[cvrebert]

That hack (add 100 declarations, one for each percentage point) is pretty gnarly; probably too gnarly for us to pursue.
attr() would be the obvious way to address this, but its browser support seems pretty lacking (https://developer.mozilla.org/en-US/docs/Web/CSS/attr#Browser_compatibility , Fyrd/caniuse#1209). So this might be a WontFix situation.
CC: @mdo

[nchelluri]

An option a co-worker suggested to me ( @RobertWHurst ) was to put the style code into JS.

[patrickhlauke]

As JS is needed anyway to make the progress bar actually work, this may be an option. My preference for v4 would be to use actual <progress> in the markup, styled as much as possible with CSS, and then gently polyfill it (replacing it with a styled <div> with relevant aria-* attributes in browsers that don't natively support <progress>)

[mdo]

So this might be a WontFix situation.

I'm in favor of that.

then gently polyfill it (replacing it with a styled

with relevant aria-* attributes in browsers that don't natively support )

Woof, sounds like a lot of overhead for not a lot of gain.

[cvrebert]

I propose documenting this and deeming it WontFix: #18080.

As JS is needed anyway to make the progress bar actually work

Eh, not really, IMHO. Progress bars that are only updated on page load are a thing.
E.g. "[progress bar goes here] You are 75% done answering this survey. Here's the next set of questions:"

[stgogm]

If you set the element's width through JavaScript it wont violate the CSP policy:

element.style.width = '30%';