React使用dangerouslySetInnerHTML渲染HTML片段

• Vue中可以通过v-html将HTML片段直接渲染在页面上，v-html对字符串进行过滤输入和转义输出可以有效避免xss攻击
• React中同样可以渲染HTML————dangerousSetInnerHtml，和v-html类似

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

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

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