How to fix Possible XSS attack when rendering HTML strings in React

ReactINTERMEDIATECRITICAL

Using dangerouslySetInnerHTML to render untrusted HTML content can expose your React app to cross-site scripting (XSS) attacks. Attackers can inject malicious JavaScript through user-supplied or untrusted data.

What this error means

This warning alerts you to a critical security vulnerability in your React application. By default, React escapes all values embedded in JSX to prevent XSS attacks. However, the dangerouslySetInnerHTML property explicitly bypasses React's built-in protection. When you use it to render user-supplied data or untrusted content without sanitization, attackers can inject malicious JavaScript code that executes in your users' browsers. This compromises the security of your entire application and can lead to data theft, session hijacking, or unauthorized actions performed on behalf of your users.

How to fix "Possible XSS attack when rendering HTML strings"

1Stop using dangerouslySetInnerHTML if possible

The safest approach is to avoid dangerouslySetInnerHTML entirely. If you need to render formatted content, consider these alternatives:

tsx

// BAD: XSS vulnerable
<div dangerouslySetInnerHTML={{ __html: userContent }} />

// GOOD: Use text content
<div>{userContent}</div>

// GOOD: Use markdown library with sanitization
import ReactMarkdown from 'react-markdown';
<ReactMarkdown>{userContent}</ReactMarkdown>

React automatically escapes text content, so this is much safer.

2Install and use DOMPurify for sanitization

If you must use dangerouslySetInnerHTML, always sanitize the HTML first using DOMPurify:

bash

npm install dompurify
npm install --save-dev @types/dompurify

DOMPurify is a widely trusted library endorsed by OWASP for HTML sanitization. It removes dangerous elements and attributes while preserving safe HTML.

3Create a safe HTML component with DOMPurify

Wrap sanitization in a reusable React component:

tsx

import DOMPurify from 'dompurify';
import React from 'react';

interface SafeHTMLProps {
  content: string;
  className?: string;
}

export const SafeHTML: React.FC<SafeHTMLProps> = ({ content, className }) => {
  const sanitized = DOMPurify.sanitize(content);
  return (
    <div
      className={className}
      dangerouslySetInnerHTML={{ __html: sanitized }}
    />
  );
};

Now all developers can safely render HTML:

tsx

<SafeHTML content={userProvidedHTML} />

4Configure DOMPurify for your use case

DOMPurify allows you to customize what tags and attributes are allowed:

tsx

import DOMPurify from 'dompurify';

const sanitizeHTML = (html: string) => {
  return DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'br', 'p'],
    ALLOWED_ATTR: ['href', 'title'],
    KEEP_CONTENT: true,
  });
};

export const SafeHTML: React.FC<SafeHTMLProps> = ({ content, className }) => {
  return (
    <div
      className={className}
      dangerouslySetInnerHTML={{ __html: sanitizeHTML(content) }}
    />
  );
};

Adjust ALLOWED_TAGS and ALLOWED_ATTR based on your specific needs.

5Never trust external data sources

Always assume that data from APIs, databases, user input, or URLs could be malicious. Apply sanitization consistently:

tsx

// BAD: Trusting API response
const [html, setHtml] = React.useState('');
React.useEffect(() => {
  fetch('/api/content').then(r => r.json()).then(data => {
    setHtml(data.htmlContent); // VULNERABLE!
  });
}, []);

return <div dangerouslySetInnerHTML={{ __html: html }} />;

// GOOD: Sanitize API response
const [html, setHtml] = React.useState('');
React.useEffect(() => {
  fetch('/api/content').then(r => r.json()).then(data => {
    setHtml(DOMPurify.sanitize(data.htmlContent));
  });
}, []);

return <div dangerouslySetInnerHTML={{ __html: html }} />;

6Implement Content Security Policy (CSP) headers

Add a Content Security Policy to your server configuration as a defense-in-depth measure:

bash

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';

For Next.js, add to next.config.js:

const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'; script-src 'self'"
  }
];

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: securityHeaders,
      }
    ];
  }
};

CSP acts as a safety net that prevents injected scripts from executing even if sanitization is bypassed.

How to fix Possible XSS attack when rendering HTML strings in React

What this error means

Typical symptoms

Common causes

How to fix "Possible XSS attack when rendering HTML strings"

Advanced notes

Related errors

Official resources & further reading