[safe-html-react-parser] Replace isomorphic-dompurify with custom implementation supporting flexible DOM libraries by yujeong-jeon · Pull Request #203 · NaverPayDev/pie

yujeong-jeon · 2025-11-18T07:17:14Z

Related Issue

Summary

Replace isomorphic-dompurify dependency with a custom DOMPurify implementation that supports user-chosen DOM libraries (jsdom, happy-dom, or linkedom) for better flexibility and performance optimization.

Motivation

isomorphic-dompurify has limited flexibility and no built-in memory management
Memory leaks can occur with heavy JSDOM usage in server-side rendering

Changes

New file: src/utils/dompurify.ts with OptimizedDOMPurify class
- Implements LRU cache (default 100 entries) for performance
- Periodic DOM instance recreation (default every 1000 calls) to prevent memory leaks
- Configurable cache size and recreation interval
Flexible DOM support: Users can choose between:
- jsdom - most complete, heavier (for maximum compatibility)
- happy-dom - fast, lighter, recommended for balanced performance
- linkedom - fastest, minimal footprint (for performance-critical apps)
Package dependencies:
- Moved jsdom to optional peerDependencies
- Added happy-dom and linkedom as optional peerDependencies
- Kept dompurify and html-react-parser in main dependencies
API improvements:
- Client-side: Uses browser's native window (no configuration needed)
- Server-side: Requires explicit configuration via configureDOMPurify() or per-call options
- Added domPurifyOptions to SafeParseOptions for per-call configuration
- Global configuration via configureDOMPurify() function
Documentation: Updated README with configuration examples and performance comparison table

Migration Guide

For server-side rendering, install one of the DOM implementations:

# Recommended: happy-dom (best balance)
npm install happy-dom

# Or jsdom (maximum compatibility)
npm install jsdom

# Or linkedom (maximum performance)
npm install linkedom

Then configure at app initialization:

import { configureDOMPurify } from '@naverpay/safe-html-react-parser'
import { Window } from 'happy-dom'

configureDOMPurify({
  domWindowFactory: () => new Window()
})

Or use per-call options:

safeParse(html, {
  domPurifyOptions: {
    domWindowFactory: () => new Window()
  }
})

Performance Benefits

Caching: Reduces redundant sanitization operations
Memory management: Prevents memory leaks from long-running servers
User choice: Select DOM implementation based on project requirements
Smaller bundles: Only include the DOM library you actually use

… wrapper Replace isomorphic-dompurify dependency with a custom implementation using dompurify + jsdom directly for better control and optimization. Changes: - Add src/utils/dompurify.ts with OptimizedDOMPurify class - Implement LRU cache (default 100 entries) for sanitized HTML - Add periodic JSDOM instance recreation (default every 1000 calls) - Update dependencies: isomorphic-dompurify → dompurify + jsdom Benefits: - Better memory management with configurable cache and recreation interval - Improved performance through result caching - More control over server-side sanitization behavior

…support (jsdom, happy-dom, linkeddom)

npayfebot · 2025-11-18T07:17:45Z

✅ Changeset detected

Latest commit: 3a166d5

@naverpay/safe-html-react-parser package have detected changes.

If no version change is needed, please add skip-detect-change to the label.

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@naverpay/safe-html-react-parser	✨ Minor

_{powered by: naverpay changeset detect-add actions}

npayfebot · 2025-11-18T07:18:40Z

NPM Packages

📦 @naverpay/safe-html-react-parser

Total Sizes: 4.57 kB

Total Changes: +2.99 kB (+190%) 🔍 _{(Size Increased)}

File	Status	Previous Size	Updated Size	Changed
/dist/esm/index.mjs	`🛠️`	`667 B`	`712 B`	`+45 B (+7%)`
/dist/cjs/index.js	`🛠️`	`909 B`	`947 B`	`+38 B (+4%)`
/dist/esm/utils/lru-cache.mjs	`➕`	`-`	`303 B`	`+303 B`
/dist/esm/utils/dompurify.mjs	`➕`	`-`	`1.09 kB`	`+1.09 kB`
/dist/cjs/utils/lru-cache.js	`➕`	`-`	`366 B`	`+366 B`
/dist/cjs/utils/dompurify.js	`➕`	`-`	`1.15 kB`	`+1.15 kB`

🧩 Dependency Changes

Package	Status	Previous Version	Updated Version	Bundle Size (Max)	Changed
`dompurify@^3.3.0`	`➕`	`-`	`^3.3.0`	`830 kB`	`830 kB`
`isomorphic-dompurify@^2.30.1`	`➖`	`^2.30.1`	`-`	`-5.71 kB`	`-5.71 kB`

_{powered by: naverpay size-action}

Replace isomorphic-dompurify with a custom implementation that supports flexible DOM libraries.

yujeong-jeon · 2025-11-18T11:30:58Z

/canary-publish

npayfebot · 2025-11-18T11:32:06Z

No changed files exist under the . path, no packages have been deployed.

yujeong-jeon · 2025-11-18T11:32:27Z

?

yceffort-naver · 2025-11-18T11:53:20Z

?

