Prevent usage of dangerouslySetInnerHTML (#22201)

airbytehq · Feb 1, 2023 · ca0792d · ca0792d
1 parent 9757937
commit ca0792d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/airbyte-webapp/.eslintrc.js b/airbyte-webapp/.eslintrc.js
@@ -84,6 +84,7 @@ module.exports = {
       },
     ],
     "jest/consistent-test-it": ["warn", { fn: "it", withinDescribe: "it" }],
+    "react/no-danger": "error",
     "react/jsx-boolean-value": "warn",
     "react/jsx-curly-brace-presence": "warn",
     "react/jsx-fragments": "warn",

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.tsx b/airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableCell.tsx
@@ -27,6 +27,9 @@ const TooltipText: React.FC<{ textNodes: Element[] }> = ({ textNodes }) => {
     return null;
   }
   const text = textNodes.map((t) => decodeURIComponent(t.innerHTML)).join(" | ");
+  // This is not a safe use, and need to be removed still.
+  // https://github.com/airbytehq/airbyte/issues/22196
+  // eslint-disable-next-line react/no-danger
   return <div dangerouslySetInnerHTML={{ __html: text }} />;
 };
 

diff --git a/airbyte-webapp/src/components/ui/TextWithHTML/TextWithHTML.tsx b/airbyte-webapp/src/components/ui/TextWithHTML/TextWithHTML.tsx
@@ -26,5 +26,8 @@ export const TextWithHTML: React.FC<TextWithHTMLProps> = ({ text, className }) =
     },
   });
 
+  // Since we use `sanitize-html` above to sanitize this string from all dangerous HTML, we're safe to
+  // set this here via `dangerouslySetInnerHTML`
+  // eslint-disable-next-line react/no-danger
   return <span className={className} dangerouslySetInnerHTML={{ __html: sanitizedHtmlText }} />;
 };