From 37406331e11ef34d07f6de7a927f3c1f88ca530d Mon Sep 17 00:00:00 2001
From: Jim O'Donnell <jim@zooniverse.org>
Date: Mon, 8 Jan 2024 10:08:17 +0000
Subject: [PATCH] [Security] Remove markdown-it-html5-embed - Add tests for
 images with audio and video URLs. - Remove `markdown-it-html5-embed`, which
 is quite old, depends on an outdated version of `markdown-it`, and loads in
 all of `mime-db` to check for audio or video URLs. - Replace `html5-embed`
 with `html5-media`, a plugin based on the `markdown-it-html5-media` plugin. -
 Use `mime/lite` to lookup MIME types for audio and video, in the browser.

---
 package-lock.json          |  52 ++----
 package.json               |   5 +-
 src/lib/html5-media.js     | 343 +++++++++++++++++++++++++++++++++++++
 src/lib/utils.js           |   4 +-
 test/use-markdownz-test.js |   2 +-
 test/utils-test.jsx        |  20 ++-
 6 files changed, 383 insertions(+), 43 deletions(-)
 create mode 100644 src/lib/html5-media.js

diff --git a/package-lock.json b/package-lock.json
index b220154..0dcb84a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,12 +16,12 @@
         "markdown-it-container": "~4.0.0",
         "markdown-it-emoji": "~3.0.0",
         "markdown-it-footnote": "~4.0.0",
-        "markdown-it-html5-embed": "~1.0.0",
         "markdown-it-imsize": "~2.0.1",
         "markdown-it-sub": "~2.0.0",
         "markdown-it-sup": "~2.0.0",
         "markdown-it-table-of-contents": "~0.6.0",
         "markdown-it-video": "~0.6.3",
+        "mime": "~3.0.0",
         "rehype": "~11.0.0",
         "rehype-react": "~6.2.1"
       },
@@ -5843,15 +5843,6 @@
       "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz",
       "integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ=="
     },
-    "node_modules/markdown-it-html5-embed": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/markdown-it-html5-embed/-/markdown-it-html5-embed-1.0.0.tgz",
-      "integrity": "sha512-SPgugO/1+/9sZcgxoxijoTHSUpCUgFCNe1MSuTmDxDkV6NQrVzMclhRMFgE/rcHO+2rhIg3U7Oy80XA/E8ytpg==",
-      "dependencies": {
-        "markdown-it": "^8.4.0",
-        "mimoza": "~1.0.0"
-      }
-    },
     "node_modules/markdown-it-imsize": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/markdown-it-imsize/-/markdown-it-imsize-2.0.1.tgz",
@@ -5885,6 +5876,17 @@
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
     },
+    "node_modules/mime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -5904,14 +5906,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/mimoza": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/mimoza/-/mimoza-1.0.0.tgz",
-      "integrity": "sha1-10qk/giTLwBeQwvce/z6lfyrTmI=",
-      "dependencies": {
-        "mime-db": "^1.6.0"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -12286,15 +12280,6 @@
       "resolved": "https://registry.npmjs.org/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz",
       "integrity": "sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ=="
     },
-    "markdown-it-html5-embed": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/markdown-it-html5-embed/-/markdown-it-html5-embed-1.0.0.tgz",
-      "integrity": "sha512-SPgugO/1+/9sZcgxoxijoTHSUpCUgFCNe1MSuTmDxDkV6NQrVzMclhRMFgE/rcHO+2rhIg3U7Oy80XA/E8ytpg==",
-      "requires": {
-        "markdown-it": "~14.0.0",
-        "mimoza": "~1.0.0"
-      }
-    },
     "markdown-it-imsize": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/markdown-it-imsize/-/markdown-it-imsize-2.0.1.tgz",
@@ -12325,6 +12310,11 @@
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
     },
+    "mime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
+      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A=="
+    },
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -12338,14 +12328,6 @@
         "mime-db": "1.52.0"
       }
     },
