@heliosgraphics/ui 2.0.1-alpha.5 → 2.0.1-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.5",
+	"version": "2.0.1-alpha.6",
 	"type": "module",
 	"sideEffects": [
 		"*.css",

package/utils/markdown.spec.ts

@@ -5,7 +5,37 @@ describe("markdown", () => {
 	describe("renderMarkdown", () => {
 		const SAMPLE = `Hello\n\nHey`
 		const SAMPLE_OUTPUT = `<p>Hello</p>\n<p>Hey</p>\n`
+		const MALICIOUS_SAMPLE = `Hello <script>alert(1)</script> **world**`
+		const MALICIOUS_SAMPLE_OUTPUT = `<p>Hello  <strong>world</strong></p>`
+		const MALICIOUS_LINK_SAMPLE = `[x](data:text/html,<script>alert(1)</script>)`
+		const MALICIOUS_LINK_SAMPLE_OUTPUT = `<p>x</p>\n`
+		const MALICIOUS_EVENT_HANDLER_SAMPLE = `<div onclick="alert(1)">hi</div>`
+		const MALICIOUS_EVENT_HANDLER_SAMPLE_OUTPUT = `<div>hi</div>`
 
 		it("Returns", () => expect(renderMarkdown(SAMPLE)).toEqual(SAMPLE_OUTPUT))
+
+		it("strips unsafe html from markdown output", () => {
+			const result = renderMarkdown(MALICIOUS_SAMPLE)
+
+			expect(result).toContain(MALICIOUS_SAMPLE_OUTPUT)
+			expect(result).not.toContain("<script")
+			expect(result).not.toContain("alert(1)")
+		})
+
+		it("strips unsafe link protocols without leaving broken markup", () => {
+			const result = renderMarkdown(MALICIOUS_LINK_SAMPLE)
+
+			expect(result).toEqual(MALICIOUS_LINK_SAMPLE_OUTPUT)
+			expect(result).not.toContain("data:")
+			expect(result).not.toContain("<script")
+		})
+
+		it("removes inline event handler attributes from raw html", () => {
+			const result = renderMarkdown(MALICIOUS_EVENT_HANDLER_SAMPLE)
+
+			expect(result).toEqual(MALICIOUS_EVENT_HANDLER_SAMPLE_OUTPUT)
+			expect(result).not.toContain("onclick")
+			expect(result).not.toContain("alert(1)")
+		})
 	})
 })

package/utils/markdown.ts

@@ -1,10 +1,23 @@
 import { Marked } from "marked"
 import { markedXhtml } from "marked-xhtml"
 import markedLinkifyIt from "marked-linkify-it"
+import { sanitizeText } from "@heliosgraphics/utils"
 
 const marked = new Marked({ breaks: true, gfm: true })
+const SAFE_MARKDOWN_LINK_PATTERN: RegExp = /^(?:https?:|mailto:|tel:|\/|#)/i
 
 marked.use(markedXhtml())
 marked.use(markedLinkifyIt())
 
-export const renderMarkdown = (text: string): string => marked.parse(text) as string
+const stripUnsafeMarkdownLinks = (html: string): string => {
+	return html.replace(/<a\b[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gi, (match: string, href: string, text: string) => {
+		return SAFE_MARKDOWN_LINK_PATTERN.test(href) ? match : text
+	})
+}
+
+export const renderMarkdown = (text: string): string => {
+	const renderedMarkdown: string = marked.parse(text) as string
+	const sanitizedMarkdown: string = sanitizeText(stripUnsafeMarkdownLinks(renderedMarkdown))
+
+	return renderedMarkdown.endsWith("\n") ? `${sanitizedMarkdown}\n` : sanitizedMarkdown
+}