sorich87 / bootstrap-tour

Quick and easy product tours with Twitter Bootstrap Popovers
http://bootstraptour.com
MIT License
4.44k stars 941 forks source link

Missing buttons or elements in your tour popover? Read this. #729

Open IGreatlyDislikeJavascript opened 5 years ago

IGreatlyDislikeJavascript commented 5 years ago

I'm posting this because the same question/issue keeps being raised, and people are creating well intentioned but not secure solutions to it.

Very simply: if you are using Bootstrap Tour with the current versions of BS3 or BS4 [see below], the "Prev"/"Next"/etc buttons and other elements will not appear in your tour popover.

The reason is the introduction of the Bootstrap Sanitizer. This sanitizer strips content from popovers to prevent security vulnerabilities like XSS attacks.

The "obvious" solution many people have chosen is to turn off the sanitizer globally, or change the global Bootstrap sanitizer whitelist, or disable the sanitizer for the Tour popovers.

To be clear: do not do this unless you are 100% confident you understand the implications and the risks/ways in which an XSS attack could be introduced into your site/code. Making global changes to the BS sanitizer could introduce security vulnerabilities into other 3rd party plugins you're using.

If you want to fix this missing button problem yourself, you must add the correct DOM elements to the specific Tour's popover whitelist, not globally. Alternatively you can use my fork of Tour that solves this problem.

You can see my fork here: https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist

You can read the detail of this sanitizer issue here: https://github.com/IGreatlyDislikeJavascript/bootstrap-tourist#options-to-manipulate-the-bootstrap-sanitizer-and-fix-the-sanitizer-related-breaking-change-in-bs-34x

[BS4 note: Bootstrap Tour is not BS4 compatible. My fork is fully BS4 compatible and fixes a number of other issues]