Securely using dangerouslySetInnerHTML in a React application

August 28, 2022
cybersecuritycertification researchcomptia security+

The dangerouslySetInnerHTML is a React property that can be added to HTML tags that allows developers to directly set HTML content into a component using the innerHTML property. While this feature can be useful in certain scenarios, it can also be dangerous because it bypasses React's built-in protections against Cross-Site Scripting (XSS) attacks. When using dangerouslySetInnerHTML, developers must ensure that the content being inserted is trustworthy and properly sanitized to prevent potential security vulnerabilities. If unsanitized user input or untrusted data is used with dangerouslySetInnerHTML, it opens the door for attackers to inject malicious scripts into the application, leading to XSS attacks that can steal user data, manipulate the webpage, or perform other harmful actions.


The dangerouslySetInnerHTML property can open an app up to security vulnerabilities, but it exists for a reason. Using dangerouslySetInnerHTML can be necessary in scenarios where you need to render HTML content, for example, rendering content from an API, displaying formatted content, or integrating third-party widgets. Before rendering HTML with dangerouslySetInnerHTML you should assess if it’s truly required.


When using dangerouslySetInnerHTML in React to render HTML content that comes from external sources or user inputs, it is crucial to sanitize the data to prevent any potential security risks, particularly Cross-Site Scripting (XSS) attacks. To achieve this, you can use DOMPurify, a library specifically designed to sanitize HTML.

First, install the required packages using npm or yarn:

  npm install dompurify

Next, import DOMPurify in your React component:

  
import DOMPurify from 'dompurify';

Now, you can sanitize the HTML content before using dangerouslySetInnerHTML. Let's assume you have received the HTML content from an external source and stored it in a variable called htmlContent:

  
// Sanitize the HTML content using DOMPurify
const sanitizedHTML = DOMPurify.sanitize(htmlContent);

The sanitizedHTML variable now contains the sanitized version of htmlContent, free from any potentially harmful scripts or tags. You can then safely use dangerouslySetInnerHTML to render this sanitized content: 

  
<div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />

With proper sanitization, you ensure that the HTML content being rendered is safe and does not introduce any security vulnerabilities. Proper data validation and sanitization are essential when dealing with external or user-generated content to maintain a secure React application.