react使用dangerouslySetInnerHTML(类似vue中的v-html)防止 XSS 攻击

741 阅读1分钟

类似vue里面的 v-html 在react中使用

<div dangerouslySetInnerHTML={{__html:'<h1 onclick=alert('你被攻击了')>6666</h1><img src=xxx.js/>'}}>

会有被攻击的危险

解决办法:

npm i dompurify
import DOMPurify from 'dompurify'
dangerouslySetInnerHTML=
{{ __html: DOMPurify.sanitize('<h1 onclick=alert('你被攻击了')>6666</h1><img src=xxx.js/>') }

=>结果:

'<h1>6666</h1>'