From 8a37045b798fd66ede9c68774f9bb657e28d956a Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sat, 23 Feb 2019 00:37:55 +0200 Subject: move util in a util folder with the sanitizer --- js/src/util/index.js | 177 +++++++++++++++++++++++++++++++++++++++++++++++ js/src/util/sanitizer.js | 131 +++++++++++++++++++++++++++++++++++ 2 files changed, 308 insertions(+) create mode 100644 js/src/util/index.js create mode 100644 js/src/util/sanitizer.js (limited to 'js/src/util') diff --git a/js/src/util/index.js b/js/src/util/index.js new file mode 100644 index 0000000000..7c86a95ffa --- /dev/null +++ b/js/src/util/index.js @@ -0,0 +1,177 @@ +/** + * -------------------------------------------------------------------------- + * Bootstrap (v4.3.1): util/index.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * -------------------------------------------------------------------------- + */ + +const MAX_UID = 1000000 +const MILLISECONDS_MULTIPLIER = 1000 +const TRANSITION_END = 'transitionend' +const jQuery = window.jQuery + +// Shoutout AngusCroll (https://goo.gl/pxwQGp) +const toType = (obj) => ({}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase()) + +/** + * -------------------------------------------------------------------------- + * Public Util Api + * -------------------------------------------------------------------------- + */ + +const getUID = (prefix) => { + do { + // eslint-disable-next-line no-bitwise + prefix += ~~(Math.random() * MAX_UID) // "~~" acts like a faster Math.floor() here + } while (document.getElementById(prefix)) + return prefix +} + +const getSelectorFromElement = (element) => { + let selector = element.getAttribute('data-target') + + if (!selector || selector === '#') { + const hrefAttr = element.getAttribute('href') + + selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '' + } + + try { + return document.querySelector(selector) ? selector : null + } catch (err) { + return null + } +} + +const getTransitionDurationFromElement = (element) => { + if (!element) { + return 0 + } + + // Get transition-duration of the element + let { + transitionDuration, + transitionDelay + } = window.getComputedStyle(element) + + const floatTransitionDuration = parseFloat(transitionDuration) + const floatTransitionDelay = parseFloat(transitionDelay) + + // Return 0 if element or transition duration is not found + if (!floatTransitionDuration && !floatTransitionDelay) { + return 0 + } + + // If multiple durations are defined, take the first + transitionDuration = transitionDuration.split(',')[0] + transitionDelay = transitionDelay.split(',')[0] + + return (parseFloat(transitionDuration) + parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER +} + +const triggerTransitionEnd = (element) => { + element.dispatchEvent(new Event(TRANSITION_END)) +} + +const isElement = (obj) => (obj[0] || obj).nodeType + +const emulateTransitionEnd = (element, duration) => { + let called = false + const durationPadding = 5 + const emulatedDuration = duration + durationPadding + function listener() { + called = true + element.removeEventListener(TRANSITION_END, listener) + } + + element.addEventListener(TRANSITION_END, listener) + setTimeout(() => { + if (!called) { + triggerTransitionEnd(element) + } + }, emulatedDuration) +} + +const typeCheckConfig = (componentName, config, configTypes) => { + Object.keys(configTypes) + .forEach((property) => { + const expectedTypes = configTypes[property] + const value = config[property] + const valueType = value && isElement(value) + ? 'element' : toType(value) + + if (!new RegExp(expectedTypes).test(valueType)) { + throw new Error( + `${componentName.toUpperCase()}: ` + + `Option "${property}" provided type "${valueType}" ` + + `but expected type "${expectedTypes}".`) + } + }) +} + +const makeArray = (nodeList) => { + if (!nodeList) { + return [] + } + + return [].slice.call(nodeList) +} + +const isVisible = (element) => { + if (!element) { + return false + } + + if (element.style && element.parentNode && element.parentNode.style) { + return element.style.display !== 'none' && + element.parentNode.style.display !== 'none' && + element.style.visibility !== 'hidden' + } + + return false +} + +const findShadowRoot = (element) => { + if (!document.documentElement.attachShadow) { + return null + } + + // Can find the shadow root otherwise it'll return the document + if (typeof element.getRootNode === 'function') { + const root = element.getRootNode() + return root instanceof ShadowRoot ? root : null + } + + if (element instanceof ShadowRoot) { + return element + } + + // when we don't find a shadow root + if (!element.parentNode) { + return null + } + + return findShadowRoot(element.parentNode) +} + +// eslint-disable-next-line no-empty-function +const noop = () => function () {} + +const reflow = (element) => element.offsetHeight + +export { + jQuery, + TRANSITION_END, + getUID, + getSelectorFromElement, + getTransitionDurationFromElement, + triggerTransitionEnd, + isElement, + emulateTransitionEnd, + typeCheckConfig, + makeArray, + isVisible, + findShadowRoot, + noop, + reflow +} diff --git a/js/src/util/sanitizer.js b/js/src/util/sanitizer.js new file mode 100644 index 0000000000..f8bb172a95 --- /dev/null +++ b/js/src/util/sanitizer.js @@ -0,0 +1,131 @@ +/** + * -------------------------------------------------------------------------- + * Bootstrap (v4.3.1): util/sanitizer.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * -------------------------------------------------------------------------- + */ + +import { + makeArray +} from './index' + +const uriAttrs = [ + 'background', + 'cite', + 'href', + 'itemtype', + 'longdesc', + 'poster', + 'src', + 'xlink:href' +] + +const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i + +/** + * 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 + +const 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 + } + + const regExp = allowedAttributeList.filter((attrRegex) => attrRegex instanceof RegExp) + + // Check if a regular expression validates the attribute. + for (let i = 0, l = regExp.length; i < l; i++) { + if (attrName.match(regExp[i])) { + return true + } + } + + return false +} + +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: [] +} + +export function sanitizeHtml(unsafeHtml, whiteList, sanitizeFn) { + if (!unsafeHtml.length) { + return unsafeHtml + } + + if (sanitizeFn && typeof sanitizeFn === 'function') { + return sanitizeFn(unsafeHtml) + } + + const domParser = new window.DOMParser() + const createdDocument = domParser.parseFromString(unsafeHtml, 'text/html') + const whitelistKeys = Object.keys(whiteList) + const elements = makeArray(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(elName) === -1) { + el.parentNode.removeChild(el) + + continue + } + + const attributeList = makeArray(el.attributes) + const whitelistedAttributes = [].concat(whiteList['*'] || [], whiteList[elName] || []) + + attributeList.forEach((attr) => { + if (!allowedAttribute(attr, whitelistedAttributes)) { + el.removeAttribute(attr.nodeName) + } + }) + } + + return createdDocument.body.innerHTML +} -- cgit v1.2.3