⚠️⚠️⚠️ dangerously-set-html-content ⚠️⚠️⚠️

Render raw html at your own risk!

Context

Here's a blog post that explain more in detail:

Render dangerous content with React

TL;DR

React uses dangerouslySetInnerHtml prop to render raw html, and works pretty much well for almost all the cases, but what if your html has some scripts tags inside??

When you use dangerouslySetInnerHtml on a component, internally react is using the innerHTML property of the node to set the content, which for safety purposes doesn't execute any javascript.

This behavior seemed very odd to me (I mean the prop name contains the word dangerously, and also you need to pass an object with a __html propery, which is on purpose, so you really know what you doing), although it have totally sense now, still doesn't solve my issue

After a little bit of search I found that the document has something called Range, this API let you create a fragment of the document, so using that I created dangerously-set-html-content.

This React component renders html from a string, and executes any js code inside of it!! 🎉

🚨🚨 USE IT AT YOUR OWN RISK 🚨🚨

Install

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

Usage

import React from 'react'

import InnerHTML from 'dangerously-set-html-content'

function Example {

  const html = `
    <div>This wil be rendered</div>
    <script>
      alert('testing')
    </script>

  `

  return (
    <InnerHTML html={html} />
  )
}

This will also work for scripts with the src attribute set it

Note: By default this component only inserts the js that you pass in on the first render, after that it doesn't rerender. See https://github.com/christo-pr/dangerously-set-html-content/pull/7. You can pass allowRerender prop to rerender the component

Available Props

Prop	Required	Value	Description
`html`	Yes	String	The stringified code you want to execute
`allowRerender`	No	Boolean	If set to `true` will allow to rerender the component

Development

After cloning the repo and install all deps, you can do to example/ directory to install the example dependencies (the package will be a symlink to the file in src/)

Once you're on that directory you can run:

npm start

And an example all will be open.

Running unit test

Run:

npm test

christo-pr / dangerously-set-html-content

readme