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

[yahesh]

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.

[mdo]

Hmm, interesting—hadn't considered this at all with the embedded SVGs. I suppose the easiest path forward for this is documenting a way to swag our navbar toggler for a custom one.

[ogonkov]

Also, inline SVG put aside document parsing (more CSS to parse === more time document wait for it to be loaded)

I think it's better to inline them on project bundling via Grunt or Webpack (if you really want less http requests but bigger CSS bundle)

[cramhead]

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

[XhmikosR]

@cramhead: definitely not something we have on the site.

[cramhead]

@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

[XhmikosR]

There's no CSP for our site. Also, we don't have any inline snippets in the
main page.

On Fri, Mar 16, 2018, 22:14 Marc [e-mail] wrote:

@XhmikosR https://github.com/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
https://cspvalidator.org/#url=http://getbootstrap.com/docs/4.0/getting-started/introduction/

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/25394#issuecomment-373831369,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVVtZTEBIaiTxEixU6oQdN2z9hx7qTRks5tfB0dgaJpZM4RmDER
.

[cramhead]

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

[XhmikosR]

I do, and I don't see why you say you get that with our snippet when
clearly the error message you posted mentions something inlined which we
don't do. So it's something else; Unrelated to this issue or even bootstrap
itself. But if you still believe it's something on our side make a separate
issue.

On Mar 16, 2018 22:27, "Marc" [e-mail] wrote:

You do realize that I'm referring to the snippets that others use to work
with the bootstrap library. Correct?
[image: image]
https://user-images.githubusercontent.com/386035/37542995-64b90ed0-291d-11e8-88e3-8bab3c2e8f24.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/25394#issuecomment-373834770,
or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAVVtdqwI5XIkv92Yxbn5RpiwELOwi8Hks5tfCAugaJpZM4RmDER
.

[cramhead]

@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
html <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:;">

[yahesh]

@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 when we get to that and can make breaking changes to our components to move the background images from base64 to in-HTML elements.

[mjgs]

@mdo Bootstrap v5 seems like it could be a long way off. You mentioned earlier in the thread that a good workaround might be to replace the navbar toggler icon with a custom one. I tried doing this but the alignment was all messed up on small screens, could you share the documentation you had in mind, so those of us trying to implement CSP can get something functional and secure setup?

[ogonkov]

Could it be fixed with file-loader?

[XhmikosR]

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

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

[mjgs]

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.

[XhmikosR]

Unfortunately, that's how it is. We can't introduce potentially breaking changes right now.

v5 is the next major version and work has already started in the v4-without-jquery branch.

[mjgs]

@xhmikosr in your opinion is the custom navbar toggler icon workaround
possible?

On Tue, 4 Dec 2018 at 13:37, XhmikosR [e-mail] wrote:

Unfortunately, that's how it is. We can't introduce potentially breaking
changes right now.

v5 is the next major version and work has already started in the
v4-without-jquery branch.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/25394#issuecomment-443987750,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB07z-lb3MHn_p_iEzynhmUE0_h-AInNks5u1hgcgaJpZM4RmDER
.

[XhmikosR]

Yeah, but like I said there are a lot more cases we use CSS-inlined SVGs, so I'm not sure if changing the toggler icon alone will be enough. I usually use purgecss in my build process so it's enough for me.

[mjgs]

It will at least be enough for fixing the navbar toggler csp issue. Using the octicon hamburger icon...

When I swap out

<span class="navbar-toggler-icon"></span>

for

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

The toggler renders fine in the browser and without a CSP error, although it looks a little different (slightly smaller), but the main problem is that when viewed in Chrome devtools device tool, it's set in from the right side for most phone sized devices.

How do I get it to render correctly on all screens?

[emiranda04]

@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.

[philwolstenholme]

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.

[emiranda04]

Thanks for this info! I will look into it :-)

[mjgs]

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>

3) Add css

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

