XSS 攻击 ----防止XSS 攻击

什么是XSS攻击

• 人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，有人将跨站脚本攻击缩写为XSS。
• XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash 或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。 [1]

如下XSS攻击实例

如下代码就是原本p标签里面只包含内容文本的，但是别人偏偏就不写正常文本，他写一个img标签然后写一个循环，代码执行一直执行alert（111） 这个就叫做XSS攻击

export default function Question () {
  const content = `
    <p>通过附文本编译的内容<img οnerrοr="while(1){alert(111)}" src='https://xxxxxx.com'>'></p>
    <h1>nihoa</h1>`

  return (
    <div className="dg-html">
      Question
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  )
}

解决XSS攻击

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

1.安装包

npm i dompurify

2. 在页面中调用 dompurify 来对文章正文内容做净化：

import DOMPurify from 'dompurify'
export default function Question () {
  const content = `
    <p>通过附文本编译的内容<img οnerrοr="while(1){alert(111)}" src='https://xxxxxx.com'>'></p>
    <h1>nihoa</h1>`

  return (
    <div className="dg-html">
      Question
      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content || '') }} />
    </div>
  )
}