Update vulnerable dependencies, simplify Markdown parsing

The `react-markdown` update was non-trivial, so I decided it'd be a
better use of time to just replace it wholesale with Marked. Also,
DOMPurify just happened to already exist, so adding it as a dependency
doesn't actually bloat the bundle any.

Also added a couple features:

- GitHub Flavored Markdown is now supported
- Headers in custom content fragments now include IDs prefixed with
  `header-`, so you can reference things like `# Section Header` via
  `#header-section-header`.

Author: amazon-meaisiah

dev-portal/package-lock.json

@@ -3,17 +3,18 @@
   "version": "4.0.4",
   "private": true,
   "dependencies": {
-    "chart.js": "^2.7.2",
+    "chart.js": "^2.9.4",
+    "dompurify": "^2.2.8",
     "front-matter": "^3.0.0",
     "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.19",
+    "lodash": "^4.17.21",
+    "marked": "^2.0.4",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",
     "object-hash": "^2.0.3",
     "query-string": "^6.12.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "react-markdown": "^4.0.3",
     "react-router-dom": "^4.3.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^0.87.3",

dev-portal/package.json

@@ -1,13 +1,14 @@
 // Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react'
+import React, { useMemo } from 'react'
 
 // semantic-ui
 import { Button, Header, Image, Container } from 'semantic-ui-react'
 
 // markdown for external docs description
-import Markdown from 'react-markdown/with-html'
+import marked from 'marked'
+import DOMPurify from 'dompurify'
 
 // services
 import { subscribe, unsubscribe } from 'services/api-catalog'
@@ -22,6 +23,15 @@ import { store } from 'services/state.js'
 // Create the plugin that provides our layout component
 export const SwaggerLayoutPlugin = () => ({ components: { InfoContainer: InfoReplacement } })
 
+function Markdown ({ source }) {
+  const rendered = useMemo(() => DOMPurify.sanitize(marked(source, {
+    headerIds: false,
+    silent: true
+  })), [source])
+
+  return <div dangerouslySetInnerHTML={{ __html: rendered }} />
+}
+
 // replaces the InfoContainer component
 // https://github.com/swagger-api/swagger-ui/blob/dd3afdc45656bda2a64ae6a7f9bdad006ea98149/src/core/components/layouts/base.jsx
 

dev-portal/src/components/SwaggerUiLayout.jsx

@@ -1,7 +1,8 @@
 // Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react'
+import React, { useLayoutEffect, useRef } from 'react'
+import ReactDOM from 'react-dom'
 
 // react-router
 import { Link } from 'react-router-dom'
@@ -11,7 +12,7 @@ import { observable } from 'mobx'
 
 // markdown parsing
 import frontmatter from 'front-matter'
-import Markdown from 'react-markdown/with-html'
+import marked from 'marked'
 
 export const fragments = observable({})
 
@@ -22,8 +23,10 @@ export const loadFragments = () => {
 }
 
 /**
- *
- * Pre-load the custom-content markdown, parses its frontmatter, and renders it as JSX. This method is asynchronous and doesn't actually return anything -- instead, it acts on a MobX Observable -- the fragment. The fragment is an object with a `jsx` property that maps to the rendered component, and any number of other properties collected from the front-matter.
+ * Pre-load the custom-content markdown, parses its frontmatter, and renders it as JSX. This method
+ * is asynchronous and doesn't actually return anything -- instead, it acts on a MobX Observable --
+ * the fragment. The fragment is an object with a `jsx` property that maps to the rendered
+ * component, and any number of other properties collected from the front-matter.
  *
  * @param {String} path   Path to the file to load in. Should be a markdown file.
  * @param {String} fragment   Name of the fragment. Determines where rendered data gets stored.
@@ -36,34 +39,61 @@ function loadHtml (path, fragment) {
 
   window.fetch(path).then(response => response.text().then(text => {
     const parsedMarkdown = frontmatter(text)
+    const html = marked(parsedMarkdown.body, {
+      headerPrefix: 'header-',
+      silent: true
+    })
 
     fragments[fragment] = {
-      jsx: () => (
-        <Markdown
-          escapeHtml={false}
-          source={parsedMarkdown.body}
-          renderers={renderers}
-        />
-      ),
+      jsx: () => <ShowHTML html={html} />,
       ...parsedMarkdown.attributes
     }
   }))
 }
 
-/**
- * Renderers is a map of node type to component.
- *
- * In this case, we only override links. Any time react-markdown tries to render a link, it'll render this component. Normal links will work, but the cause a full page reload. We don't want that, so we can replacing them with react-router Links. However, replacing external links with react-router Links causes them to not work at all. We don't want that either, so we attempt to determine if a link is external or not, and use `Link` or `a` appropriately.
- */
-const renderers = {
-  link: ({ href, ...props }) => {
-    // if absolute url, use an `a` tag
-    // https://stackoverflow.com/a/19709846/4060061
-    if (/^(?:[a-z]+:)?\/\//i.test(href)) {
-      return <a href={href} target='_blank' rel='noopener noreferrer' {...props} />
+function ShowHTML ({ html }) {
+  /** @type {import("react").MutableRefObject<HTMLDivElement>} */
+  const ref = useRef()
+
+  // Easier to do it here than to use a separate `useMemo` hook.
+  useLayoutEffect(() => {
+    // Normal links will work, but the cause a full page reload. We don't want that, so we replace
+    // them with react-router Links. However, replacing external links with react-router Links
+    // causes them to not work at all. We don't want that either, so we attempt to determine if a
+    // link is external or not, and replace them as appropriate.
+
+    const mountPoints = []
+    const links = ref.current.getElementsByTagName('a')
+
+    for (let i = 0; i < links.length; i++) {
+      const link = links[i]
+      // if absolute url, use an `a` tag
+      // https://stackoverflow.com/a/19709846/4060061
+      if (/^(?:[a-z]+:)?\/\//i.test(link.href)) {
+        link.target = '_blank'
+        link.rel = 'noopener noreferrer'
+      } else {
+        // Replace links with react-router-dom tags so that they route correctly
+        const span = document.createElement('span')
+        // If there's CSS, don't listen to it.
+        span.style.setProperty('display', 'inline', 'important')
+        ReactDOM.render(<Link
+          to={link.href}
+          target={link.target}
+          dangerouslySetInnerHTML={{ __html: link.innerHTML }}
+        />, span)
+        link.replaceWith(span)
+        mountPoints.push(span)
+      }
+    }
+
+    // Gracefully unmount any mount points that were added
+    return () => {
+      mountPoints.forEach(elem => {
+        ReactDOM.render(null, elem)
+      })
     }
+  }, [])
 
-    // replace links with react-router-dom tags so that they
-    return <Link to={href} {...props} />
-  }
+  return <div ref={ref} dangerouslySetInnerHTML={{ __html: html }} />
 }