[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.

[Grinnz]

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

[KennyStier]

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

[rhalf]

i am also creating a new project using bootstrap 4 as aid for my design. bootstrap 4 has problem with csp. should i revert back to bootstrap 3?

[crustamet]

There are so many inline SVG (custom checkbox, radios), toggler, carousel NEXT PREV buttons.

There is a workaround very hard to do that removes those background images and just creates the image using css but this is not going to be good for the designs, because some times 1px left or 1px right on different browser breaks the design :(

[mdo]

Know this is still an issue for some folks, so I think there are two things we can do in a v4 patch release to help:

• Provide known options for CSS-only images to replace our embedded SVGs (navbar and carousel only I'm afraid). See this CodePen demo.

• Update our docs to callout the CSP issue with links to MDN, StackExchange answers, etc for the known issues and relatively safe usage of embedded SVGs in CSS.

Thoughts on what else to include?

[crustamet]

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

[x5engine]

so how can we get rid of those svg?

[crustamet]

Very hard to do so :) in some cases it is enough to change the html and not use bootstrap like chevron and hamburgar

other times you have to fight the css with the browser to align an not embeded icon into place.

Other times is enough just to change the css with a fontawsome icon xD

[mdo]

I don't know what you're telling me how many there are or giving some attitude here—I'm the one that added them. 😆

I'm asking as the creator of the project what folks think is the best option in v4 to help folks out. I've shown that it's only really feasible to replace a handful of the icons—custom form controls and form validation styles aren't an option to change due to backward compatibility. And they're not really changeable in v5 either fwiw—there's only so much we can do to customize the appearance of things without requiring custom HTML or other hacks.

[yahesh]

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.

[mdo]

Thanks for the feedback @yahesh! One question:

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.

Are you suggesting that replacing the image URLs with your own is enough to ease the problems here?

[yahesh]

At least it is worth a try. :)

[nickalbrecht]

I saw the other day that the v5 alpha1 is out. Is this item still on the radar for v5?

[9mido]

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!

[xi]

Are you suggesting that replacing the image URLs with your own is enough to ease the problems here?

The workaround I currently use includes extracting the relevant images and adding additional CSS to use those image files:

.navbar-dark .navbar-toggler-icon {
    background-image: url("images/bootstrap/hamburger.svg");
}

This way I still get the warnings, but the images can be loaded without relaxing the CSP.

I can think of two things that would help with this approach:

• A complete list of selectors/images (e.g. as a CSS file in which I only have to adapt the upload location)
• A folder containing all images so I do not have to extract them manually.

[nickalbrecht]

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?

[yahesh]

This way I still get the warnings [...]

IMHO getting CSP warnings is not an option.

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?

It should be tested before being released.

It's really worrisome that CSP seemingly isn't taken into account again. This issue here exists now for 2,5 years. Noone who is serious about implementing proper CSP policies was able to migrate from v3 to v4 (me included). Not being able to finally migrate to v5 again would mean that I would have to find a different framework that takes security best-practices into consideration during development which Bootstrap seemingly does not do.

[ffoodd]

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.

[yahesh]

@ffoodd Thanks for clarification.

[crustamet]

Inline SVG would do it, i don't know why they don't implement this already ? if they have a hamburger or other svg inlines they should reallly create some files that can be replaced by other icons also.

[xi]

@ffoodd I would be happy to contribute. Can you link the PR you mentioned? I could not find it.

[ffoodd]

There's no dedicated PR AFAIK, but multiple discussions on related issues and PR. You may start a dedicated PR if you want, just take some time to search and read comments here and there about inline SVGs.

[mdo]

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?

[nickalbrecht]

Maybe I'm misunderstanding. Wasn't the problem that enforcing a reasonable CSP policy of 'self', broke any element that uses inline style, inline script, or embedded images (data:) in the HTML. But that using Embedded images in the CSS itself was fine (since you can use SRI to trust the Bootstrap CSS/JS files? So the solution would be to embedded SVG's in the CSS, and never inject it into HTML?

Also, ensuring that anything that needs to hide/show something _doesn't_ use inline styles, and instead sets a CSS class.

[gladiola]

I had this same problem with Boostrap Carousel colliding with Content Security Policy. I know it's not an answer to the problem, but I was able to do a workaround with the following simple steps.

• Draft replacement left and right arrow icons in a drawing program. I used Gimp and built 100x100 pixel PNGs with transparent background. Place these graphics in a folder readily accessible under the Content Security Policy.
• Drill down into bootstrap.css and identify the classes that need to be overridden.
• Install replacement CSS, calling the PNG icons with background-image url().
• Adjust the size of the receiving CSS class to meet the icons, as desired. I found it helpful to completely shut off the background attribute of one of the class calls.

`.carousel-control-prev-icon {
background-image: url("LeftArrow.png");
}

.carousel-control-next-icon {
background-image: url("RightArrow.png");
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: 100px;
height: 100px;

}
`
These changes were near lines 6500 of my copy of bootstrap.css.

Notice that with this technique for a workaround, the color of the icons needs to be predetermined. The "fill" attribute of an SVG element won't be available.

The cold reality is that, when choosing between XSS protection and keeping SVGs for Bootstrap, it was time to throw the SVG problem overboard and secure the application. We simply can't have a design stylesheet breaking a security control that helps shut down an OWASP Top 10 problem. We hope that the Bootstrap team will be able to find a solution that works with CSP. Thanks.