feat: allow disable sanitization (#564)

.changeset/tricky-poems-collect.md

@@ -0,0 +1,5 @@
+---
+'markdown-to-jsx': minor
+---
+
+Allow disabling sanitization when `options.sanitization` is explicitly set to `false`.

index.compiler.spec.tsx

@@ -21,7 +21,7 @@ it('should throw if not passed a string (first arg)', () => {
   // @ts-ignore
   expect(() => compiler(1)).toThrow()
   // @ts-ignore
-  expect(() => compiler(() => {})).toThrow()
+  expect(() => compiler(() => { })).toThrow()
   // @ts-ignore
   expect(() => compiler({})).toThrow()
   // @ts-ignore
@@ -1180,9 +1180,24 @@ describe('links', () => {
     `)
   })
 
+  it('should not sanitize markdown when explicitly disabled', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
+
+    render(compiler('[foo](javascript:doSomethingBad)', { sanitization: false }))
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <a href="javascript:doSomethingBad">
+        foo
+      </a>
+    `)
+
+    expect(console.warn).not.toHaveBeenCalled()
+  })
+
   it('should sanitize markdown links containing JS expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('[foo](javascript:doSomethingBad)'))
 
@@ -1196,8 +1211,8 @@ describe('links', () => {
   })
 
   it('should sanitize markdown links containing JS expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('![foo](javascript:doSomethingBad)'))
 
@@ -1207,8 +1222,8 @@ describe('links', () => {
   })
 
   it('should sanitize markdown links containing Data expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('[foo](data:doSomethingBad)'))
     expect(root.innerHTML).toMatchInlineSnapshot(`
@@ -1220,8 +1235,8 @@ describe('links', () => {
   })
 
   it('should sanitize markdown links containing VBScript expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('[foo](vbScript:doSomethingBad)'))
     expect(root.innerHTML).toMatchInlineSnapshot(`
@@ -1233,8 +1248,8 @@ describe('links', () => {
   })
 
   it('should sanitize markdown links containing encoded JS expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('[foo](javascript%3AdoSomethingBad)'))
 
@@ -1248,8 +1263,8 @@ describe('links', () => {
   })
 
   it('should sanitize markdown links containing padded JS expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('[foo](  javascript%3AdoSomethingBad)'))
 
@@ -1263,8 +1278,8 @@ describe('links', () => {
   })
 
   it('should sanitize markdown links containing padded encoded vscript expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('[foo](  VBScript%3AdoSomethingBad)'))
 
@@ -1277,17 +1292,17 @@ describe('links', () => {
   })
 
   it('should sanitize markdown images containing padded encoded vscript expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('![foo](  VBScript%3AdoSomethingBad)'))
     expect(root.innerHTML).toMatchInlineSnapshot(`<img alt="foo">`)
     expect(console.warn).toHaveBeenCalled()
   })
 
   it('should sanitize markdown links containing padded encoded data expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('[foo](`<data:doSomethingBad)'))
     expect(root.innerHTML).toMatchInlineSnapshot(`
@@ -1299,17 +1314,17 @@ describe('links', () => {
   })
 
   it('should sanitize markdown images containing padded encoded data expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('![foo](`<data:doSomethingBad)'))
     expect(root.innerHTML).toMatchInlineSnapshot(`<img alt="foo">`)
     expect(console.warn).toHaveBeenCalled()
   })
 
   it('should sanitize markdown links containing invalid characters', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('[foo](https://google.com/%AF)'))
 
@@ -1322,8 +1337,8 @@ describe('links', () => {
   })
 
   it('should sanitize html links containing JS expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('<a href="javascript:doSomethingBad">foo</a>'))
 
@@ -1337,8 +1352,8 @@ describe('links', () => {
   })
 
   it('should sanitize html links containing encoded, prefixed data expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('<a href="<`data:doSomethingBad">foo</a>'))
     expect(root.innerHTML).toMatchInlineSnapshot(`
@@ -1350,8 +1365,8 @@ describe('links', () => {
   })
 
   it('should sanitize html images containing encoded, prefixed JS expressions', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     // TODO: something is off on parsing here, because this prints:
     // console.error("Warning: Unknown prop `javascript:alert` on <img> tag"...)
@@ -1367,8 +1382,8 @@ describe('links', () => {
   })
 
   it('should sanitize html images containing weird parsing src=s', () => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {})
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'warn').mockImplementation(() => { })
+    jest.spyOn(console, 'error').mockImplementation(() => { })
 
     render(compiler('<img src="`<src="javascript:alert(`xss`)">`'))
     expect(root.innerHTML).toMatchInlineSnapshot(`

index.tsx

@@ -730,7 +730,8 @@ function normalizeAttributeKey(key) {
 
 function attributeValueToJSXPropValue(
   key: keyof React.AllHTMLAttributes<Element>,
-  value: string
+  value: string,
+  sanitizeUrlFn: (url: string) => string
 ): any {
   if (key === 'style') {
     return value.split(/;\s?/).reduce(function (styles, kvPair) {
@@ -748,7 +749,7 @@ function attributeValueToJSXPropValue(
       return styles
     }, {})
   } else if (key === 'href' || key === 'src') {
-    return sanitizeUrl(value)
+    return sanitizeUrlFn(value)
   } else if (value.match(INTERPOLATION_R)) {
     // return as a string and let the consumer decide what to do with it
     value = value.slice(1, value.length - 1)
@@ -949,7 +950,11 @@ function matchParagraph(
   return [match, captured]
 }
 
-function sanitizeUrl(url: string): string | undefined {
+function identity<T>(x: T): T {
+  return x
+}
+
+function defaultSanitizeUrl(url: string): string | undefined {
   try {
     const decoded = decodeURIComponent(url).replace(/[^A-Za-z0-9/:]/g, '')
 
@@ -1141,6 +1146,9 @@ export function compiler(
     ? { ...namedCodesToUnicode, ...options.namedCodesToUnicode }
     : namedCodesToUnicode
 
+  // If "sanitization" is not explicitly set to false, it will be enabled by default
+  let sanitizeUrlFn = options.sanitization !== false ? defaultSanitizeUrl : identity
+
   const createElementFn = options.createElement || React.createElement
 
   // JSX custom pragma
@@ -1242,7 +1250,8 @@ export function compiler(
         const mappedKey = ATTRIBUTE_TO_JSX_PROP_MAP[key] || key
         const normalizedValue = (map[mappedKey] = attributeValueToJSXPropValue(
           key,
-          value
+          value,
+          sanitizeUrlFn
         ))
 
         if (
@@ -1413,7 +1422,7 @@ export function compiler(
       },
       render(node, output, state) {
         return (
-          <a key={state.key} href={sanitizeUrl(node.target)}>
+          <a key={state.key} href={sanitizeUrlFn(node.target)}>
             <sup key={state.key}>{node.text}</sup>
           </a>
         )
@@ -1572,7 +1581,7 @@ export function compiler(
             key={state.key}
             alt={node.alt || undefined}
             title={node.title || undefined}
-            src={sanitizeUrl(node.target)}
+            src={sanitizeUrlFn(node.target)}
           />
         )
       },
@@ -1594,7 +1603,7 @@ export function compiler(
       },
       render(node, output, state) {
         return (
-          <a key={state.key} href={sanitizeUrl(node.target)} title={node.title}>
+          <a key={state.key} href={sanitizeUrlFn(node.target)} title={node.title}>
             {output(node.children, state)}
           </a>
         )
@@ -1723,7 +1732,7 @@ export function compiler(
           <img
             key={state.key}
             alt={node.alt}
-            src={sanitizeUrl(refs[node.ref].target)}
+            src={sanitizeUrlFn(refs[node.ref].target)}
             title={refs[node.ref].title}
           />
         ) : null
@@ -1747,7 +1756,7 @@ export function compiler(
         return refs[node.ref] ? (
           <a
             key={state.key}
-            href={sanitizeUrl(refs[node.ref].target)}
+            href={sanitizeUrlFn(refs[node.ref].target)}
             title={refs[node.ref].title}
           >
             {output(node.children, state)}
@@ -2373,6 +2382,12 @@ export namespace MarkdownToJSX {
       state: State
     ) => React.ReactChild
 
+
+    /**
+     * Whether to enable markdown-to-jsx's built-in sanitization.
+     */
+    sanitization: boolean
+
     /**
      * Override normalization of non-URI-safe characters for use in generating
      * HTML IDs for anchor linking purposes.