Render raw HTML with script tag using reactjs

Rendering raw HTML without reactjs recommended method called dangerouslySetInnerHTML is not a good practice. As we all know that inside a piece of raw HTML anyone can inject script tags. The script tags can inject malicious code and create a potential security threat. Reactjs highly discourage this due to security reasons. Following is the recommended way of injecting raw HTML in DOM using reactjs.

let rawHTMLCode = "<div>This wil be rendered</div> <script> alert('testing') </script>";
render: function() {
    return (
       <div className="content" dangerouslySetInnerHTML={{__html: rawHTMLCode}}></div>
    );
}

The above method dangerouslySetInnerHTML will not render the script tag. This is how it should be. But in case if we need to render a block of HTML that has script tags in it, we can do that too at our own risk.

One use case:
Let say in a reactjs project we need to call an API and the API response is providing us a block of HTML that has script tags in it. We need to render the entire block of HTML.

How to render HTML block with script tag?

We can render a block of HTML with script tag using this package: dangerously-set-html-content. Remember we will have to do it at our own risk. https://www.npmjs.com/package/dangerously-set-html-content

Install the package

yarn add dangerously-set-html-content
// or
npm install --save dangerously-set-html-content

Install the package

yarn add dangerously-set-html-content
// or
npm install --save dangerously-set-html-content

Usage in the code:

import React from 'react'
 
import InnerHTML from 'dangerously-set-html-content'
 
function Example {
 
  const html = `
<div>This wil be rendered</div> <script> alert('HTML with script tag rendered') </script>
  `
 
  return (
    <InnerHTML html={html} />
  )
}

Github address

https://github.com/christo-pr/dangerously-set-html-content#readme

Share