Merge pull request #3578 from RedisInsight/fe/feature/RI-5889-sanitize

#RI-5889 - sanitize markdown

Author: vlad-dargel

redisinsight/ui/src/services/formatter/MarkdownToJsxString.ts

@@ -10,7 +10,8 @@ import {
   remarkLink,
   rehypeLinks,
   remarkImage,
-  remarkCode
+  remarkCode,
+  remarkSanitize,
 } from 'uiSrc/utils/formatters/markdown'
 import { IFormatter, IFormatterConfig } from './formatter.interfaces'
 
@@ -20,6 +21,7 @@ class MarkdownToJsxString implements IFormatter {
     return new Promise((resolve, reject) => {
       unified()
         .use(remarkParse)
+        .use(remarkSanitize)
         .use(remarkGfm) // support GitHub Flavored Markdown
         .use(remarkRedisUpload, path) // Add custom component for redis-upload code block
         .use(remarkCode, codeOptions) // Add custom component for Redis code block

redisinsight/ui/src/utils/formatters/markdown/index.ts

@@ -2,6 +2,7 @@ import { rehypeLinks } from './rehypeLinks'
 import { remarkImage } from './remarkImage'
 import { remarkLink } from './remarkLink'
 import { remarkCode } from './remarkCode'
+import { remarkSanitize } from './remarkSanitize'
 import { remarkRedisUpload } from './remarkRedisUpload'
 
 export {
@@ -10,4 +11,5 @@ export {
   remarkLink,
   remarkCode,
   remarkRedisUpload,
+  remarkSanitize,
 }

redisinsight/ui/src/utils/formatters/markdown/remarkSanitize.ts

@@ -0,0 +1,36 @@
+import { visit } from 'unist-util-visit'
+
+const dangerousAttributes = [
+  'onabort', 'onafterprint', 'onanimationend', 'onanimationiteration', 'onanimationstart',
+  'onbeforeprint', 'onbeforeunload', 'onblur', 'oncancel', 'oncanplay', 'oncanplaythrough',
+  'onchange', 'onclick', 'onclose', 'oncontextmenu', 'oncopy', 'oncuechange', 'oncut', 'ondblclick',
+  'ondrag', 'ondragend', 'ondragenter', 'ondragexit', 'ondragleave', 'ondragover', 'ondragstart',
+  'ondrop', 'ondurationchange', 'onemptied', 'onended', 'onerror', 'onfocus', 'onfocusin', 'onfocusout',
+  'onformdata', 'onhashchange', 'oninput', 'oninvalid', 'onkeydown', 'onkeypress', 'onkeyup',
+  'onlanguagechange', 'onload', 'onloadeddata', 'onloadedmetadata', 'onloadstart', 'onmessage',
+  'onmessageerror', 'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout',
+  'onmouseover', 'onmouseup', 'onoffline', 'ononline', 'onpagehide', 'onpageshow', 'onpaste',
+  'onpause', 'onplay', 'onplaying', 'onpopstate', 'onprogress', 'onratechange', 'onrejectionhandled',
+  'onreset', 'onresize', 'onscroll', 'onsearch', 'onseeked', 'onseeking', 'onselect', 'onstalled',
+  'onstorage', 'onsubmit', 'onsuspend', 'ontimeupdate', 'ontoggle', 'ontransitionend', 'onunhandledrejection',
+  'onunload', 'onvolumechange', 'onwaiting', 'onwheel', 'href', 'src', 'action', 'formaction', 'manifest',
+  'background', 'poster', 'cite', 'data', 'ping', 'xlink:href', 'style', 'srcdoc', 'sandbox'
+].join('|')
+
+export const remarkSanitize = (): (tree: Node) => void => (tree: any) => {
+  visit(tree, 'html', (node) => {
+    const dangerousAttrRegex = new RegExp(`\\s*(${dangerousAttributes})="[^"]*"`, 'gi')
+
+    if (node.value.match(dangerousAttrRegex)) {
+      node.value = node.value.replace(dangerousAttrRegex, (match: string) => {
+        const attr = match.toLowerCase().trim()
+        if (attr.startsWith('href') || attr.startsWith('src') || attr.startsWith('xlink:href')) {
+          if (attr.indexOf('"javascript:') > -1) return ''
+          return match
+        }
+
+        return ''
+      })
+    }
+  })
+}

redisinsight/ui/src/utils/tests/formatters/markdown/remarkSanitize.spec.ts

@@ -0,0 +1,34 @@
+import { visit } from 'unist-util-visit'
+import { remarkSanitize } from 'uiSrc/utils/formatters/markdown'
+
+jest.mock('unist-util-visit')
+
+const testCases = [
+  { input: '', output: '' },
+  { input: '<a href="https://localhost">', output: '<a href="https://localhost">' },
+  { input: '<a href="javascript:alert(1)">', output: '<a>' },
+  { input: '<img onload="alert(1)">', output: '<img>' },
+  { input: '<img src="javascript:alert(1)">', output: '<img>' },
+  { input: '<img src="img.png">', output: '<img src="img.png">' },
+]
+
+describe('remarkSanitize', () => {
+  testCases.forEach((tc) => {
+    it('should return proper sanitized value', () => {
+      const node = {
+        value: tc.input
+      };
+
+      // mock implementation
+      (visit as jest.Mock)
+        .mockImplementation((_tree: any, _name: string, callback: (node: any) => void) => { callback(node) })
+
+      const remark = remarkSanitize()
+      remark({} as Node)
+      expect(node).toEqual({
+        ...node,
+        value: tc.output,
+      })
+    })
+  })
+})