Add mention of CSPs and SVGs #32759
Add mention of CSPs and SVGs #32759
Conversation
As mentioned in the referenced issue, we've actually doubled down on SVGs in |
Just want to make sure I understood correctly...so the official way to use the icons with CSP is to have the images locally and use the background-image property in CSS? |
|
|
||
| Several Bootstrap components include embedded SVGs in our CSS to style components consistently and easily across browsers and devices. **For organizations with more strict <abbr title="Content Security Policy">CSP</abbr> configurations**, we've documented all instances of our embedded SVGs (all of which are applied via `background-image`) so you can more thoroughly review your options. | ||
|
|
||
| - [Accordion]({{< docsref "/components/accordion" >}}) |
There was a problem hiding this comment.
The only thing I don't like is having to remember to update this list, which I'm pretty sure we'll forget...
There was a problem hiding this comment.
Could we make some shortcode to make it dynamic? Regexing SVG Data URi shouldn't be that hard. Ideally we'd get the corresponding file name to output, not sure is this is doable.
There was a problem hiding this comment.
Feel free to take a stab at a shortcode, I'm unsure how easy it'll be and also how much it will slow the build down.
There was a problem hiding this comment.
I'll add a new issue for this, won't be able to tacklme this any time soon.
|
Just asking: How about moving all background-image variables, which contains svg, in a separate file like "icons.sass" to allow for easier replacement in custom builds with custom background images? This would allow for easier discoverability and maintenance because all variables are in a separate file and don't need a lot of redundant documentation? |
XhmikosR
moved this from Cherry-picked/Manually backported
to Needs manual backport
in v4.6.0
|
@mdo this needs to be backported manually |
Aims to fix #25394. Unsure of the best place to put this, and if there needs to be additional guidance around the messaging.