How to sanitized HTML in React?

Question

I am trying to display HTML content on React front side.

Here is my input

<p>Hello/<p>

Aadafsf

<h1>H1 in hello</h1>

I write this from CKEditor from Admin side

This is the React result in front size

<p>Hello/<p>

Aadafsf

<h1>H1 in hello</h1>

This is the result I would like

<p>Hello/<p>

Aadafsf

<h1>H1 in hello</h1>

Here is what I tried so far

1. Using dompurify

import {Parser} from "html-to-react";
import DOMPurify from "dompurify";

{Parser().parse(DOMPurify.sanitize(HTMLCONTENT))}

I tried this but I'm not getting the expected output.

2. Using dangerouslySetInnerHTML

I have the below HTML content:

<h2>This is Heading</h2><p>&lt;p&gt;&lt;/p&gt;</p><p>This is para.</p><p>&nbsp;</p><p><strong>This is Bold</strong></p><p>&nbsp;</p><ol><li><strong>dwsfdf</strong></li><li><strong>fdsfdf</strong></li></ol><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><figure class="media"><oembed url="https://youtu.be/rokGy0huYEA"></oembed></figure>

I used it like:

<div dangerouslySetInnerHTML={{__html: HTMLCONTENT}} />;

Answer 1

Actually, your mistake is not on the serialization, it is because there is a typo in your HTML.

The <p> tag is "closed" by a /<p> tag and not by a </p> !

So you need to update your HTML:

-  <p>Hello/<p>
+  <p>Hello</p>

Aadafsf

<h1>H1 in hello</h1>

Also, in order to display raw HTML in your component. React offer a function for that dangerouslySetInnerHTML.

But, take real care as this can open your site to attacks known as cross-site scripting (XSS).