CODEWITHSUNDEEP
javascriptnode.jsreactjssanitize
DEV
DEV

Reputation: 495

How to sanitized HTML in React?

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

&lt;p&gt;Hello/&lt;p&gt;

Aadafsf

&lt;h1&gt;H1 in hello&lt;/h1&gt;

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))}

Screenshot of the output

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}} />;

Upvotes: 4

Views: 7497

Answers (2)

homer
homer

Reputation: 902

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).

Upvotes: 2

chodanun srinil
chodanun srinil

Reputation: 26

You could allow some tags you want like this

let clean = DOMPurify.sanitize('<div>hello</div>',{ALLOWED_TAGS: ['b', 'q'], ALLOWED_ATTR: ['style']});

Upvotes: 0

Related Questions