Skip to content
Permalink
Browse files

sanitize template option for tooltip/popover plugins

  • Loading branch information...
Johann-S committed Feb 11, 2019
1 parent 45ced60 commit e780c0a94c9a5aedb2630f4bca4105c029d74d65
@@ -0,0 +1,118 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.3.0): tools/sanitizer.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/

const uriAttrs = [
'background',
'cite',
'href',
'itemtype',
'longdesc',
'poster',
'src',
'xlink:href'
]

// The allowedAttribute method should check to see if the supplied value is
// a regular expression, this would allow this to support any number of aria
// attributes by default and give users the ability to specify their own regular
// expressions should the need arise (e.g. /^data-my-app-[\w-]*$/).
const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i

export const 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: []
}

/**
* A pattern that recognizes a commonly useful subset of URLs that are safe.
*
* Shoutout to Angular 7 https://github.com/angular/angular/blob/7.2.4/packages/core/src/sanitization/url_sanitizer.ts
*/
const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi

/**
* A pattern that matches safe data URLs. Only matches image, video and audio types.
*
* Shoutout to Angular 7 https://github.com/angular/angular/blob/7.2.4/packages/core/src/sanitization/url_sanitizer.ts
*/
const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[a-z0-9+/]+=*$/i

function allowedAttribute(attr, allowedAttributeList) {
const attrName = attr.nodeName.toLowerCase()

if (allowedAttributeList.indexOf(attrName) !== -1) {
if (uriAttrs.indexOf(attrName) !== -1) {
return Boolean(attr.nodeValue.match(SAFE_URL_PATTERN) || attr.nodeValue.match(DATA_URL_PATTERN))
}

return true
}

return false
}

export function sanitizeHtml(unsafeHtml, whiteList) {
if (unsafeHtml.length === 0) {
return unsafeHtml
}

const domParser = new window.DOMParser()
const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html')
const whitelistKeys = Object.keys(whiteList)
const elements = [].slice.call(createdDocument.body.querySelectorAll('*'))

for (let i = 0, len = elements.length; i < len; i++) {
const el = elements[i]
const elName = el.nodeName.toLowerCase()

if (whitelistKeys.indexOf(el.nodeName.toLowerCase()) === -1) {
el.parentNode.removeChild(el)

continue
}

const attributeList = [].slice.call(el.attributes)
const whitelistedAttributes = [].concat(whiteList['*'] || [], whiteList[elName] || [])

attributeList.forEach((attr) => {
if (!allowedAttribute(attr, whitelistedAttributes)) {
el.removeAttribute(attr.nodeName)
}
})
}

return createdDocument.body.innerHTML
}
@@ -5,6 +5,10 @@
* --------------------------------------------------------------------------
*/

import {
DefaultWhitelist,
sanitizeHtml
} from './tools/sanitizer'
import $ from 'jquery'
import Popper from 'popper.js'
import Util from './util'
@@ -35,7 +39,9 @@ const DefaultType = {
offset : '(number|string|function)',
container : '(string|element|boolean)',
fallbackPlacement : '(string|array)',
boundary : '(string|element)'
boundary : '(string|element)',
sanitize : 'boolean',
whiteList : 'object'
}

const AttachmentMap = {
@@ -60,7 +66,9 @@ const Default = {
offset : 0,
container : false,
fallbackPlacement : 'flip',
boundary : 'scrollParent'
boundary : 'scrollParent',
sanitize : true,
whiteList : DefaultWhitelist
}

const HoverState = {
@@ -419,18 +427,24 @@ class Tooltip {
}

setElementContent($element, content) {
const html = this.config.html
if (typeof content === 'object' && (content.nodeType || content.jquery)) {
// Content is a DOM node or a jQuery
if (html) {
if (this.config.html) {
if (!$(content).parent().is($element)) {
$element.empty().append(content)
}
} else {
$element.text($(content).text())
}

return
}

if (this.config.html) {
content = sanitizeHtml(content, this.config.whiteList)
$element.html(content)
} else {
$element[html ? 'html' : 'text'](content)
$element.text(content)
}
}

@@ -663,6 +677,10 @@ class Tooltip {
this.constructor.DefaultType
)

if (config.sanitize) {
config.template = sanitizeHtml(config.template, config.whiteList)
}

return config
}

@@ -1106,4 +1106,91 @@ $(function () {
assert.strictEqual(offset.offset, myOffset)
assert.ok(typeof offset.fn === 'undefined')
})

QUnit.test('should disable sanitizer', function (assert) {
assert.expect(1)

var $trigger = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
sanitize: false
})

var tooltip = $trigger.data('bs.tooltip')
assert.strictEqual(tooltip.config.sanitize, false)
})

QUnit.test('should sanitize template by removing disallowed tags', function (assert) {
assert.expect(1)

var $trigger = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
template: [
'<div>',
' <script>console.log("oups script inserted")</script>',
' <span>Some contents</span>',
'</div>'
].join('')
})

var tooltip = $trigger.data('bs.tooltip')
assert.strictEqual(tooltip.config.template.indexOf('script'), -1)
})

QUnit.test('should sanitize template by removing disallowed attributes', function (assert) {
assert.expect(1)

var $trigger = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
template: [
'<div>',
' <img src="x" onError="alert(\'test\')">Some contents</img>',
'</div>'
].join('')
})

var tooltip = $trigger.data('bs.tooltip')
assert.strictEqual(tooltip.config.template.indexOf('onError'), -1)
})

QUnit.test('should sanitize template by removing tags with XSS', function (assert) {
assert.expect(1)

var $trigger = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
template: [
'<div>',
' <a href="javascript:alert(7)">Click me</a>',
' <span>Some contents</span>',
'</div>'
].join('')
})

var tooltip = $trigger.data('bs.tooltip')
assert.strictEqual(tooltip.config.template.indexOf('script'), -1)
})

QUnit.test('should allow custom rules of sanitization', function (assert) {
assert.expect(2)

var $trigger = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
.appendTo('#qunit-fixture')
.bootstrapTooltip({
template: [
'<a href="javascript:alert(7)">Click me</a>',
'<span>Some contents</span>'
].join(''),
whiteList: {
span: null
}
})

var tooltip = $trigger.data('bs.tooltip')

assert.strictEqual(tooltip.config.template.indexOf('<a'), -1)
assert.ok(tooltip.config.template.indexOf('span') !== -1)
})
})
@@ -182,19 +182,19 @@
},
{
"path": "./dist/js/bootstrap.bundle.js",
"maxSize": "45 kB"
"maxSize": "47 kB"
},
{
"path": "./dist/js/bootstrap.bundle.min.js",
"maxSize": "21.25 kB"
"maxSize": "22 kB"
},
{
"path": "./dist/js/bootstrap.js",
"maxSize": "23 kB"
"maxSize": "24 kB"
},
{
"path": "./dist/js/bootstrap.min.js",
"maxSize": "14.5 kB"
"maxSize": "15 kB"
}
],
"jspm": {
@@ -250,6 +250,21 @@ 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 built-in sanitizer. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.
You can disable this option if you want to sanitize your template with a dedicated library.</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 allowed tags</td>
</tr>
</tbody>
</table>

@@ -255,6 +255,21 @@ 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 built-in sanitizer. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized.
You can disable this option if you want to sanitize your template with a dedicated library.</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 allowed tags</td>
</tr>
</tbody>
</table>

0 comments on commit e780c0a

Please sign in to comment.
You can’t perform that action at this time.