Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
dangerously-set-html-content
Advanced tools
Render raw html at your own risk!
Here's a blog post that explain more in detail:
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 🚨🚨
yarn add dangerously-set-html-content
// or
// npm install --save dangerously-set-html-content
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
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 |
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.
Run:
npm test
MIT © christo-pr
FAQs
Render raw html at your own risk!
We found that dangerously-set-html-content demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.