Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add mention of CSPs and SVGs #32759

Merged
merged 2 commits into from
Jan 13, 2021
Merged

Add mention of CSPs and SVGs #32759

merged 2 commits into from
Jan 13, 2021

Conversation

mdo
Copy link
Member

@mdo mdo commented Jan 11, 2021

Aims to fix #25394. Unsure of the best place to put this, and if there needs to be additional guidance around the messaging.

Copy link

@mjgs mjgs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it describes the options, and there’s a link to the discussion thread. Looks good to me, glad to see this got documented.

Will the actual issue get fixed in the next version?

@mdo
Copy link
Member Author

mdo commented Jan 12, 2021

Will the actual issue get fixed in the next version?

As mentioned in the referenced issue, we've actually doubled down on SVGs in background-images due to custom forms and form validation. 😬

@mjgs
Copy link

mjgs commented Jan 12, 2021

we've actually doubled down on SVGs in background-images due to custom forms and form validation

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" >}})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only thing I don't like is having to remember to update this list, which I'm pretty sure we'll forget...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add a new issue for this, won't be able to tacklme this any time soon.

Copy link

@gladiola gladiola left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Glad to see that twbs is moving to provide this guidance. This could really go a long way to helping support the use of CSPs on sites which use Bootstrap. Thanks for your consideration and efforts.

@knoobie
Copy link

knoobie commented Jan 12, 2021

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 XhmikosR merged commit 80c0d4d into main Jan 13, 2021
@XhmikosR XhmikosR deleted the csp-docs branch January 13, 2021 22:15
@XhmikosR
Copy link
Member

@mdo this needs to be backported manually

XhmikosR pushed a commit that referenced this pull request Jan 19, 2021
Mention CSP and embedded SVGs in v4 docs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bootstrap v4 breaks Content-Security-Policy compared to Bootstrap v3
6 participants