Add docs regarding .progress, inline style attrs, and CSP #18080
+5
−0
2 participants
Closed
Progress Bars violate CSP style-src directive unless directive has 'unsafe-inline' in it #17785
patrickhlauke
commented on an outdated diff
docs/_includes/components/progress-bars.html
| @@ -8,6 +8,11 @@ <h1 id="progress" class="page-header">Progress bars</h1> | ||
| <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p> | ||
| </div> | ||
| + <div class="bs-callout bs-callout-info"> | ||
| + <h4 id="callout-progress-csp">Content Security Policy (CSP) compatibility</h4> | ||
| + <p>If your website has a <a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP">Content Security Policy (CSP)</a> which doesn't allow <code>style-src 'unsafe-inline'</code>, then you won't be able to use inline <code>style</code> attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript or using custom CSS classes.</p> |
|
maybe
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
|
@patrickhlauke Added a little bit to the JS phrasing.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Closes #17785.
CC: @mdo @patrickhlauke