react-sanitizer-parser

import React from 'react'; import ReactSanitizerParser, { parse, DOMPurify } from "react-sanitizer-parser"; const App = () => { const dirtyHtmlWithScript = ` <div> <p>This is some <strong>safe</strong> content.</p> <script>alert('XSS attempt!');</script> <img src="x" onerror="alert('Another XSS!');"> <a href="javascript:alert('Even more XSS!');">Click me</a> <p style="color:red;">Styled paragraph</p> </div> `; // Example of a highly restricted DOMPurify configuration const highlyRestrictedConfig = { USE_PROFILES: { html: false, svg: false, mathMl: false }, // Disable all profiles FORBID_TAGS: ['div', 'span', 'img', 'a', 'p'], FORBID_ATTR: ['style', 'href', 'src', 'onerror'], }; // Using the re-exported DOMPurify directly const pureHtml = DOMPurify.sanitize("<img src=x onerror=alert(1)//>"); console.log("DOMPurify direct sanitize:", pureHtml); // Expect: <img src="x"> // Using the re-exported parse function directly const pureParse = parse("<h2>Parsed directly without sanitization</h2>"); return ( <div> <h1>Using ReactSanitizerParser Component</h1> <p>Default sanitization (scripts, onerror, javascript:href removed, style kept by default):</p> <ReactSanitizerParser>{dirtyHtmlWithScript}</ReactSanitizerParser> <h2>Sanitization with custom DOMPurify config (highly restricted):</h2> <ReactSanitizerParser sanitizerConfig={highlyRestrictedConfig}> {dirtyHtmlWithScript} </ReactSanitizerParser> <h2>Direct parse from html-react-parser re-export (no sanitization by default):</h2> {pureParse} <h2>Result of DOMPurify re-export (imperative sanitization):</h2> <div dangerouslySetInnerHTML={{ __html: pureHtml }} /> </div> ); }; export default App;