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

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Helios Graphics
+Copyright (c) 2016 Helios Graphics
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/components/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import { getTypographyUtility } from "../Text/Text.utils"
+import { getTypographyUtility, stripTypographyProps } from "../Text/Text.utils"
 import { getClasses } from "@heliosgraphics/utils"
 import { H0 } from "./components/H0"
 import { H1 } from "./components/H1"
@@ -9,7 +9,7 @@ import { H5 } from "./components/H5"
 import { H6 } from "./components/H6"
 import styles from "./Heading.module.css"
 import type { HeadingProps } from "./Heading.types"
-import type { FC, CSSProperties } from "react"
+import type { FC, CSSProperties, HTMLAttributes } from "react"
 
 export const Heading: FC<HeadingProps> = (props) => {
 	const { level, lineClamp, lineHeight, style, className, ...rest } = props
@@ -19,10 +19,7 @@ export const Heading: FC<HeadingProps> = (props) => {
 		[styles.headingSecondary]: props.emphasis === "secondary",
 		[styles.headingTertiary]: props.emphasis === "tertiary",
 	})
-	const utility: string = getTypographyUtility({
-		...props,
-		className: headingClasses,
-	})
+	const utility: string = getTypographyUtility(props, headingClasses)
 	const lineClampStyle: CSSProperties | undefined = lineClamp
 		? {
 				display: "-webkit-box",
@@ -38,9 +35,11 @@ export const Heading: FC<HeadingProps> = (props) => {
 		style || lineClampStyle || lineHeightStyle
 			? { ...(style || {}), ...(lineClampStyle || {}), ...(lineHeightStyle || {}) }
 			: undefined
+	const safeHeadingProps: Omit<HeadingProps, "level" | "lineClamp" | "lineHeight" | "className" | "style"> =
+		stripTypographyProps(rest)
 
-	const allProps: Omit<HeadingProps, "level"> = {
-		...rest,
+	const allProps: HTMLAttributes<HTMLHeadingElement> = {
+		...safeHeadingProps,
 		children: props.children,
 		style: mergedStyle,
 		className: utility,

package/components/Text/Text.tsx

@@ -17,10 +17,7 @@ export const Text: FC<TextProps> = (props) => {
 		[styles.textInherit]: props.emphasis === "inherit",
 	})
 
-	const utility: string = getTypographyUtility({
-		...props,
-		className: textClasses,
-	})
+	const utility: string = getTypographyUtility(props, textClasses)
 	const lineClampStyle: object | undefined = props.lineClamp
 		? {
 				display: "-webkit-box",

package/components/Text/Text.utils.ts

@@ -1,7 +1,54 @@
-import type { TextProps } from "./Text.types"
+import type { TextBaseProps, TextProps } from "./Text.types"
 import type { HeadingProps } from "../Heading/Heading.types"
 
-export const _getFontWeight = (fw: TextProps["fontWeight"]): string => {
+export interface TypographyUtilityInput {
+	emphasis?: TextBaseProps["emphasis"] | undefined
+	fontFamily?: TextBaseProps["fontFamily"] | undefined
+	fontStyle?: TextBaseProps["fontStyle"] | undefined
+	fontWeight?: TextBaseProps["fontWeight"] | undefined
+	isBalanced?: TextBaseProps["isBalanced"] | undefined
+	isEllipsis?: TextBaseProps["isEllipsis"] | undefined
+	isNonSelectable?: TextBaseProps["isNonSelectable"] | undefined
+	textAlign?: TextBaseProps["textAlign"] | undefined
+	textDecoration?: TextBaseProps["textDecoration"] | undefined
+	whiteSpace?: TextBaseProps["whiteSpace"] | undefined
+	wordWrap?: TextBaseProps["wordWrap"] | undefined
+}
+
+export const stripTypographyProps = <T extends TypographyUtilityInput>(
+	props: T,
+): Omit<T, keyof TypographyUtilityInput> => {
+	const {
+		emphasis,
+		fontFamily,
+		fontStyle,
+		fontWeight,
+		isBalanced,
+		isEllipsis,
+		isNonSelectable,
+		textAlign,
+		textDecoration,
+		whiteSpace,
+		wordWrap,
+		...rest
+	} = props
+
+	void emphasis
+	void fontFamily
+	void fontStyle
+	void fontWeight
+	void isBalanced
+	void isEllipsis
+	void isNonSelectable
+	void textAlign
+	void textDecoration
+	void whiteSpace
+	void wordWrap
+
+	return rest
+}
+
+export const _getFontWeight = (fw: TextBaseProps["fontWeight"]): string => {
 	switch (fw) {
 		case "thin":
 			return "fw-thin"
@@ -27,7 +74,10 @@ export const _getFontWeight = (fw: TextProps["fontWeight"]): string => {
 	}
 }
 
-export const getTypographyUtility = (props: TextProps | HeadingProps): string => {
+export const getTypographyUtility = (
+	props: TextProps | HeadingProps | TypographyUtilityInput,
+	className?: string,
+): string => {
 	const typoClasses: Array<string> = []
 
 	const fontFamily = props.fontFamily ? props.fontFamily : "sans"
@@ -36,7 +86,7 @@ export const getTypographyUtility = (props: TextProps | HeadingProps): string =>
 	typoClasses.push(fontFamily)
 	typoClasses.push(fontWeight)
 
-	if (props.className) typoClasses.push(props.className)
+	if (className) typoClasses.push(className)
 	if (props.fontStyle) typoClasses.push(props.fontStyle)
 	if (props.isBalanced) typoClasses.push("text-balanced")
 	if (props.isEllipsis) typoClasses.push("ellipsis")

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.4",
+	"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
+}