This package provides a syntactic sugar over the raw dangerousSetInnerHTML.
In real projects, at least in my experience, the usage of dangerousSetInnerHTML is extensive.
Which brings two problems:
-
It's too long and ugly for its frequency. Also JSX does not look like HTML anymore as tag contents are passed via attributes. Which kinda defeats the usage point of JSX.
-
The term "dangerous" is misleading. It represents something a programmer considers safe(!) instead. So it kinda spams the vision with irrelevant signals of false danger decreasing the capability to notice real threats.
<h1 dangerouslySetInnerHTML={{__html: page.title}}></h1>
<div dangerouslySetInnerHTML={{__html: renderMD(page.body)}}></div><Safe.h1>{page.title}</Safe.h1>
<Safe.div>{renderMD(page.body)}</Safe.div>React-Safe is a thin wrapper over dangerouslySetInnerHTML so all the usual concerns about XSS attacks and security in general apply. Check the above link for more information.
MIT