How to Dangerously Set innerHTML in React

How to Dangerously Set innerHTML in React to Render HTML

by

Inappropriate use of the innerHTML attribute will lead us to a cross-site scripting attack also called XSS attack. Sanitizing user input for display is error prone and failure to do that is one of the causes for web vulnerabilities on the internet.

The motto behind everything is to make things simpler for web developers and every function and attribute should explicitly state their intent when performing “unsafe” operations. The prop name dangerouslySetInnerHTML is intentionally chosen and the prop value is used to refer to the sanitized data as discussed in the above paragraph.

dangerouslySetInnerHTML is a replacement for the use of innerHTML in React.Js, It allows us to set HTML directly from React using dangerouslySetInnerHTML . We have to pass an object with a __html key that will hold our HTML.

Generally, web developers uses dangersouslySetInnerHTML property in their web application to render the dynamic HTML on the webpage using the JavaScript.

We hope the usage is clearly to you, we can start with an example:

How do you use dangerouslySetInnerHTML in React?

Function Component React JS – Code


import React from "react";

function CustomComponent() {
    return (
      <div dangerouslySetInnerHTML={{__html: "<p>This will be your dynamic HTML Tags.<p>"}} />
    )
}


export default CustomComponent;

Class Component React JS – Code


import React from "react";

class CustomComponent extends React.Component {
  render() {
    return (
      <div dangerouslySetInnerHTML={{__html: "<p>This will be your dynamic HTML Tags.<p>"}} />
    ) 
}
}

export default CustomComponent;

You can run the code and check in your browser. It will render the passed HTML on the website page.

How to use dangerouslySetInnerHTML without DIV or with any other element?


const htmlString = `<h2>This is our HTML string and text.</h2>`;


// Span element
<span dangerouslySetInnerHTML={{ __html: htmlString, }} />

// Article element
<article dangerouslySetInnerHTML={{ __html: htmlString, }} />

// H1 element
<h1 dangerouslySetInnerHTML={{ __html: htmlString, }} />

// Head element
<head dangerouslySetInnerHTML={{ __html: htmlString, }} />

// Div element
<div dangerouslySetInnerHTML={{ __html: htmlString, }} />

More safe way to use dangerouslySetInnerHTML alternative

The above code that we have shared is suitable when we have the full control over the HTML string that we are going to pass to the dangerouslySetInnerHTML attribute. In case, there are users which are going to generate dynamic HTML string then we would recommend using the below code by installing a NPM library called DOMPurify for sanitizing the input html string provided by the users. 

import DOMPurify from "dompurify";

const dirty = `Oops! lets try this <img src="http://unsplash.it/200/200?random" onload="alert('Hehe Haha HuHuHu!');" />`;

const App = () => (
  <div
    dangerouslySetInnerHTML={{
      __html: DOMPurify.sanitize(dirty)
    }}
  />
);

Hope the article was helpful to you and you understood why we use a dangerouslySetInnerHTML in React.

Hit the comment box if you have any doubts.

Leave a Comment