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

Bootstrap 4.1 - buttons (prev, next...) do not appear #727

Open
ThierryNapspirit opened this issue May 29, 2019 · 3 comments
Open

Bootstrap 4.1 - buttons (prev, next...) do not appear #727

ThierryNapspirit opened this issue May 29, 2019 · 3 comments

Comments

@ThierryNapspirit
Copy link

Using bootstrap4.1 the popover-nagivation div is always empty !
This is due to bootstrap 4.1: it removes all "button" tags from the popover content.

It is possible to enable the button by adding sanitize: false, after html:true, when the popover is initialized ($element.popover.).

Thanks for this library !

Regards.
Thierry.

@IGreatlyDislikeJavascript

Fyi this is due to a breaking change in Bootstrap that the authors of Tour have not had time to fix yet.

Although your solution (probably, for part of the BS 4 changes) works, turning off the bootstrap sanitizer directly is a potential security risk and should be last resort.

I've fixed this issue in my fork of Tour, which also fixes a number of other issues and adds full BS 3 & 4 compatibility.

You can see the detail of this sanitizer issue here:
https://github.com/sorich87/bootstrap-tour/issues/723#issuecomment-471676375

And my fork is here:
https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist

@andreaslillebo
Copy link

A possible workaround is to add the required elements and attributes to the default whitelist for the Bootstrap popover constructor sanitizer (before you initialize Tour).

The following works for me when using Bootstrap 4.3.1:

var whitelist = $.fn.tooltip.Constructor.DEFAULTS.whiteList;
whitelist.button = ['data-role', 'style'];
whitelist.img = ['style'];
whitelist.div = ['style'];

@IGreatlyDislikeJavascript

@andreaslillebo yes, the cause of the missing buttons is the bootstrap sanitizer. Your proposed fix will solve the issue, however it creates a potential security vulnerability. Have a read of the comment #723 linked in my post above for the detail.

In short, making a change to the global sanitizer whitelist means you must also make sure that any other code, and all other 3rd party plugins you're using does not expose an XSS or similar flaw. That's why you should generally not change the bootstrap sanitizer default, and instead change the permitted tags in the specific popover construction. That's why I added the specific whitelist manipulation features to Tourist.

Also it's worth noting that Bootstrap Tour is not BS4 compatible. Although you can change the template and whitelist, there are several other elements that need to be changed for proper BS4 compatibility - including the creation, manipulation and destruction of the popover. BS3 uses popover, BS4 uses popper.js which is completely different. Again, my Tourist fork fixes this properly for full compatibility.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants