From 7bc4d2e0bc65151b6f60dccad50c9c8f50252bd6 Mon Sep 17 00:00:00 2001 From: Johann-S Date: Mon, 11 Feb 2019 16:59:39 +0200 Subject: Add sanitize template option for tooltip/popover plugins. --- site/docs/4.3/components/popovers.md | 23 ++++++++++ site/docs/4.3/components/tooltips.md | 23 ++++++++++ site/docs/4.3/getting-started/javascript.md | 70 +++++++++++++++++++++++++++++ 3 files changed, 116 insertions(+) (limited to 'site/docs') diff --git a/site/docs/4.3/components/popovers.md b/site/docs/4.3/components/popovers.md index 3e506aa29..d648c6475 100644 --- a/site/docs/4.3/components/popovers.md +++ b/site/docs/4.3/components/popovers.md @@ -140,6 +140,11 @@ Enable popovers via JavaScript: Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. +{% capture callout %} +Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` options cannot be supplied using data attributes. +{% endcapture %} +{% include callout.html content=callout type="warning" %} + @@ -250,6 +255,24 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap + + + + + + + + + + + + + + + + + +
'scrollParent' Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
sanitizebooleantrueEnable or disable the sanitization. If activated 'template', 'content' and 'title' options will be sanitized.
whiteListobjectDefault valueObject which contains allowed attributes and tags
sanitizeFnnull | functionnullHere you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
diff --git a/site/docs/4.3/components/tooltips.md b/site/docs/4.3/components/tooltips.md index 41d070b1f..2fe90a671 100644 --- a/site/docs/4.3/components/tooltips.md +++ b/site/docs/4.3/components/tooltips.md @@ -143,6 +143,11 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`. +{% capture callout %} +Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` options cannot be supplied using data attributes. +{% endcapture %} +{% include callout.html content=callout type="warning" %} + @@ -255,6 +260,24 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap + + + + + + + + + + + + + + + + + +
'scrollParent' Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's preventOverflow docs.
sanitizebooleantrueEnable or disable the sanitization. If activated 'template' and 'title' options will be sanitized.
whiteListobjectDefault valueObject which contains allowed attributes and tags
sanitizeFnnull | functionnullHere you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
diff --git a/site/docs/4.3/getting-started/javascript.md b/site/docs/4.3/getting-started/javascript.md index fc1f2c5a7..a509bd482 100644 --- a/site/docs/4.3/getting-started/javascript.md +++ b/site/docs/4.3/getting-started/javascript.md @@ -139,3 +139,73 @@ Bootstrap's plugins don't fall back particularly gracefully when JavaScript is d All Bootstrap's JavaScript files depend on `util.js` and it has to be included alongside the other JavaScript files. If you're using the compiled (or minified) `bootstrap.js`, there is no need to include this—it's already there. `util.js` includes utility functions and a basic helper for `transitionEnd` events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions. + +## Sanitizer + +Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML. + +The default `whiteList` value is the following: + +{% highlight js %} +var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i +var DefaultWhitelist = { + // Global attributes allowed on any supplied element below. + '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN], + a: ['target', 'href', 'title', 'rel'], + area: [], + b: [], + br: [], + col: [], + code: [], + div: [], + em: [], + hr: [], + h1: [], + h2: [], + h3: [], + h4: [], + h5: [], + h6: [], + i: [], + img: ['src', 'alt', 'title', 'width', 'height'], + li: [], + ol: [], + p: [], + pre: [], + s: [], + small: [], + span: [], + sub: [], + sup: [], + strong: [], + u: [], + ul: [] +} +{% endhighlight %} + +If you want to add new values to this default `whiteList` you can do the following: + +{% highlight js %} +var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList + +// To allow table elements +myDefaultWhiteList.table = [] + +// To allow td elements and data-option attributes on td elements +myDefaultWhiteList.td = ['data-option'] + +// You can push your custom regex to validate your attributes. +// Be careful about your regular expressions being too lax +var myCustomRegex = /^data-my-app-[\w-]+/ +myDefaultWhiteList['*'].push(myCustomRegex) +{% endhighlight %} + +If you want to bypass our sanitizer because you prefer to use a dedicated library, for example [DOMPurify](https://www.npmjs.com/package/dompurify), you should do the following: + +{% highlight js %} +$('#yourTooltip').tooltip({ + sanitizeFn: function (content) { + return DOMPurify.sanitize(content) + } +}) +{% endhighlight %} -- cgit v1.2.3