mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Backport sanitize docs from v4.
This commit is contained in:
@@ -70,6 +70,81 @@ $('#myModal').on('show.bs.modal', function (e) {
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
<h2 id="js-sanitizer">Sanitizer</h2>
|
||||
|
||||
<p>Tooltips and Popovers use our built-in sanitizer to sanitize options which accept HTML.</p>
|
||||
<p>The default <code>whiteList</code> value is the following:</p>
|
||||
|
||||
{% 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 %}
|
||||
|
||||
<p>If you want to add new values to this default <code>whiteList</code> you can do the following:</p>
|
||||
|
||||
{% highlight js %}
|
||||
var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.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 %}
|
||||
|
||||
<p>If you want to bypass our sanitizer because you prefer to use a dedicated library, for example <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>, you should do the following:</p>
|
||||
|
||||
{% highlight js %}
|
||||
$('#yourTooltip').tooltip({
|
||||
sanitizeFn: function (content) {
|
||||
return DOMPurify.sanitize(content)
|
||||
}
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger" id="callout-sanitizer-no-createhtmldocument">
|
||||
<h4>Browsers without <code>document.implementation.createHTMLDocument</code></h4>
|
||||
<p>In case of browsers that don't support <code>document.implementation.createHTMLDocument</code>, like Internet Explorer 8, the built-in sanitize function returns the HTML as is.</p>
|
||||
<p>If you want to perform sanitization in this case, please specify <code>sanitizeFn</code> and use an external library like <a href="https://www.npmjs.com/package/dompurify">DOMPurify</a>.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="js-version-nums">Version numbers</h2>
|
||||
<p>The version of each of Bootstrap's jQuery plugins can be accessed via the <code>VERSION</code> property of the plugin's constructor. For example, for the tooltip plugin:</p>
|
||||
{% highlight js %}
|
||||
|
||||
Reference in New Issue
Block a user