diff options
author | Johann-S <johann.servoire@gmail.com> | 2019-02-11 17:59:39 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-02-13 09:32:15 +0300 |
commit | 7bc4d2e0bc65151b6f60dccad50c9c8f50252bd6 (patch) | |
tree | 178feb0626afeb5861d6c873f72efefc16e076ac /site | |
parent | bf2515ae68f1d89e8b795478aec90f8db61159e5 (diff) |
Add sanitize template option for tooltip/popover plugins.
Diffstat (limited to 'site')
-rw-r--r-- | site/docs/4.3/components/popovers.md | 23 | ||||
-rw-r--r-- | site/docs/4.3/components/tooltips.md | 23 | ||||
-rw-r--r-- | site/docs/4.3/getting-started/javascript.md | 70 |
3 files changed, 116 insertions, 0 deletions
diff --git a/site/docs/4.3/components/popovers.md b/site/docs/4.3/components/popovers.md index 3e506aa296..d648c64753 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" %} + <table class="table table-bordered table-striped"> <thead> <tr> @@ -250,6 +255,24 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td>'scrollParent'</td> <td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td> </tr> + <tr> + <td>sanitize</td> + <td>boolean</td> + <td>true</td> + <td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.</td> + </tr> + <tr> + <td>whiteList</td> + <td>object</td> + <td><a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#sanitizer">Default value</a></td> + <td>Object which contains allowed attributes and tags</td> + </tr> + <tr> + <td>sanitizeFn</td> + <td>null | function</td> + <td>null</td> + <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td> + </tr> </tbody> </table> diff --git a/site/docs/4.3/components/tooltips.md b/site/docs/4.3/components/tooltips.md index 41d070b1f6..2fe90a6713 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" %} + <table class="table table-bordered table-striped"> <thead> <tr> @@ -255,6 +260,24 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td>'scrollParent'</td> <td>Overflow constraint boundary of the tooltip. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td> </tr> + <tr> + <td>sanitize</td> + <td>boolean</td> + <td>true</td> + <td>Enable or disable the sanitization. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized.</td> + </tr> + <tr> + <td>whiteList</td> + <td>object</td> + <td><a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#sanitizer">Default value</a></td> + <td>Object which contains allowed attributes and tags</td> + </tr> + <tr> + <td>sanitizeFn</td> + <td>null | function</td> + <td>null</td> + <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td> + </tr> </tbody> </table> diff --git a/site/docs/4.3/getting-started/javascript.md b/site/docs/4.3/getting-started/javascript.md index fc1f2c5a77..a509bd4826 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 %} |