Merge pull request from GHSA-3hjm-9277-5c88

jczhong84 · web-flow · commit 449bdc9e7d67 · 2024-02-27T20:05:37.000-08:00
* Fix XSS vulnerabilities

* remove console.log
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "querybook",
-    "version": "3.31.1",
+    "version": "3.31.2",
     "description": "A Big Data Webapp",
     "private": true,
     "scripts": {
@@ -50,6 +50,7 @@
         "core-js": "^3.19.1",
         "cron-parser": "^4.7.0",
         "dagre": "^0.8.5",
+        "dompurify": "^3.0.9",
         "draft-js": "0.11.7",
         "draft-js-export-html": "^1.4.1",
         "draft-js-import-html": "^1.4.1",
diff --git a/querybook/webapp/components/DataDocStatementExecution/StatementLog.tsx b/querybook/webapp/components/DataDocStatementExecution/StatementLog.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import DOMPurify from 'dompurify';
 import { debounce } from 'lodash';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -103,7 +104,9 @@ export const StatementLog: React.FunctionComponent<IStatementLogProps> = ({
             }}
             className="statement-execution-log-container"
             dangerouslySetInnerHTML={{
-                __html: logText,
+                __html: DOMPurify.sanitize(logText, {
+                    USE_PROFILES: { html: true },
+                }),
             }}
         />
     );
diff --git a/querybook/webapp/components/Search/SearchResultItem.tsx b/querybook/webapp/components/Search/SearchResultItem.tsx
@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 import { escape, escapeRegExp } from 'lodash';
 import React, { useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -55,7 +56,9 @@ const HighlightTitle: React.FunctionComponent<{
             <div
                 className="result-item-title"
                 dangerouslySetInnerHTML={{
-                    __html: highlightedTitle,
+                    __html: DOMPurify.sanitize(highlightedTitle, {
+                        USE_PROFILES: { html: true },
+                    }),
                 }}
             />
         </AccentText>
@@ -166,8 +169,9 @@ export const QueryItem: React.FunctionComponent<IQueryItemProps> = ({
             {!isQueryTextExpanded ? (
                 <span
                     dangerouslySetInnerHTML={{
-                        __html: formatHighlightStrings(
-                            queryTextHighlightedContent
+                        __html: DOMPurify.sanitize(
+                            formatHighlightStrings(queryTextHighlightedContent),
+                            { USE_PROFILES: { html: true } }
                         ),
                     }}
                 />
@@ -281,7 +285,10 @@ export const DataDocItem: React.FunctionComponent<IDataDocItemProps> = ({
         <span
             className="result-item-description"
             dangerouslySetInnerHTML={{
-                __html: formatHighlightStrings(dataDocContent),
+                __html: DOMPurify.sanitize(
+                    formatHighlightStrings(dataDocContent),
+                    { USE_PROFILES: { html: true } }
+                ),
             }}
         />
     );
@@ -381,7 +388,10 @@ export const DataTableItem: React.FunctionComponent<IDataTableItemProps> = ({
     const descriptionDOM = highlightedDescription ? (
         <span
             dangerouslySetInnerHTML={{
-                __html: formatHighlightStrings(highlightedDescription),
+                __html: DOMPurify.sanitize(
+                    formatHighlightStrings(highlightedDescription),
+                    { USE_PROFILES: { html: true } }
+                ),
             }}
         />
     ) : (
@@ -484,7 +494,10 @@ export const BoardItem: React.FunctionComponent<{
     const descriptionDOM = highlightedDescription ? (
         <span
             dangerouslySetInnerHTML={{
-                __html: formatHighlightStrings(highlightedDescription),
+                __html: DOMPurify.sanitize(
+                    formatHighlightStrings(highlightedDescription),
+                    { USE_PROFILES: { html: true } }
+                ),
             }}
         />
     ) : (
diff --git a/querybook/webapp/lib/sql-helper/sql-autocompleter.ts b/querybook/webapp/lib/sql-helper/sql-autocompleter.ts
@@ -1,10 +1,11 @@
 import { getLanguageSetting, ILanguageSetting } from './sql-setting';
+import DOMPurify from 'dompurify';
+import { bind } from 'lodash-decorators';
 
 import CodeMirror from 'lib/codemirror';
 import { ICodeAnalysis, TableToken } from 'lib/sql-helper/sql-lexer';
 import { reduxStore } from 'redux/store';
 import { SearchTableResource } from 'resource/search';
-import { bind } from 'lodash-decorators';
 
 interface ILineAnalysis {
     statementNum: number;
@@ -408,14 +409,17 @@ export class SqlAutoCompleter {
 
         const div = document.createElement('div');
         div.className = 'code-editor-autocomplete-wrapper';
-        div.innerHTML = `
+        div.innerHTML = DOMPurify.sanitize(
+            `
             <span class="code-editor-autocomplete-span code-editor-text-span">
                 ${text}
             </span>
             <span class="code-editor-autocomplete-span code-editor-tooltip-span">
                 ${tooltip}
             </span>
-        `;
+        `,
+            { USE_PROFILES: { html: true } }
+        );
 
         element.appendChild(div);
     }
diff --git a/yarn.lock b/yarn.lock
@@ -9345,6 +9345,11 @@ domhandler@^4.0.0, domhandler@^4.2.0:
   dependencies:
     domelementtype "^2.2.0"
 
+dompurify@^3.0.9:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.0.9.tgz#b3f362f24b99f53498c75d43ecbd784b0b3ad65e"
+  integrity sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ==
+
 domutils@1.1:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
