{"id":13903,"library":"react-sanitizer-parser","title":"React HTML Sanitizer Parser","description":"The `react-sanitizer-parser` package is a React component and utility library designed to safely render HTML content within React applications, mitigating XSS vulnerabilities. It acts as a convenient wrapper around two well-established libraries: `html-react-parser` for converting HTML strings into React elements and `DOMPurify` for robust HTML sanitization. As of version 0.1.4, it provides a `` component that takes a `dirty` HTML string as children, along with optional `htmlParserOptions` and `sanitizerConfig` props to fine-tune the behavior of its underlying dependencies. Additionally, it re-exports the `parse` function from `html-react-parser` and the `DOMPurify` object directly for more granular, imperative usage. Its primary differentiator is simplifying the integration of HTML parsing and sanitization into React, offering a streamlined API compared to configuring both libraries independently.","status":"active","version":"0.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/ssi02014/react-sanitizer-parser","tags":["javascript","react","parser","xss","sanitizer","html-react-parser","dompurify","DOMPurify","react-parser","typescript"],"install":[{"cmd":"npm install react-sanitizer-parser","lang":"bash","label":"npm"},{"cmd":"yarn add react-sanitizer-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-sanitizer-parser","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for converting HTML strings into React elements.","package":"html-react-parser","optional":false},{"reason":"Core dependency for sanitizing HTML content to prevent XSS attacks.","package":"dompurify","optional":false},{"reason":"Peer dependency, required for any React application using this component.","package":"react","optional":false},{"reason":"Peer dependency, required for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"This is the default export, representing the main React component.","wrong":"import { ReactSanitizerParser } from 'react-sanitizer-parser'; // Not a named export, it's the default","symbol":"ReactSanitizerParser","correct":"import ReactSanitizerParser from 'react-sanitizer-parser';"},{"note":"Re-exports the `parse` function directly from `html-react-parser` for imperative parsing.","wrong":"import parse from 'react-sanitizer-parser'; // 'parse' is a named export, not the default","symbol":"parse","correct":"import { parse } from 'react-sanitizer-parser';"},{"note":"Re-exports the `DOMPurify` object directly from the `dompurify` library for imperative sanitization.","wrong":"import DOMPurify from 'react-sanitizer-parser'; // 'DOMPurify' is a named export, not the default","symbol":"DOMPurify","correct":"import { DOMPurify } from 'react-sanitizer-parser';"}],"quickstart":{"code":"import React from 'react';\nimport ReactSanitizerParser, { parse, DOMPurify } from \"react-sanitizer-parser\";\n\nconst App = () => {\n const dirtyHtmlWithScript = `\n
\n

This is some safe content.

\n \n \n Click me\n

Styled paragraph

\n
\n `;\n\n // Example of a highly restricted DOMPurify configuration\n const highlyRestrictedConfig = {\n USE_PROFILES: { html: false, svg: false, mathMl: false }, // Disable all profiles\n FORBID_TAGS: ['div', 'span', 'img', 'a', 'p'],\n FORBID_ATTR: ['style', 'href', 'src', 'onerror'],\n };\n\n // Using the re-exported DOMPurify directly\n const pureHtml = DOMPurify.sanitize(\"\");\n console.log(\"DOMPurify direct sanitize:\", pureHtml); // Expect: \n\n // Using the re-exported parse function directly\n const pureParse = parse(\"

Parsed directly without sanitization

\");\n\n return (\n
\n

Using ReactSanitizerParser Component

\n

Default sanitization (scripts, onerror, javascript:href removed, style kept by default):

\n {dirtyHtmlWithScript}\n\n

Sanitization with custom DOMPurify config (highly restricted):

\n \n {dirtyHtmlWithScript}\n \n\n

Direct parse from html-react-parser re-export (no sanitization by default):

\n {pureParse}\n\n

Result of DOMPurify re-export (imperative sanitization):

\n
\n
\n );\n};\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates the primary usage of the `ReactSanitizerParser` component, including how to pass `sanitizerConfig` for custom DOMPurify rules. It also shows the direct use of the re-exported `parse` function from `html-react-parser` and the `DOMPurify` object for imperative HTML processing."},"warnings":[{"fix":"Pass a custom `sanitizerConfig` prop to `ReactSanitizerParser` or `DOMPurify.sanitize()` directly, specifying allowed tags, attributes, and other rules according to your application's security requirements.","message":"While `react-sanitizer-parser` bundles `DOMPurify` for security, the default sanitization configuration might not be strict enough for all applications or high-security contexts. Developers should thoroughly review DOMPurify's configuration options and apply a custom `sanitizerConfig` if their use case requires stricter filtering of HTML elements or attributes.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always test `react-sanitizer-parser` thoroughly after updating its peer or direct dependencies. Consult the changelogs of `html-react-parser` and `DOMPurify` for potential impacts on sanitization rules or parsing logic.","message":"As a wrapper library, `react-sanitizer-parser`'s behavior is intrinsically linked to its underlying dependencies, `html-react-parser` and `DOMPurify`. Major version updates in these dependencies (e.g., `html-react-parser` v5 or `DOMPurify` v3) could introduce breaking changes or subtle behavioral shifts that `react-sanitizer-parser` might not entirely abstract away or immediately update to reflect in its own minor versions.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"When using `import { parse } from 'react-sanitizer-parser';`, ensure that the HTML string passed to `parse()` has been pre-sanitized using `DOMPurify.sanitize()` (also re-exported) or another trusted sanitizer. Example: `parse(DOMPurify.sanitize(dirtyHtml))`.","message":"The re-exported `parse` function from `html-react-parser` does *not* automatically sanitize HTML. If used directly without prior sanitization via `DOMPurify` or another mechanism, it can expose your application to XSS vulnerabilities by rendering malicious HTML.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure that the `children` prop of `` is always a valid HTML string. If you have dynamic content that might not be a string, convert it explicitly or handle empty states.","message":"Passing non-string values to the `children` prop of `` can lead to rendering issues or unexpected behavior, as the component expects an HTML string to parse and sanitize.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.1.4':62 'act':31 'addit':92 'along':75 'api':132 'applic':26 'around':36 'behavior':87 'children':74 'compar':133 'compon':14,66 'configur':135 'content':23 'conveni':34 'convert':47 'depend':91 'design':18 'differenti':117 'direct':109 'dirti':70 'dompurifi':54,107,148,149 'element':52 'establish':40 'export':96 'fine':84 'fine-tun':83 'function':99 'granular':112 'html':2,22,43,48,57,71,102,123,145 'html-react-pars':42,101,144 'htmlparseropt':78 'imper':113 'independ':138 'integr':121 'javascript':139 'librari':17,41,137 'mitig':27 'object':108 'offer':129 'option':77 'packag':10 'pars':98,124 'parser':4,9,45,104,141,147,152 'primari':116 'prop':81 'provid':64 're':95 're-export':94 'react':1,7,13,25,44,51,103,128,140,146,151 'react-pars':150 'react-sanitizer-pars':6 'render':21 'robust':56 'safe':20 'sanit':3,8,58,126,143 'sanitizerconfig':80 'simplifi':119 'streamlin':131 'string':49,72 'take':68 'tune':85 'two':37 'typescript':153 'under':90 'usag':114 'util':16 'version':61 'vulner':29 'well':39 'well-establish':38 'within':24 'wrapper':35 'xss':28,142","created_at":"2026-04-20T01:56:54.674202+00:00","updated_at":"2026-04-20T01:56:54.674202+00:00","problems":[{"fix":"Ensure that the `children` prop passed to `` is always an HTML string. For example: `{String(myContent)}` if `myContent` might be a number or null.","cause":"The `children` prop provided to the `ReactSanitizerParser` component was not a string.","error":"Error: React Sanitizer Parser received `children` that are not a string. Expected a string."},{"fix":"Use the correct named import for `DOMPurify`: `import { DOMPurify } from 'react-sanitizer-parser';`","cause":"Attempting to use `DOMPurify.sanitize` without correctly importing the `DOMPurify` object, possibly due to a wrong import type (e.g., default import instead of named).","error":"TypeError: Cannot read properties of undefined (reading 'sanitize')"},{"fix":"This is typically a warning from React itself, not an error with `react-sanitizer-parser` if `DOMPurify` is configured to disallow `javascript:` URLs (which it does by default). Review your `DOMPurify` configuration via `sanitizerConfig` to ensure strict removal of such URLs. Consider replacing `javascript:` URLs with event handlers or preventing their insertion at the source.","cause":"HTML content passed to `ReactSanitizerParser` or `DOMPurify` contains `javascript:` URLs in attributes (like `href` or `src`), and while `DOMPurify` handles these, React still issues a warning as a general security practice for `dangerouslySetInnerHTML` contexts.","error":"Warning: A future version of React will block javascript: URLs as a security precaution."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/ssi02014/react-sanitizer-parser","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-sanitizer-parser","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization","auth-security"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}