How to Render HTML String as Real HTML in JavaScript and React

Rendering an HTML string as real, live HTML in a web application is a common requirement, especially when dealing with content that comes from external sources, such as a CMS (Content Management System) or a database.

This article dives into how you can achieve this in both vanilla JavaScript and React, ensuring your applications are dynamic and flexible.

Part 1: The Vanilla JavaScript Way

The InnerHTML Property

In plain JavaScript, the simplest and most straightforward way to render an HTML string into real HTML is by using the innerHTML property of a DOM element.

This property lets you get or set the HTML or XML markup contained within the element.

How It Works

// Assuming you have an HTML string
const htmlString = "<p>Hello, world!</p>";

// Find the element where you want to render the HTML
const container = document.getElementById("container");

// Set the innerHTML property
container.innerHTML = htmlString;

Safety Concerns

While innerHTML is powerful, it comes with significant security risks, especially XSS (Cross-Site Scripting) attacks. When you use innerHTML, ensure that the HTML content you're rendering is sanitized to prevent malicious code execution.

Sanitizing HTML

You can sanitize HTML by removing or escaping dangerous tags and attributes. Libraries like DOMPurify make this process easier and safer:

// Sanitize the HTML string with DOMPurify
const cleanHTML = DOMPurify.sanitize(htmlString);

// Then, safely set the innerHTML
container.innerHTML = cleanHTML;

Part 2: The React Way

Rendering an HTML string in React requires a different approach due to React's JSX syntax and its focus on preventing XSS attacks by default.

Using dangerouslySetInnerHTML

React provides dangerouslySetInnerHTML, a property that tells React to render the content as HTML. As the name suggests, using this property can be dangerous, so you should sanitize your HTML before using it.

How It Works

import React from "react";
import DOMPurify from "dompurify";

const MyComponent = () => {
  // Your HTML string
  const htmlString = "<p>Hello, React world!</p>";

  // Sanitize the HTML string
  const cleanHTML = DOMPurify.sanitize(htmlString);

  return (
    <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
  );
};

Why React Uses dangerouslySetInnerHTML

React's approach emphasizes the importance of handling HTML strings carefully to prevent XSS attacks.

By naming the property dangerouslySetInnerHTML, React makes it clear to developers that they should proceed with caution, ensuring any HTML they render is safe.

Alternatives to dangerouslySetInnerHTML

For scenarios where you need more control or wish to avoid dangerouslySetInnerHTML, consider using React components that parse and render HTML strings safely.

Libraries like react-html-parser or html-react-parser can parse HTML strings into React components while providing options for sanitization and customization.

Example with html-react-parser

import React from "react";
import parse from "html-react-parser";

const MyComponent = () => {
  const htmlString = "<p>Hello, safer React world!</p>";

  return <div>{parse(htmlString)}</div>;
};

Final Thoughts on Security

Whether you're using vanilla JavaScript or React, the security of your application should be a top priority.

Always sanitize HTML strings before rendering them to protect against XSS and other web security vulnerabilities.

Libraries like DOMPurify in JavaScript or using html-react-parser with built-in sanitization in React are excellent ways to achieve this.

Rendering HTML strings as real HTML provides great flexibility in web development, allowing for dynamic content updates and rich text rendering.

However, with great power comes great responsibility. Always ensure the content you render is safe, sanitizing any HTML strings and being aware of the potential risks involved in these operations.

By following best practices and using the right tools, you can harness this power effectively while keeping your applications secure.