New: Sanitize html input

Author: thomasthiebaud

package-lock.json

@@ -28,6 +28,8 @@
   "devDependencies": {
     "@semantic-release/changelog": "2.1.1",
     "@semantic-release/git": "6.0.1",
+    "@types/deepmerge": "2.1.0",
+    "@types/dompurify": "0.0.31",
     "@types/enzyme": "3.1.11",
     "@types/jest": "23.1.4",
     "@types/react": "16.4.6",
@@ -46,7 +48,10 @@
     "tslint-react": "3.6.0",
     "typescript": "2.9.2"
   },
-  "dependencies": {},
+  "dependencies": {
+    "deepmerge": "2.1.1",
+    "dompurify": "1.0.5"
+  },
   "peerDependencies": {
     "react": "^16.2.0"
   }

package.json

@@ -1,3 +1,6 @@
+import * as dompurify from 'dompurify'
+import { Options } from './options'
+
 export enum NodeType {
   ELEMENT_NODE = 1,
   TEXT_NODE = 3,
@@ -17,8 +20,7 @@ export function getAttributes(elementAttributes: NamedNodeMap) {
   return attributes
 }
 
-export function parse(html: string): NodeListOf<Node & ChildNode> {
-  const parser = new DOMParser()
-  const document = parser.parseFromString(`<htmldomtoreactroot>${html}</htmldomtoreactroot>`, 'application/xml')
-  return document.childNodes.item(0).childNodes
+export function parse(html: string, options: Options): NodeListOf<Node & ChildNode> {
+  const document = dompurify.sanitize(html, options.dom) as DocumentFragment
+  return document.childNodes
 }

src/dom.ts

@@ -1,10 +1,13 @@
 import * as dom from './dom'
+import { getOptions, Options } from './options'
 import { render } from './react'
 
-export function parse(html: string): React.ReactNode[] {
+export function parse(html: string, userOptions?: Options): React.ReactNode[] {
   if (typeof html !== 'string') {
     throw new TypeError('First argument must be a string.')
   }
 
-  return render(dom.parse(html))
+  const options = getOptions(userOptions)
+
+  return render(dom.parse(html, options))
 }

src/index.ts

@@ -0,0 +1,56 @@
+import * as deepmerge from 'deepmerge'
+
+export interface UserProfiles {
+  html?: boolean
+  mathMl?: boolean
+  svg?: boolean
+  svgFilters?: boolean
+}
+
+export interface DOMOptions {
+  ADD_ATTR?: string[]
+  ADD_TAGS?: string[]
+  ALLOW_DATA_ATTR?: boolean
+  ALLOW_UNKNOWN_PROTOCOLS?: boolean
+  ALLOWED_ATTR?: string[]
+  ALLOWED_TAGS?: string[]
+  ALLOWED_URI_REGEXP?: boolean
+  FORBID_ATTR?: string[]
+  FORBID_TAGS?: string[]
+  FORCE_BODY?: boolean
+  KEEP_CONTENT?: boolean
+  RETURN_DOM?: boolean
+  RETURN_DOM_FRAGMENT?: boolean
+  RETURN_DOM_IMPORT?: boolean
+  SAFE_FOR_JQUERY?: boolean
+  SAFE_FOR_TEMPLATES?: boolean
+  SANITIZE_DOM?: boolean
+  USE_PROFILES?: UserProfiles
+  WHOLE_DOCUMENT?: boolean
+}
+
+export interface Options {
+  dom?: DOMOptions
+}
+
+const mandatoryOptions: Options = {
+  dom: {
+    RETURN_DOM: false,
+    RETURN_DOM_FRAGMENT: true,
+    RETURN_DOM_IMPORT: false,
+  },
+}
+
+const defaultOptions: Options = {
+  dom: {
+    ADD_ATTR: ['key'],
+  },
+}
+
+export function getOptions(options?: Partial<Options>): Options {
+  if (options) {
+    return deepmerge.all<Options>([defaultOptions, options, mandatoryOptions])
+  } else {
+    return deepmerge.all<Options>([defaultOptions, mandatoryOptions])
+  }
+}

src/options.ts

@@ -1,4 +1,5 @@
 import * as React from 'react'
+
 import { getAttributes, NodeType } from './dom'
 
 export interface Attributes { [keyof: string]: string }
@@ -56,12 +57,10 @@ function transformAttributes(attributesMap: NamedNodeMap): Attributes {
   const transformedAttributes: Attributes = {}
 
   Object.keys(attributes).forEach((key) => {
-    if (!key.startsWith('on')) {
-      if (reactAttributesMap[key]) {
-        transformedAttributes[reactAttributesMap[key]] = attributes[key]
-      } else {
-        transformedAttributes[key] = attributes[key]
-      }
+    if (reactAttributesMap[key]) {
+      transformedAttributes[reactAttributesMap[key]] = attributes[key]
+    } else {
+      transformedAttributes[key] = attributes[key]
     }
   })
   return transformedAttributes
@@ -73,7 +72,6 @@ function renderTextNode(node: Node & ChildNode) {
 
 function renderElementNode(node: Node & ChildNode) {
   const element = transform(node as Element)
-
   if (element.childNodes) {
     return React.createElement(element.nodeName, element.attributes, render(element.childNodes))
   }
@@ -84,14 +82,15 @@ function transform(element: Element) {
   return {
     attributes: transformAttributes(element.attributes),
     childNodes: element.childNodes,
-    nodeName: element.nodeName,
+    nodeName: element.nodeName.toLowerCase(),
     nodeType: element.nodeType,
     nodeValue: element.nodeValue,
   }
 }
 
 export function render(nodes: NodeListOf<Node & ChildNode>): React.ReactNode[] {
   const elements = []
+
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes.item(i)
 

src/react.ts

@@ -0,0 +1,19 @@
+import { parse } from '../src/dom'
+import { getOptions } from '../src/options'
+
+describe('DOM', () => {
+  describe('#parse', () => {
+    it('should sanitize input', () => {
+      const document = parse('This is a <a onclick="console.log(\"WAZAAAA\")">test</a> <script/>', getOptions())
+      expect(document.length).toEqual(3)
+      expect(document.item(0).textContent).toEqual('This is a ')
+
+      const link = document.item(1) as Element
+      expect(link.nodeName).toEqual('A')
+      expect(link.textContent).toEqual('test')
+      expect(link.getAttribute('onclick')).toBeNull()
+
+      expect(document.item(2).textContent).toEqual(' ')
+    })
+  })
+})

tests/dom.spec.ts

@@ -0,0 +1,50 @@
+import { getOptions } from '../src/options'
+
+describe('Options', () => {
+  describe('#getOptions', () => {
+    it('should get default options', () => {
+      const defaultOptions = getOptions()
+      expect(defaultOptions).toEqual({
+        dom: {
+          ADD_ATTR: ['key'],
+          RETURN_DOM: false,
+          RETURN_DOM_FRAGMENT: true,
+          RETURN_DOM_IMPORT: false,
+        },
+      })
+    })
+
+    it('should merge user options and default options', () => {
+      const options = getOptions({
+        dom: {
+          ADD_TAGS: ['script'],
+        },
+      })
+      expect(options).toEqual({
+        dom: {
+          ADD_ATTR: ['key'],
+          ADD_TAGS: ['script'],
+          RETURN_DOM: false,
+          RETURN_DOM_FRAGMENT: true,
+          RETURN_DOM_IMPORT: false,
+        },
+      })
+    })
+
+    it('should not be possible to override mandatory options set internaly by the library', () => {
+      const options = getOptions({
+        dom: {
+          RETURN_DOM_FRAGMENT: false,
+        },
+      })
+      expect(options).toEqual({
+        dom: {
+          ADD_ATTR: ['key'],
+          RETURN_DOM: false,
+          RETURN_DOM_FRAGMENT: true,
+          RETURN_DOM_IMPORT: false,
+        },
+      })
+    })
+  })
+})

tests/options.spec.ts

@@ -17,7 +17,7 @@ describe('React', () => {
       div.appendChild(link)
 
       const wrapper = shallowWrapper(render(div.childNodes))
-      expect(wrapper.find('A').text()).toEqual('Link')
+      expect(wrapper.find('a').text()).toEqual('Link')
     })
 
     it('should render a self closing element', () => {
@@ -27,7 +27,7 @@ describe('React', () => {
       div.appendChild(newLine)
 
       const wrapper = shallowWrapper(render(div.childNodes))
-      expect(wrapper.find('BR')).toHaveLength(1)
+      expect(wrapper.find('br')).toHaveLength(1)
     })
 
     it('should render a text node', () => {
@@ -54,15 +54,13 @@ describe('React', () => {
       span.setAttribute('for', 'test')
       span.setAttribute('class', 'test')
       span.setAttribute('key', 'test')
-      span.setAttribute('onclick', 'console.log("test")')
       div.appendChild(span)
 
       const wrapper = shallowWrapper(render(div.childNodes))
-      expect(wrapper.find('SPAN')).toHaveLength(1)
-      expect(wrapper.find('SPAN').prop('htmlFor')).toEqual('test')
-      expect(wrapper.find('SPAN').prop('className')).toEqual('test')
-      expect(wrapper.find('SPAN').key()).toEqual('test')
-      expect(wrapper.find('SPAN').prop('onclick')).toBeUndefined()
+      expect(wrapper.find('span')).toHaveLength(1)
+      expect(wrapper.find('span').prop('htmlFor')).toEqual('test')
+      expect(wrapper.find('span').prop('className')).toEqual('test')
+      expect(wrapper.find('span').key()).toEqual('test')
     })
   })
 })