Fix: Unsafe HTML Content Could Allow Malicious Code Injection in src/core/plugins/oas3/wrap-components/markdown.jsx

package.json

@@ -124,6 +124,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
     "@release-it/conventional-changelog": "=8.0.2",
     "@svgr/webpack": "=8.1.0",
+    "@types/dompurify": "=3.2.0",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^9.2.1",
     "babel-plugin-lodash": "=3.3.4",
@@ -171,9 +172,9 @@
     "oauth2-server": "^2.4.1",
     "open": "^10.1.0",
     "postcss": "^8.5.3",
-    "postcss-scss": "^4.0.9",
     "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^10.1.6",
+    "postcss-scss": "^4.0.9",
     "prettier": "^3.5.3",
     "process": "^0.11.10",
     "react-refresh": "^0.17.0",

src/core/plugins/oas3/wrap-components/markdown.jsx

@@ -1,45 +1,40 @@
 import React from "react"
 import PropTypes from "prop-types"
-import cx from "classnames"
-import { Remarkable } from "remarkable"
-import { OAS3ComponentWrapFactory } from "../helpers"
-import { sanitizer } from "core/components/providers/markdown"
+import DOMPurify from "dompurify"
 
-const parser = new Remarkable("commonmark")
-parser.block.ruler.enable(["table"])
-parser.set({ linkTarget: "_blank" })
+export default (Original, system) => (props) => {
+  const { getComponent, getStore } = system
+  const { fn } = getStore().getState()
+  const { source, className = "", getConfigs = () => ({}) } = props
+  const configs = getConfigs()
 
-export const Markdown = ({ source, className = "", getConfigs = () => ({ useUnsafeMarkdown: false }) }) => {
-  if(typeof source !== "string") {
+  if (typeof source !== "string") {
     return null
   }
 
-  if ( source ) {
-    const { useUnsafeMarkdown } = getConfigs()
-    const html = parser.render(source)
-    const sanitized = sanitizer(html, { useUnsafeMarkdown })
+  if (source === "") {
+    return null
+  }
 
-    let trimmed
+  const MarkdownComponent = getComponent("Markdown", true)
+  const NewlineComponent = getComponent("Newline", true)
 
-    if(typeof sanitized === "string") {
-      trimmed = sanitized.trim()
-    }
+  const html = fn.getMarkdownParser()(source || "")
+  const sanitizedHtml = DOMPurify.sanitize(html)
 
+  if (typeof html === "string") {
     return (
       <div
-        dangerouslySetInnerHTML={{
-          __html: trimmed
-        }}
-        className={cx(className, "renderedMarkdown")}
+        className={className}
+        dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
       />
     )
   }
-  return null
-}
-Markdown.propTypes = {
-  source: PropTypes.string,
-  className: PropTypes.string,
-  getConfigs: PropTypes.func,
-}
 
-export default OAS3ComponentWrapFactory(Markdown)
+  return (
+    <div className={className}>
+      <MarkdownComponent source={source} />
+      <NewlineComponent />
+    </div>
+  )
+}