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

As it seems, Bootstrap v4 is now using “data:image/svg+xml” background-urls which leads to errors when using a Content-Security-Policy like default-src 'self'; form-action 'self'; frame-ancestors 'self'; require-sri-for script style. In order to be able to migrate from Bootstrap v3 to Bootstrap v4 one would have to weaken the Content-Security-Policy protection.

IMHO that’s a regression.

[philwolstenholme]

Hi @meteorplus, the maintainers of Bootstrap and other open-source projects put a huge amount of their own time and mental energy into providing an amazing product for absolutely no cost to users like you and I, that’s the complete opposite of lazy.

Please don’t use such language on open-source projects; think how harder your life (and all of our lives at work) would be if all the open-source maintainers of the world got burnt out and said “that’s it, our time and energy clearly isn’t being respected, we’ll stop maintaining our projects and remove them from Github”.

It looks like some workarounds have already been posted in this thread, have you tried any of them? People will help if you have tried them and run into specific issues, but if you haven’t tried them yet and are just waiting for the Bootstrap team to deliver a fully formed solution on your timescale while also working on the 270 other open Bootstrap issues on Github then that sounds a bit lazy in itself.

[9mido]

For anybody who wants to see the results of that documentation PR here is the online version:

https://getbootstrap.com/docs/5.0/customize/overview/#csps-and-embedded-svgs

@mdo @XhmikosR and @ffoodd

What I am confused with this documentation PR is that there is no reference to URLs that you can plug into your CSP configurations or where in the CSP configurations to put them. You are just linking to the code documentation page for each element?

I was hoping bootstrap could provide something like this:

https://content-security-policy.com/examples/

https://stripe.com/docs/security/guide#content-security-policy

https://developers.google.com/recaptcha/docs/faq#im-using-content-security-policy-csp-on-my-website.-how-can-i-configure-it-to-work-with-recaptcha

Using URLs and plugging them in is much easier than locally hosted assets, inline images, etc.

I wouldn’t know where to begin on where to actually download the images/svgs from and then figure out where to put them locally and then how to reference them in my code. There is no guidance for that.