fix(hoveroverlay): do not sanitize syntax highlighting away

Author: felixfbecker

src/helpers.test.ts

@@ -1,10 +1,28 @@
+// Bring in all languages for testing
+import 'highlight.js'
+
 import assert from 'assert'
-import { highlightCodeSafe } from './helpers'
+import { highlightCodeSafe, renderMarkdown } from './helpers'
 
 describe('helpers', () => {
     describe('highlightCodeSafe()', () => {
         it('escapes HTML and does not attempt to highlight plaintext', () => {
             assert.strictEqual(highlightCodeSafe('foo<"bar>', 'plaintext'), 'foo&lt;"bar&gt;')
         })
     })
+    describe('renderMarkdown()', () => {
+        it('renders markdown and sanitizes dangerous elements', () => {
+            const markdown = 'You have been <script>alert("Pwned!")</script>'
+            const rendered = renderMarkdown(markdown)
+            assert.strictEqual(rendered, '<p>You have been </p>\n')
+        })
+        it('renders markdown without sanitizing syntax highlighting away', () => {
+            const markdown = ['Example:', '```javascript', 'const foo = 123', '```'].join('\n')
+            const rendered = renderMarkdown(markdown)
+            assert.strictEqual(
+                rendered,
+                '<p>Example:</p>\n<pre><code class="language-javascript"><span class="hljs-keyword">const</span> foo = <span class="hljs-number">123</span></code></pre>\n'
+            )
+        })
+    })
 })

src/helpers.ts

@@ -91,15 +91,20 @@ export const highlightCodeSafe = (code: string, language?: string): string => {
  * Renders the given markdown to HTML, highlighting code and sanitizing dangerous HTML.
  * Can throw an exception on parse errors.
  */
-export const renderMarkdown = (markdown: string): string =>
-    sanitize(
-        marked(markdown, {
-            gfm: true,
-            breaks: true,
-            sanitize: false,
-            highlight: (code, language) => '<code>' + highlightCodeSafe(code, language) + '</code>',
-        })
-    )
+export const renderMarkdown = (markdown: string): string => {
+    const rendered = marked(markdown, {
+        gfm: true,
+        breaks: true,
+        sanitize: false,
+        highlight: (code, language) => highlightCodeSafe(code, language),
+    })
+    return sanitize(rendered, {
+        allowedTags: [...sanitize.defaults.allowedTags, 'span'],
+        allowedClasses: {
+            '*': [/^hljs-.+/ as any],
+        },
+    })
+}
 
 /**
  * Converts a synthetic React event to a persisted, native Event object.