Merge pull request #3941 from RedisInsight/fe/feature/RI-6132

#RI-6132 - update sanitizer

Author: mariasergeenko

package.json

@@ -98,6 +98,7 @@
     "@types/classnames": "^2.2.11",
     "@types/d3": "^7.4.0",
     "@types/detect-port": "^1.3.0",
+    "@types/dompurify": "^3.0.5",
     "@types/electron-store": "^3.2.0",
     "@types/express": "^4.17.3",
     "@types/file-saver": "^2.0.5",
@@ -220,6 +221,7 @@
     "d3": "^7.6.1",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
+    "dompurify": "^3.1.7",
     "electron-context-menu": "^3.1.0",
     "electron-log": "^4.2.4",
     "electron-store": "^8.0.0",

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import cx from 'classnames'
-import { EuiListGroup, EuiText } from '@elastic/eui'
+import { EuiListGroup } from '@elastic/eui'
 import { isArray } from 'lodash'
 import { useParams } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
@@ -147,7 +147,7 @@ const Navigation = (props: Props) => {
             testId={id || label}
             label={label}
             summary={summary}
-            {...args}
+            path={args?.path}
           >
             {args?.content || label}
           </InternalLink>

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

@@ -1,57 +1,36 @@
 import { visit } from 'unist-util-visit'
+import DOMPurify from 'dompurify'
+import { IS_ABSOLUTE_PATH } from 'uiSrc/constants/regex'
+
+const isOpeningTag = (value: string) =>
+  value.startsWith('<') && !value.startsWith('</') && value.endsWith('>')
+const removeClosingTag = (value: string) => value.replace(/<\/[a-zA-Z][^>]*>/g, '')
+const isContainsClosingTag = (value: string) => value.indexOf('</') > -1
+
+DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
+  if (node.tagName === 'A' && node.hasAttribute('href')) {
+    if (!IS_ABSOLUTE_PATH.test(node.getAttribute('href') || '')) {
+      node.removeAttribute('href')
+      return
+    }
 
-const permittedAttibutes = [
-  'dangerouslySetInnerHTML'
-]
-
-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('|')
-
-// Define an array of potentially dangerous tags
-const dangerousTags = ['script', 'iframe', 'object', 'embed', 'link', 'style', 'meta']
+    node.setAttribute('target', '_blank')
+  }
+})
 
 export const remarkSanitize = (): (tree: Node) => void => (tree: any) => {
   visit(tree, 'html', (node) => {
     const inputTag = node.value.toLowerCase()
 
-    // remove dangerous tags
-    if (dangerousTags.some((tag) => inputTag.startsWith(`<${tag}`))) {
-      node.value = ''
-      return
-    }
-
-    // remove permitted attributes
-    if (permittedAttibutes.some((attr) => node.value.includes(`${attr}=`))) {
+    // JUST BANNED
+    if (inputTag.indexOf('dangerouslysetinnerhtml') > -1) {
       node.value = ''
-      return
     }
 
-    // sanitize dangerous attributes
-    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 ''
-      })
+    if (isOpeningTag(inputTag)) {
+      const isTagContainsClosing = isContainsClosingTag(inputTag)
+      const sanitized = DOMPurify.sanitize(node.value)
+      node.value = isTagContainsClosing ? sanitized : removeClosingTag(sanitized)
     }
   })
 }

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

@@ -5,13 +5,15 @@ jest.mock('unist-util-visit')
 
 const testCases = [
   { input: '', output: '' },
-  { input: '<a href="https://localhost">', output: '<a href="https://localhost">' },
+  { input: '<a href="https://localhost">', output: '<a href="https://localhost" target="_blank">' },
+  { input: '<a href="/settings">', output: '<a>' },
   { 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">' },
   { input: '<div dangerouslySetInnerHTML={{"__html": "<img src=x onerror=alert(\'this.still.works\')>"}} />', output: '' },
   { input: '<script>', output: '' },
+  { input: '<script>alert(1)</script>', output: '' },
 ]
 
 describe('remarkSanitize', () => {

yarn.lock

@@ -2604,6 +2604,13 @@
   resolved "https://registry.yarnpkg.com/@types/detect-port/-/detect-port-1.3.2.tgz#8c06a975e472803b931ee73740aeebd0a2eb27ae"
   integrity sha512-xxgAGA2SAU4111QefXPSp5eGbDm/hW6zhvYl9IeEPZEry9F4d66QAHm5qpUXjb6IsevZV/7emAEx5MhP6O192g==
 
+"@types/dompurify@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.0.5.tgz#02069a2fcb89a163bacf1a788f73cb415dd75cb7"
+  integrity sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==
+  dependencies:
+    "@types/trusted-types" "*"
+
 "@types/electron-store@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@types/electron-store/-/electron-store-3.2.0.tgz#7fb722425b8df3560ebab86709eb03864833e9e7"
@@ -3105,6 +3112,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/trusted-types@*":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
@@ -5654,6 +5666,11 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
+dompurify@^3.1.7:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.7.tgz#711a8c96479fb6ced93453732c160c3c72418a6a"
+  integrity sha512-VaTstWtsneJY8xzy7DekmYWEOZcmzIe3Qb3zPd4STve1OBTa+e+WmS1ITQec1fZYXI3HCsOZZiSMpG6oxoWMWQ==
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"