-    "mimoza": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/mimoza/-/mimoza-1.0.0.tgz",
-      "integrity": "sha1-10qk/giTLwBeQwvce/z6lfyrTmI=",
-      "requires": {
-        "mime-db": "^1.6.0"
-      }
-    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
diff --git a/package.json b/package.json
index 768451a..682d456 100644
--- a/package.json
+++ b/package.json
@@ -68,16 +68,13 @@
     "markdown-it-container": "~4.0.0",
     "markdown-it-emoji": "~3.0.0",
     "markdown-it-footnote": "~4.0.0",
-    "markdown-it-html5-embed": "~1.0.0",
     "markdown-it-imsize": "~2.0.1",
     "markdown-it-sub": "~2.0.0",
     "markdown-it-sup": "~2.0.0",
     "markdown-it-table-of-contents": "~0.6.0",
     "markdown-it-video": "~0.6.3",
+    "mime": "~3.0.0",
     "rehype": "~11.0.0",
     "rehype-react": "~6.2.1"
-  },
-  "overrides": {
-    "markdown-it": "~14.0.0"
   }
 }
diff --git a/src/lib/html5-media.js b/src/lib/html5-media.js
new file mode 100644
index 0000000..449b4bf
--- /dev/null
+++ b/src/lib/html5-media.js
@@ -0,0 +1,343 @@
+import mime from 'mime/lite';
+
+/**
+ * A minimalist `markdown-it` plugin for parsing video/audio references inside
+ * markdown image syntax as `<video>` / `<audio>` tags.
+ *
+ * @namespace HTML5Media
+ */
+
+/**
+ * @property {Object} messages
+ * @property {Object} messages.languageCode
+ *  a set of messages identified with a language code, typically an ISO639 code
+ * @property {String} messages.languageCode.messageKey
+ *  an individual translation of a message to that language, identified with a
+ *  message key
+ * @typedef {Object} MessagesObj
+ */
+let messages = {
+  en: {
+    'html5 video not supported': 'Your browser does not support playing HTML5 video.',
+    'html5 audio not supported': 'Your browser does not support playing HTML5 audio.',
+    'html5 media fallback link': 'You can <a href="%s" download>download the file</a> instead.',
+    'html5 media description': 'Here is a description of the content: %s'
+  }
+};
+
+/**
+ * You can override this function using options.translateFn.
+ *
+ * @param {String} language
+ *  a language code, typically an ISO 639-[1-3] code.
+ * @param {String} messageKey
+ *  an identifier for the message, typically a short descriptive text
+ * @param {String[]} messageParams
+ *  Strings to be substituted into the message using some pattern, e.g., %s or
+ *  %1$s, %2$s. By default we only use a simple %s pattern.
+ * @returns {String}
+ *  the translation to use
+ * @memberof HTML5Media
+ */
+let translate = function(language, messageKey, messageParams) {
+
+  // Revert back to English default if no message object, or no translation
+  // for this language
+  if (!messages[language] || !messages[language][messageKey])
+    language = 'en';
+
+  if (!messages[language])
+    return '';
+
+  let message = messages[language][messageKey] || '';
+
+  if (messageParams)
+    for (let param of messageParams)
+      message = message.replace('%s', param);
+
+  return message;
+};
+
+
+/**
+ * A fork of the built-in image tokenizer which guesses video/audio files based
+ * on their extension, and tokenizes them accordingly.
+ *
+ * @param {Object} state
+ *  Markdown-It state
+ * @param {Boolean} silent
+ *  if true, only validate, don't tokenize
+ * @param {MarkdownIt} md
+ *  instance of Markdown-It used for utility functions
+ * @returns {Boolean}
+ * @memberof HTML5Media
+ */
+function tokenizeImagesAndMedia(state, silent, md) {
+  let attrs, code, content, label, labelEnd, labelStart, pos, ref, res, title,
+    token, tokens, start;
+  let href = '',
+    oldPos = state.pos,
+    max = state.posMax;
+
+  // Exclamation mark followed by open square bracket - ![ - otherwise abort
+  if (state.src.charCodeAt(state.pos) !== 0x21 ||
+    state.src.charCodeAt(state.pos + 1) !== 0x5B)
+    return false;
+
+  labelStart = state.pos + 2;
+  labelEnd = state.md.helpers.parseLinkLabel(state, state.pos + 1, false);
+
+  // Parser failed to find ']', so it's not a valid link
+  if (labelEnd < 0)
+    return false;
+
+  pos = labelEnd + 1;
+  if (pos < max && state.src.charCodeAt(pos) === 0x28) { // Parenthesis: (
+    //
+    // Inline link
+    //
+
+    // [link](  <href>  "title"  )
+    //        ^^ skipping these spaces
+    pos++;
+    for (; pos < max; pos++) {
+      code = state.src.charCodeAt(pos);
+      if (!md.utils.isSpace(code) && code !== 0x0A) // LF \n
+        break;
+    }
+    if (pos >= max)
+      return false;
+
+    // [link](  <href>  "title"  )
+    //          ^^^^^^ parsing link destination
+    start = pos;
+    res = state.md.helpers.parseLinkDestination(state.src, pos, state.posMax);
+    if (res.ok) {
+      href = state.md.normalizeLink(res.str);
+      if (state.md.validateLink(href)) {
+        pos = res.pos;
+      } else {
+        href = '';
+      }
+    }
+
+    // [link](  <href>  "title"  )
+    //                ^^ skipping these spaces
+    start = pos;
+    for (; pos < max; pos++) {
+      code = state.src.charCodeAt(pos);
+      if (!md.utils.isSpace(code) && code !== 0x0A)
+        break;
+    }
+
+    // [link](  <href>  "title"  )
+    //                  ^^^^^^^ parsing link title
+    res = state.md.helpers.parseLinkTitle(state.src, pos, state.posMax);
+    if (pos < max && start !== pos && res.ok) {
+      title = res.str;
+      pos = res.pos;
+
+      // [link](  <href>  "title"  )
+      //                         ^^ skipping these spaces
+      for (; pos < max; pos++) {
+        code = state.src.charCodeAt(pos);
+        if (!md.utils.isSpace(code) && code !== 0x0A)
+          break;
+      }
+    } else {
+      title = '';
+    }
+
+    if (pos >= max || state.src.charCodeAt(pos) !== 0x29) { // Parenthesis: )
+      state.pos = oldPos;
+      return false;
+    }
+    pos++;
+  } else {
+    //
+    // Link reference
+    //
+    if (typeof state.env.references === 'undefined')
+      return false;
+
+    if (pos < max && state.src.charCodeAt(pos) === 0x5B) { // Bracket: [
+      start = pos + 1;
+      pos = state.md.helpers.parseLinkLabel(state, pos);
+      if (pos >= 0) {
+        label = state.src.slice(start, pos++);
+      } else {
+        pos = labelEnd + 1;
+      }
+    } else {
+      pos = labelEnd + 1;
+    }
+
+    // covers label === '' and label === undefined
+    // (collapsed reference link and shortcut reference link respectively)
+    if (!label)
+      label = state.src.slice(labelStart, labelEnd);
+
+    ref = state.env.references[md.utils.normalizeReference(label)];
+    if (!ref) {
+      state.pos = oldPos;
+      return false;
+    }
+    href = ref.href;
+    title = ref.title;
+  }
+
+  state.pos = pos;
+  state.posMax = max;
+
+  if (silent)
+    return true;
+
+  // We found the end of the link, and know for a fact it's a valid link;
+  // so all that's left to do is to call tokenizer.
+  content = state.src.slice(labelStart, labelEnd);
+
+  state.md.inline.parse(
+    content,
+    state.md,
+    state.env,
+    tokens = []
+  );
+
+  const mediaType = guessMediaType(href);
+  const tag = mediaType == 'image' ? 'img' : mediaType;
+
+  token = state.push(`html5${mediaType}`, tag, 0);
+  token.attrs = attrs = [
+    ['src', href]
+  ];
+  if (mediaType == 'image')
+    attrs.push(['alt', '']);
+  token.children = tokens;
+  token.content = content;
+
+  if (title)
+    attrs.push(['title', title]);
+
+  state.pos = pos;
+  state.posMax = max;
+  return true;
+
+}
+
+
+/**
+ * Guess the media type represented by a URL based on the file extension,
+ * if any
+ *
+ * @param {String} url
+ *  any valid URL
+ * @returns {String}
+ *  a type identifier: 'image' (default for all unrecognized URLs), 'audio'
+ *  or 'video'
+ * @memberof HTML5Media
+ */
+function guessMediaType(url) {
+  const mimeType = mime.getType(url);
+  const [type, format] = mimeType.split('/');
+  return type;
+}
+
+
+/**
+ * Render tokens of the video/audio type to HTML5 tags
+ *
+ * @param {Object} tokens
+ *  token stream
+ * @param {Number} idx
+ *  which token are we rendering
+ * @param {Object} options
+ *  Markdown-It options, including this plugin's settings
+ * @param {Object} env
+ *  Markdown-It environment, potentially including language setting
+ * @param {MarkdownIt} md
+ *  instance used for utilities access
+ * @returns {String}
+ *  rendered token
+ * @memberof HTML5Media
+ */
+function renderMedia(tokens, idx, options, env, md) {
+  const token = tokens[idx];
+  const type = token.type;
+  const tag = token.tag;
+  if (type !== 'html5video' && type !== 'html5audio')
+    return '';
+  let attrs = options.html5Media[`${tag}Attrs`].trim();
+  if (attrs)
+    attrs = ' ' + attrs;
+
+  // We'll always have a URL for non-image media: they are detected by URL
+  const url = token.attrs[token.attrIndex('src')][1];
+
+  // Title is set like this: ![descriptive text](video.mp4 "title")
+  const title = token.attrIndex('title') != -1 ?
+    ` title="${md.utils.escapeHtml(token.attrs[token.attrIndex('title')][1])}"` :
+    '';
+
+  const fallbackText =
+    translate(env.language, `html5 ${tag} not supported`) + '\n' +
+    translate(env.language, 'html5 media fallback link', [url]);
+
+  const description = token.content ?
+    '\n' + translate(env.language, 'html5 media description', [md.utils.escapeHtml(token.content)]) :
+    '';
+
+  return `<${tag} src="${url}"${title}${attrs}>\n` +
+    `${fallbackText}${description}\n` +
+    `</${tag}>`;
+}
+
+
+/**
+ * The main plugin function, exported as module.exports
+ *
+ * @param {MarkdownIt} md
+ *  instance, automatically passed by md.use
+ * @param {Object} [options]
+ *  configuration
+ * @param {String} [options.videoAttrs='controls class="html5-video-player"']
+ *  attributes to include inside `<video>` tags
+ * @param {String} [options.audioAttrs='controls class="html5-audio-player"']
+ *  attributes to include inside `<audio>` tags
+ * @param {MessagesObj} [options.messages=built-in messages]
+ *  human-readable text that is part of the output
+ * @memberof HTML5Media
+ */
+function html5Media(md, options = {}) {
+  if (options.messages)
+    messages = options.messages;
+  if (options.translateFn)
+    translate = options.translateFn;
+
+  const videoAttrs = options.videoAttrs !== undefined ?
+    options.videoAttrs :
+    'controls class="html5-video-player"';
+  const audioAttrs = options.audioAttrs !== undefined ?
+    options.audioAttrs :
+    'controls class="html5-audio-player"';
+
+  md.inline.ruler.at('image', (tokens, silent) => tokenizeImagesAndMedia(tokens, silent, md));
+
+  /*
+    New `html5video` and `html5audio` tokens to represent image tokens
+    with video and audio URLs.
+  */
+  md.renderer.rules.html5video = md.renderer.rules.html5audio =
+    (tokens, idx, opt, env) => {
+      opt.html5Media = {
+        videoAttrs,
+        audioAttrs
+      };
+      return renderMedia(tokens, idx, opt, env, md);
+    };
+}
+
+module.exports = {
+  html5Media,
+  messages, // For partial customization of messages
+  guessMediaType
+};
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 6e3535d..452194d 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -8,7 +8,6 @@ import markdownImsize from 'markdown-it-imsize';
 import markdownVideo from 'markdown-it-video';
 import markdownTableOfContents from 'markdown-it-table-of-contents';
 import markdownAnchor from 'markdown-it-anchor';
