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

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.

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.

@cramhead Could you please stop spamming this issue with non-related content.

Furthermore… of course there is the possibility to relax the CSP and thus work around this issue. This issue is here because you would have to do that to be able to migrate from bootstrap v3 to bootstrap v4. That’s exactly the regression this very issue is about - as can be seen in the second sentence of the issue text which reads “In order to be able to migrate from Bootstrap v3 to Bootstrap v4 one would have to weaken the Content-Security-Policy protection.” As you may know, allowing “data:” URLs is considered insecure, as can be read over at Mozilla for example:

data: Allows data: URIs to be used as a content source. This is insecure; an attacker can also inject arbitrary data: URIs. Use this sparingly and definitely not for scripts.

@mdo “We’ll try to tackle this as part of v5”. Amazing answer 👎 is BS3 vulnerable ? no rush to upgrade() : migrate to BS4() Then you realize that BS4 breaks CSP.

Note that we don’t use one SVG, so this isn’t only about the navbar toggler icon.

It’s probably where most people building sites using bootstrap will run into this though since there are a lot of sites using navbars that are accessed from mobile devices.

Your best bet is to relax CSP allowing data: for now.

“Make your site insecure for an undetermined amount of time” - I can understand that doing a whole release for this issue is too big a task, but Bootstrap 5 could be several years away, and asking people to make their sites insecure is quite a big ask. I was hoping for a workaround in the interim, @mdo’s suggestion sounded ideal. I don’t agree that making my site insecure is a good idea.

Just tried the v5 alpha and this issue still persists. It is even worse now since practically everything is an svg element. Please bootstrap team fix this issue when the main bootstrap 5 is released!

Dude there are at least 10 embeded svg in the bootstrap css not only hamburgar and left right chevrons

I have not found any reason that it is actually a problem to include data: only in your img-src policy to allow this. But obviously don’t allow it in script-src or default-src. See https://security.stackexchange.com/a/167244

The rendering issue looks like it might be a Chrome devtools bug, I have checked using a responsive design testing browser extension and all device sizes render correctly. I was also able to extract the bootstrap svg and use it instead of the octicon svg.

Here are the steps I took to get the toggler rendering without the CSP error:

1. Download the bootstrap hamburger svg using devtools
2. Add the svg to the HTML

<span class="hamburger" 
      data-toggle="tooltip"
      data-delay="<%= tooltipDelayMs %>"
      data-placement="bottom"
      title="Menu">
  <%- include('../icons/hamburger.svg') %>
</span>

1. Add css

.hamburger {
  display: inline-block;
  height: 1.5em;
  vertical-align: middle;
  width: 1.5em;
}

After going back and forth with the team on this, we’re most likely sticking with the embedded SVGs in v4 and in v5. We can’t use SVGs in the HTML for things like our checkboxes, radios, and selects, so we’d have two different implementations for how we handle SVGs across the project (embedded CSS and inline HTML). It’d also be a larger departure from v4 than I’m willing to make just yet. v6 could be where we really overhaul some of this stuff though and make some different leaps.

Providing documentation on how to replace the images is definitely doable though. I’ll stub out a PR shortly for that, along with guidance on what SVGs are included (most are from Bootstrap Icons, so they’re easy to replace with external images).

Beyond that, anything else I’m missing?

@XhmikosR Thanks for you help.

Your clarification got to make a separate minimal example. It turns out that asp.net core’s mvc taghelper is injecting the code and violating the content security policy. It’s part of the failover infrastructure to check if the script was correctly loaded and if not download the script from a secondary source. I was not aware of this problem, but apparently others were; https://github.com/aspnet/Mvc/issues/4300.

Also @yahesh I bumped into this issue as well. It turns out if you use specify the data: schema in your policy it will stop complaining Note the data: in the img-src below. The content security policy works with the code snippets defined on getbootstrap intro

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://code.jquery.com https://cdnjs.cloudflare.com https://maxcdn.bootstrapcdn.com; style-src 'self' https://maxcdn.bootstrapcdn.com data:; img-src 'self' data:;">

You do realize that I’m referring to the snippets that others use to work with the bootstrap library. Correct?

We have open issues and PR about using inlined SVG (in the markup) instead of embedded in CSS. v5 is in it’s first alpha, there’ll be more breaking changes until a first stable release so please wait — or contribute.

But this issue is definetely in our v5 roadmap.

I believe svg images can be embedded in the css as encoded data as well. So if they are done that way instead of injected a src attribute, that should satisfy the CSP should it not?

At least it is worth a try. 😃

What would really help me (with v4 as well as with v5 if it is still a problem there) is a description on how to circumvent the CSP issues created by the “data:image/svg+xml” URLs. I’m fine with adding custom HTML and putting required images into an upload folder as long as I know what to do and how that custom HTML should look like.

If there were a resource where I could search for CSS classes that I should not use when using strict CSP rules and what custom HTML to use instead, this would definitely help to switch from Bootstrap v3 (which I’m still using because of this problem here) to Bootstrap v4 or directly to Bootstrap v5 if it’s not too far down the road.

P.S.: Thinking of background-urls, maybe it’s possible provide the images and maybe it’s possible to overwrite the Bootstrap-provided attributes through custom CSS containing !important flags and a URL to the corresponding image file. If this were enough to get rid of the CSP browser errors, I’d be fine with that as well.

Any update on the issue? I’m currently creating a CSP and the workaround is not ideal.

For people building Bootstrap from the source (rather than including the compiled CSS and minified JS) you could use https://www.npmjs.com/package/patch-package to edit (then subsequently patch on each install) the Bootstrap source to remove the data URIs and include the SVGs in an alternative way that will satisfy your CSP requirements.

@XhmikosR: What do you mean? That you don’t have inline scripting disabled? It seems there are no content security policies defined getBootstrap csp headers

When using the snippets on the getbootstrap intro page I get a content security policy error.

There error in Firefox includes a line number, unfortunately Chrome does not. The error is Content Security Policy: The page’s settings observed the loading of a resource at self (“script-src http://localhost:5000 https://maxcdn.bootstrapcdn.com https://cdnjs.cloudflare.com https://code.jquery.com”). A CSP report is being sent. Source: !function(a,b,c,d){var e,f=document,g=f..... Home:10

When look the html source in firefox I can see the new meta tag added that raises the issue Moving over to the right a bit I can see that is an inline injection from bootstrap

To remove the error I have to allow unsafe inlining of JavaScript