I’m sorry, this is my fault. Please take a look at this: #204 😓

yceffort-naver · 2025-11-18T11:59:08Z

/canary-publish

npayfebot · 2025-11-18T12:00:49Z

Published Canary Packages

@naverpay/safe-html-react-parser@1.1.0-canary.251118-3eea5d1

yceffort-naver · 2025-11-18T12:01:47Z

yujeong-jeon · 2025-11-19T02:46:11Z

Oh, I saw this issue late. Thank you!!

…ty and clarity

yujeong-jeon · 2025-11-19T03:11:28Z

/canary-publish

npayfebot · 2025-11-19T03:12:32Z

Published Canary Packages

@naverpay/safe-html-react-parser@1.1.0-canary.251119-26c9e51

yceffort-naver · 2025-11-19T09:24:45Z

packages/safe-html-react-parser/src/utils/dompurify.ts

How about serializing the Node to use it as a key? It seems like if there are different objects with the same content, they would be referenced by different keys. If that’s what you intended, please disregard this message.

Done in 76d76a3

yceffort-naver · 2025-11-19T09:25:38Z

packages/safe-html-react-parser/src/utils/dompurify.ts

+        if (global.gc && typeof global.gc === 'function') {
+            global.gc()
+        }


You’re only planning to use it when the –expose-gc option is available, right?

That's correct. The use of global.gc() is only intended for server-side environments where the --expose-gc option is available. This is mainly to support scenarios where the package is used on the server, especially since it's open source and may be integrated in various environments.

yceffort-naver · 2025-11-19T09:27:07Z

packages/safe-html-react-parser/src/utils/dompurify.ts

+function getSanitizer(options?: SanitizerOptions) {
+    if (!instance) {
+        instance = new OptimizedDOMPurify(options)
+    }
+    return instance
+}


Using a singleton object, it seems you won’t be able to use different settings within a single application.

That's correct. The current implementation uses a singleton, so only one global configuration is supported per process.

This design was chosen to minimize memory usage and complexity (as written in the description), especially for server-side scenarios. If there’s a need to support multiple configurations at the same time, I'm open to considering multi-instance support in the future.

yceffort-naver

GOGOGOGO

yujeong-jeon · 2025-11-20T06:13:20Z

Thanks for the great review! Merging 🚀

yujeong-jeon added 2 commits November 18, 2025 15:04

[#202] Enhance sanitization options with flexible DOM implementation …

b997419

…support (jsdom, happy-dom, linkeddom)

Update safe-html-react-parser with custom DOM implementation

3eea5d1

Replace isomorphic-dompurify with a custom implementation that supports flexible DOM libraries.

[#202] Refactor DOM types and factory function for improved flexibili…

26c9e51

…ty and clarity

yujeong-jeon self-assigned this Nov 19, 2025

yujeong-jeon marked this pull request as ready for review November 19, 2025 07:23

yujeong-jeon requested a review from a team as a code owner November 19, 2025 07:23

yceffort-naver reviewed Nov 19, 2025

View reviewed changes

yujeong-jeon added 2 commits November 20, 2025 01:00

[#202] Fix cache key to ensure consistent serialization of Node types

76d76a3

[#202] Refactor lru caching in DOMPurify

3a166d5

yceffort-naver approved these changes Nov 20, 2025

View reviewed changes

yujeong-jeon merged commit bbc554a into main Nov 20, 2025
7 checks passed

yujeong-jeon deleted the feature/202 branch November 20, 2025 06:13

npayfebot mentioned this pull request Nov 20, 2025

🚀 version changed packages #205

Merged

Conversation

yujeong-jeon commented Nov 18, 2025

Related Issue

Summary

Motivation

Changes

Migration Guide

Performance Benefits

Uh oh!

npayfebot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Changeset detected

Uh oh!

npayfebot commented Nov 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

NPM Packages

📦 @naverpay/safe-html-react-parser

🧩 Dependency Changes

Uh oh!

yujeong-jeon commented Nov 18, 2025

Uh oh!

npayfebot commented Nov 18, 2025

Uh oh!

yujeong-jeon commented Nov 18, 2025

Uh oh!

yceffort-naver commented Nov 18, 2025

Uh oh!

yceffort-naver commented Nov 18, 2025

Uh oh!

npayfebot commented Nov 18, 2025

Published Canary Packages

Uh oh!

yceffort-naver commented Nov 18, 2025

Uh oh!

yujeong-jeon commented Nov 19, 2025

Uh oh!

yujeong-jeon commented Nov 19, 2025

Uh oh!

npayfebot commented Nov 19, 2025

Published Canary Packages

Uh oh!

yceffort-naver Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

yujeong-jeon Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

yceffort-naver Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

yujeong-jeon Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

yceffort-naver Nov 19, 2025

Choose a reason for hiding this comment

Uh oh!

yujeong-jeon Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yceffort-naver left a comment

Choose a reason for hiding this comment

Uh oh!

yujeong-jeon commented Nov 20, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

npayfebot commented Nov 18, 2025 •

edited

Loading

npayfebot commented Nov 18, 2025 •

edited

Loading

yujeong-jeon Nov 19, 2025 •

edited

Loading