一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情

XSS攻击介绍

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

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

反射性XSS

非持久型XSS（最易出现），当用户在网站的地址栏输入URL，从服务器端获取到数据时，网站页面会根据返回的信息而呈现不同的返回页面，如果这个时候恶意用户在页面中输入的数据不经过验证且不经过超文本标记语言的编码就录入到脚本中，就会产生漏洞。

存储式XSS

存储式XSS是应用最为广泛而且有可能影响到Web服务器自身安全的漏洞，骇客将攻击脚本上传到Web服务器上，使得所有访问该页面的用户都面临信息泄漏的可能，其中也包括了Web服务器的管理员。这种类型的漏洞可以使恶意用户将javascrip永久性的存储在数据库中。

DOM性XSS

DOM型： 是指通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击。DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞。

攻击流程

恶意的用户通过漏洞将js插入到该web脚本中，欺骗新用户去访问，当用户打开有漏洞的页面时，脚本就会自动运行，当窃取到用户信息后，将该信息发送到恶意用户自行搭建的获取信息的接口。

例子

import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
import { useEffect } from 'react'
export default function Question () {
  useEffect(() => {
    // 配置 highlight.js
    hljs.configure({
      // 忽略未经转义的 HTML 字符
      ignoreUnescapedHTML: true
    })
    // 获取到内容中所有的code标签
    const codes = document.querySelectorAll('.dg-html pre code')
    codes.forEach((el) => {
      // 让code进行高亮
      hljs.highlightElement(el as HTMLElement)
    })
  }, [])
  const content = `<pre>
  <code>console.log(abc)</code>
  <code>console.log(abc)</code>
</pre>
<h3>nihoa</h3>
<pre>
  <code>console.log(abc);xxx.forEach(item=>{console.log(1)})</code>
</pre>`

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

解决方案

实现思路

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

操作步骤

安装包

npm i dompurify @types/dompurify -D   //不用TS可以不下@types/dompurify

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

import DOMPurify from 'dompurify'

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

什么是XSS攻击