From a5293b08d8dc755ec431b5c533413c356c89268c Mon Sep 17 00:00:00 2001 From: Dozie2001 Date: Sun, 15 Feb 2026 12:48:15 +0100 Subject: [PATCH] fix(markdown): prevent XSS by escaping HTML in markdow --- packages/font/src/font.tsx | 31 ++++++++++--------- packages/markdown/src/markdown.spec.tsx | 2 +- packages/markdown/src/markdown.tsx | 19 +++++++++--- .../utils/parse-css-in-js-to-inline-css.ts | 2 +- 4 files changed, 33 insertions(+), 21 deletions(-) diff --git a/packages/font/src/font.tsx b/packages/font/src/font.tsx index b45fbedea3..87079505f8 100644 --- a/packages/font/src/font.tsx +++ b/packages/font/src/font.tsx @@ -23,6 +23,10 @@ type FontFormat = type FontWeight = React.CSSProperties['fontWeight']; type FontStyle = React.CSSProperties['fontStyle']; +function sanitizeCssValue(value: string): string { + return value.replace(/[';}{\\<>]/g, ''); +} + export interface FontProps { /** The font you want to use. NOTE: Do not insert multiple fonts here, use fallbackFontFamily for that */ fontFamily: string; @@ -47,29 +51,28 @@ export const Font: React.FC> = ({ fontStyle = 'normal', fontWeight = 400, }) => { + const safeFontFamily = sanitizeCssValue(fontFamily); + const safeFontStyle = sanitizeCssValue(String(fontStyle)); + const safeFontWeight = sanitizeCssValue(String(fontWeight)); + const safeFallbacks = Array.isArray(fallbackFontFamily) + ? fallbackFontFamily.map(sanitizeCssValue) + : [sanitizeCssValue(fallbackFontFamily)]; + const src = webFont - ? `src: url(${webFont.url}) format('${webFont.format}');` + ? `src: url(${sanitizeCssValue(webFont.url)}) format('${sanitizeCssValue(webFont.format)}');` : ''; const style = ` @font-face { - font-family: '${fontFamily}'; - font-style: ${fontStyle}; - font-weight: ${fontWeight}; - mso-font-alt: '${ - Array.isArray(fallbackFontFamily) - ? fallbackFontFamily[0] - : fallbackFontFamily - }'; + font-family: '${safeFontFamily}'; + font-style: ${safeFontStyle}; + font-weight: ${safeFontWeight}; + mso-font-alt: '${safeFallbacks[0]}'; ${src} } * { - font-family: '${fontFamily}', ${ - Array.isArray(fallbackFontFamily) - ? fallbackFontFamily.join(', ') - : fallbackFontFamily - }; + font-family: '${safeFontFamily}', ${safeFallbacks.join(', ')}; } `; return