React XSS Prevention: Safe HTML & DOMPurify

Why XSS Still Happens in React

React escapes strings by default, but XSS sneaks in via dangerouslySetInnerHTML, user-controlled URLs, third-party widgets, and lax CSP. Here’s a concise, copy-paste guide to XSS prevention in React.js.

React XSS Prevention: Safe HTML & DOMPurify

Quick Wins Checklist

  • Sanitize any HTML before rendering

  • Block javascript:/data: URLs

  • Encode output and attributes

  • Use Content-Security-Policy (CSP)

  • Keep dependencies & React updated

Copy-Paste React Snippets

1) Safe HTML rendering (DOMPurify)

import DOMPurify from 'dompurify';
function SafeHTML({ html }) {
  const clean = DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

2) Never trust URLs (block scripts)

const safeHref = (u) => /^https?:\/\//i.test(u) ? u : '#';
<a href={safeHref(userInputUrl)}>Open</a>

3) Encode text output

function Text({ value }) { return <span>{String(value)}</span>; }

4) Encode attributes

<img alt={String(altText)} src={String(srcUrl)} />

5) Sanitize markdown → HTML

import { marked } from 'marked';
const toHTML = (md) => DOMPurify.sanitize(marked.parse(md));

6) Guard inline styles

const safeStyle = (s) => ({ color: /^[a-z#0-9]+$/i.test(s) ? s : 'inherit' });
<div style={safeStyle(userColor)}>Hello</div>

7) Strict CSP (via Helmet in index.html)

<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; upgrade-insecure-requests">

8) Server cookies (Express)

res.cookie('sid', v, { httpOnly:true, sameSite:'Strict', secure:true });

(Image) Tool Screenshot

Screenshot of our Free Website Vulnerability Scanner:

Screenshot of the free tools webpage where you can access security assessment tools.
Screenshot of the free tools webpage where you can access security assessment tools.

(Image) Sample Report

Sample Assessment Report generated by our tool to check Website Vulnerability:

Sample vulnerability assessment report generated with our free tool, providing insights into possible vulnerabilities.
Sample vulnerability assessment report generated with our free tool, providing insights into possible vulnerabilities.

Testing Tips

  • Fuzz inputs with <img src=x onerror=alert(1)> to verify blocks

  • Review dependencies for known XSS (npm audit)

  • Prefer allow-lists to block-lists in sanitizers

Try the Free Scanner

Kick off a scan now: https://free.pentesttesting.com/ — great for catching reflected/stored XSS, CSP gaps, and unsafe headers before release.

More reads: Pentest Testing Corp. Blog → https://www.pentesttesting.com/blog/

Managed IT Services

Harden endpoints, patch faster, and monitor 24/7.
https://www.pentesttesting.com/managed-it-services/

AI Application Cybersecurity

Secure LLM prompts, guardrails, data leakage controls, and model supply chain.
https://www.pentesttesting.com/ai-application-cybersecurity/

Offer Cybersecurity to Your Clients

White-label pentesting & audits for agencies and MSPs.
https://www.pentesttesting.com/offer-cybersecurity-service-to-your-client/

Newsletter

Subscribe on LinkedIn https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7327563980778995713

Comments

Post a Comment

Popular posts from this blog

Fix Sensitive Data Exposure in Symfony Apps

Image
Symfony is a powerful PHP framework known for its flexibility and robustness. But like any web technology, if it's not properly secured, it can become a target for attackers — especially when it comes to Sensitive Data Exposure . In this post, we’ll explore how this vulnerability occurs in Symfony applications and provide secure coding examples to mitigate the risk. 💡 Need to check your site for security vulnerabilities? Use our Free Website Vulnerability Scanner online  today! 🔍 What is Sensitive Data Exposure? Sensitive Data Exposure occurs when an application unintentionally exposes data such as: Passwords Credit card information Session tokens Personal Identifiable Information (PII) In Symfony, this usually happens due to misconfigurations, improper error handling, or insecure data storage. ⚠️ Common Causes in Symfony Exposing stack traces in production Logging sensitive data (e.g., passwords or tokens) Storing plain-text credentials Weak e...
Read more

Fix Security Misconfiguration Issues in Symfony

Image
Security misconfiguration is one of the most common yet critical vulnerabilities in modern web applications. Symfony, being a powerful PHP framework, offers many configuration options—but when misused or left insecure, it becomes a prime target for attackers. In this blog post, we’ll explore how security misconfigurations can creep into Symfony applications, provide practical coding examples, and show you how to test your website using our Free Website Vulnerability Scanner online . 👉 Also check out more security tips on our blog at Pentest Testing Corp. 🔍 What is Security Misconfiguration? Security misconfiguration refers to improperly configured security controls or settings in software or hardware systems. In Symfony, this can include: Default configurations still active Debug mode enabled in production Insecure HTTP headers Overly verbose error messages Unprotected files and directories Unrestricted administrative panels Misconfigurations can give hacker...
Read more

Open Redirect Vulnerability in Symfony

Image
Open Redirect Vulnerability in Symfony: Risks, Exploits & Prevention Open Redirect vulnerabilities are often underestimated, yet they can be leveraged by attackers for phishing, social engineering, and redirect chains to malicious websites. If you're building or managing Symfony applications, understanding this vulnerability is crucial. In this blog, we'll explore how Open Redirect works in Symfony, provide real-world code examples, and demonstrate how to test your site using our free Website Security Scanner . 🔗 Also read more about other vulnerabilities on our official blog: Pentest Testing Blog 🔍 What Is an Open Redirect Vulnerability? An Open Redirect occurs when an application accepts a user-controlled input that specifies a link and redirects users to it without validating the destination. This allows attackers to send legitimate-looking links that redirect unsuspecting users to phishing or malicious websites. In Symfony, this might happen when improperly hand...
Read more