Bootstrap: Bootstrap 3.4.1 popover content not shown on Chrome

[tbrcrl]

Hi,
Windows 10
Chrome 72
The popover content (div class="container-fluid") is not shown on Chrome when using Bootstrap 3.4.1. In the attached screenshot the same popover using Bootstrap 3.4.1 and Bootstrap 3.4.0 (do not care about style as I used different customization). As you can see, in version 3.4.1 the div with class "container-fluid" has a computed height of 0px.
I am sorry but I can't provide an accessible test case as the application is on an a company intranet.
Workaround: keep the 3.4.1 css folder and replace the js folder with 3.4.0 version
I suppose the issue is related to the tooltip and popover XSS sanitization updated in version 3.4.1
https://blog.getbootstrap.com/2019/02/13/bootstrap-4-3-1-and-3-4-1/
Thanks

.

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen/JS Bin or Stackblitz and report back with your link, Bootstrap version, and specific browser and OS details.

BTW if it's related to our latest release, can you set sanitize at false for your dropdown and see if it fix your issue ?

[tbrcrl]

Hi thanks, for the quick answer.
I set sanitize : false, at row 1462 of bootstrap.js and this solved the issue.
Do you still need the live demo?

[robinwilson16]

This is also broken in Bootstrap 4.3.1 with exactly the same issue.
Popovers show no content.
Had to revert back to 4.3.0
Earlier versions are fine too.
It is broken in Chrome and Edge (latest versions). Have not tested other browsers.

With Bootstrap 4.3.0:

With Bootstrap 4.3.1:

[jokamax]

Broken in firefox 65.0.1 too (no content html loaded in popover).

[Johann-S]

@tbrcrl you shouldn't change that in Bootstrap source code, you can set that when you initialize your Popover, see:

$('#yourPopover').popover({
  sanitize: false,
})

For the other feedbacks, since Bootstrap 4.3.1 and 3.4.1, Popovers and Tooltips sanitize their options which contains HTML, so if you don't need that because your users cannot change the HTML of those options, you can set sanitize at false.

You'll find more informations here:
https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer
https://getbootstrap.com/docs/3.4/javascript/#js-sanitizer

And in the related plugins pages.

[robinwilson16]

As this has been closed does it mean the bug has been addressed and popovers work again?
4.3.1 still seems to be the latest version.
Or do we need to wait for 4.3.2/3.4.2?

[Johann-S]

@robinwilson16 There is no fix for that issue, it's related to how you use Bootstrap.

For the other feedbacks, since Bootstrap 4.3.1 and 3.4.1, Popovers and Tooltips sanitize their options which contains HTML, so if you don't need that because your users cannot change the HTML of those options, you can set sanitize at false.

[robinwilson16]

@Johann-S Thanks I see. Sorry I didn't realise this was a new requirement - I thought it was just to help track the issue down.
So basically if we need HTML inside the popover we must set sanitize to false otherwise it should be left as default, which is true.
Thanks will amend my .js files and switch back to the newer version in my next commit.

[inad9300]

Please, refer to this issue as a breaking change in the release notes of 3.4.1 and mention explicitly the sanitize flag. I wasted a long time wondering why a couple of very simple buttons were not displayed! Suspecting that a +0.0.1 increase on one of your dependencies has such a breaking change is not the first thing that comes to mind.

[NobodysNightmare]

I think the take-away from this issue should not be "now I have to add sanitize: false to my code".

The sanitizing has been added as counter to cross site scripting, by disabling it, you are opening that up again.

The take away should be: "I have to check whether it is safe to add sanitize: false to my code.", because you will have to ensure yourself that it is impossible for an attacker to set custom content inside the popover (or sanitize that part on your own).

[Basirk]

In the Bootstrap documentation for tooltips and popovers, the sanitize option should be mentioned in the html option description. It should specifically highlight that some HTML will not be rendered unless sanitize options are changed.

[dayanrr91]

@tbrcrl you shouldn't change that in Bootstrap source code, you can set that when you initialize your Popover, see:

$('#yourPopover').popover({
  sanitize: false,
})

For the other feedbacks, since Bootstrap 4.3.1 and 3.4.1, Popovers and Tooltips sanitize their options which contains HTML, so if you don't need that because your users cannot change the HTML of those options, you can set sanitize at false.

You'll find more informations here:
https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer
https://getbootstrap.com/docs/3.4/javascript/#js-sanitizer

And in the related plugins pages.

dude, you fuc**saved me, I've been stocked with this for the past two hours. Thanks.

[Commifreak]

Just came accros this issue. I wonder, why I cant turn off sanitizing by adding a data-attribute.

data-html="true" is accepted, but data-sanitize="false" does nothing. Is this wanted behavior?