-import html5Embed from 'markdown-it-html5-embed';
 import twemoji from '@twemoji/api';
 import { sanitize } from 'isomorphic-dompurify';
 
@@ -16,6 +15,7 @@ import { Fragment, createElement } from 'react';
 import rehype from 'rehype';
 import rehype2react from 'rehype-react';
 
+import { html5Media } from './html5-media';
 import markdownNewTab from './links-in-new-tabs';
 import relNofollow from './links-rel-nofollow';
 import replaceSymbols from './default-transformer';
@@ -39,7 +39,7 @@ export function markdownz() {
     .use(markdownTableOfContents)
     .use(MarkdownItContainer, 'partners')
     .use(MarkdownItContainer, 'attribution')
-    .use(html5Embed, {});
+    .use(html5Media);
 }
 
 const baseRenderer = markdownz();
diff --git a/test/use-markdownz-test.js b/test/use-markdownz-test.js
index 33318ea..c9f400b 100644
--- a/test/use-markdownz-test.js
+++ b/test/use-markdownz-test.js
@@ -93,7 +93,7 @@ describe('useMarkdownz', () => {
     expect(markdownDiv.innerHTML).to.equal('<a rel="noopener nofollow noreferrer" target="_blank" href="https://www.example.com">Test</a>');
   });
 
