React使用dangerouslySetInnerHTML渲染HTML片段

正在加载今日诗词....

2022-08-01

const main = () => {
  const html = '<h1>hello world</h1>';
  return <div dangerousSetInnerHtml={{ __html: html }}></div>
}

而dangerousSetInnerHtml渲染的HTML内容是没有经过过滤或转义的，所以很容易遇到XSS攻击

可以通过 dompurify.sanitize 进行过滤

const main = () => {
  const html = '<h1>hello world</h1>';
  return <div dangerousSetInnerHtml={{ __html: DOMPurify.sanitize(html) }}></div>
}