From 137b61eb05be3b058090ff355c4abbc67973bcbc Mon Sep 17 00:00:00 2001 From: yujeong-jeon Date: Thu, 23 Oct 2025 14:41:10 +0900 Subject: [PATCH 1/6] [#198] Add a new package: safe-html-react-parser --- packages/safe-html-react-parser/README.md | 145 ++++ packages/safe-html-react-parser/package.json | 58 ++ packages/safe-html-react-parser/src/index.ts | 98 +++ packages/safe-html-react-parser/tsconfig.json | 12 + .../safe-html-react-parser/vite.config.mjs | 9 + pnpm-lock.yaml | 755 +++++++++--------- 6 files changed, 702 insertions(+), 375 deletions(-) create mode 100644 packages/safe-html-react-parser/README.md create mode 100644 packages/safe-html-react-parser/package.json create mode 100644 packages/safe-html-react-parser/src/index.ts create mode 100644 packages/safe-html-react-parser/tsconfig.json create mode 100644 packages/safe-html-react-parser/vite.config.mjs diff --git a/packages/safe-html-react-parser/README.md b/packages/safe-html-react-parser/README.md new file mode 100644 index 00000000..482fa7ad --- /dev/null +++ b/packages/safe-html-react-parser/README.md @@ -0,0 +1,145 @@ +# safe-html-react-parser + +A secure wrapper for **html-react-parser** with **isomorphic-dompurify** that automatically sanitizes HTML before parsing. + +## What it does + +- ๐Ÿ›ก๏ธ **Security**: Automatically sanitizes malicious HTML using DOMPurify +- โš›๏ธ **React**: Seamlessly integrates with html-react-parser +- ๐ŸŒ **Universal**: Works in both browser and Node.js (SSR) environments +- ๐Ÿท๏ธ **Custom Tags**: Handles project-specific tags like `` safely + +## Installation + +```bash +npm install @naverpay/safe-html-react-parser +``` + +## Basic Usage + +```tsx +import { safeParse } from '@naverpay/safe-html-react-parser' + +// Basic usage - automatically sanitizes dangerous HTML +const Component = () => { + const maliciousHtml = '

Hello World

' + return
{safeParse(maliciousHtml)}
+} +// Result:

Hello World

+``` + +## API + +### `safeParse(htmlString, options?)` + +Parses HTML string into React elements with automatic XSS protection. + +#### Parameters + +- `htmlString` (string): The HTML string to parse +- `options` (SafeParseOptions, optional): Configuration options + +#### Options + +```typescript +interface SafeParseOptions extends HTMLReactParserOptions { + // DOMPurify configuration + sanitizeConfig?: DOMPurify.Config + + // Custom tags to preserve during sanitization + preserveCustomTags?: string[] +} +``` + +#### Returns + +React elements or array of React elements + +## Advanced Usage + +### Custom Sanitization Config + +```tsx +import { safeParse } from '@naverpay/safe-html-react-parser' + +const html = '

Text

' + +const result = safeParse(html, { + sanitizeConfig: { + ALLOWED_TAGS: ['div', 'p', 'style'], // Allow style tags + ALLOWED_ATTR: ['class'], + ALLOW_ARIA_ATTR: true + } +}) +``` + +### Preserving Custom Tags + +Use `preserveCustomTags` to preserve project-specific tags that would otherwise be removed: + +```tsx +import { safeParse } from '@naverpay/safe-html-react-parser' + +// Preserve custom tags like , , etc. +const svgContent = '' + +const result = safeParse(svgContent, { + preserveCustomTags: ['g', 'path'], + replace: (domNode) => { + if (domNode.name === 'g') { + return {/* custom rendering */} + } + if (domNode.name === 'path') { + return + } + } +}) +``` + +### Using with html-react-parser Options + +All html-react-parser options are supported: + +```tsx +import { safeParse } from '@naverpay/safe-html-react-parser' + +const html = '

Hello

test
' + +const result = safeParse(html, { + replace: (domNode) => { + if (domNode.name === 'img') { + return + } + }, + trim: true +}) +``` + +## Default Allowed Tags + +By default, the following HTML tags are allowed: + +```typescript +ALLOWED_TAGS: [ + 'p', 'br', 'strong', 'em', 'b', 'i', 'u', 'span', 'div', + 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h', + 'ul', 'ol', 'li', 'dl', 'dt', 'dd', + 'a', 'img' +] +``` + +## Security Notes + +- All HTML is sanitized by DOMPurify before parsing +- Dangerous tags like `