一、防 XSS 攻击

1.目标

清理正文中的不安全元素，防止 XSS 安全漏洞.

2.何为 XSS 攻击

人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，有人将跨站脚本攻击缩写为XSS。

XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

3.如何防 XSS 攻击

（1）思路

使用 dompurify 对 HTML 内容进行净化处理。

（2）实现

// 第一步：下包
// npm i dompurify @types/dompurify -D
// 第二步：页面引入
import DOMPurify from 'dompurify'
// 第三步：页面调用使用
const TestXSS = () => {
  const imgXSS = '<img onerror="localStorage.removeItem(`xxxxxx`)" src=""/>'
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(imgXSS) }} />
    </div>)
}
export default TestXSS