-  it('embeds YoutTube videos with modified image syntax', function () {
+  it('embeds YouTube videos with modified image syntax', function () {
     const md = TestUtils.renderIntoDocument(
       <TestComponent inline>
         @[youtube](dQw4w9WgXcQ)
diff --git a/test/utils-test.jsx b/test/utils-test.jsx
index 29c0f75..314f7cc 100644
--- a/test/utils-test.jsx
+++ b/test/utils-test.jsx
@@ -42,7 +42,25 @@ describe('Utilities', () => {
         expect(html).to.equal('<a rel="noopener nofollow noreferrer" target="_blank" href="https://www.example.com">Test</a>');
     });
 
-    it('embeds YoutTube videos with modified image syntax', function () {
+    it('embeds HTML5 video with modified image syntax', function () {
+      const html = utils.getHtml({ content: '![This is a video file.](https://panoptes-uploads.zooniverse.org/someVideo.mp4)', inline: true });
+        expect(html).to.equal(`<video class="html5-video-player" controls="" src="https://panoptes-uploads.zooniverse.org/someVideo.mp4">
+Your browser does not support playing HTML5 video.
+You can <a download="" href="https://panoptes-uploads.zooniverse.org/someVideo.mp4">download the file</a> instead.
+Here is a description of the content: This is a video file.
+</video>`);
+    });
+
+    it('embeds HTML5 audio with modified image syntax', function () {
+      const html = utils.getHtml({ content: '![This is an audio file.](https://panoptes-uploads.zooniverse.org/someAudio.mp3)', inline: true });
+        expect(html).to.equal(`<audio class="html5-audio-player" controls="" src="https://panoptes-uploads.zooniverse.org/someAudio.mp3">
+Your browser does not support playing HTML5 audio.
+You can <a download="" href="https://panoptes-uploads.zooniverse.org/someAudio.mp3">download the file</a> instead.
+Here is a description of the content: This is an audio file.
+</audio>`);
+    });
+
+    it('embeds YouTube videos with modified image syntax', function () {
       const html = utils.getHtml({ content: '@[youtube](dQw4w9WgXcQ)', inline: true });
         expect(html).to.equal('<div class="embed-responsive embed-responsive-16by9"><iframe allowfullscreen="" src="https://www.youtube.com/embed/dQw4w9WgXcQ" height="390" width="640" type="text/html" class="embed-responsive-item youtube-player"></iframe></div>');
     });