开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第10天，点击查看活动详情
前言
在使用互联网过程中，网络安全是非常重要的一个环节，虽然前端不是专业的网络安全员，但是还有一些攻击与之相关，我们需要了解并且预防一下，今天我们来看下XSS攻击。
定义
XSS:跨脚本攻击，该攻击方式就是往网站注入恶意脚本，让其在浏览器上运行，盗取用户的信息等。该攻击可能造成的影响如下：
- 破坏页面的结构；
- 获取页面的信息，如cookie等。
- 通过占用服务器资源，让用户无法再次访问。
- 将页面上的一些链接指向某些网站。 XSS本质就是没有将代码进行过滤，恶意代码跟正常代码一样进行了运行。
类型
XSS的攻击类型有3种，下面我们来看下各自的概念。
DOM型
DOM攻击类型：通过修改页面的DOM进行攻击，大致的操作如下：
- 创造出包含恶意代码的链接，用户在页面打开该链接。
- 浏览器解析执行恶意代码，然后执行攻击者的指定操作，如窃取用户的信息等发送给攻击的人。
存储型
存储攻击类型：将恶意代码存储到目标服务器上，当接口请求数据时，恶意代码就会从接口传回并执行。
- 将恶意代码提交到服务器的数据库中，用户访问网站时，从数据库中请求回来的数据会带着恶意代码。
- 浏览器在接收到数据后会解析执行，恶意代码也会被执行，达到攻击目的，窃取信息等。 存储型攻击一般存在于商品评价、私信等保存用户数据的网站。
反射型
反射性攻击类型：创建一个恶意代码的url，诱导用户点击，服务端接收数据并返回给浏览器，浏览器解析恶意代码并执行。
- 跟DOM类型相似创建url，用户代开url，服务端会解析处理数据并返回给浏览器。
- 浏览器接到相应数据后执行恶意代码，达到XSS攻击。 对比三种攻击类型，核心都是让浏览器去执行恶意代码，其中DOM型是直接在浏览器执行，而存储型与反射型都在服务端进行攻击，存储是放到数据库中，反射型则是需要点击链接请求。
预防
了解XSS攻击，最重要的是预防XSS攻击。根据攻击方式我们可以从以下方面预防：
- 浏览器执行方面：
在开发过程中对一些符号进行转义，避免恶意代码的执行。我们可以在开发过程中简单的将一些字符：
function (str) {
let s = ''
if (str.length == 0) return ''
s = str.replace(/&/g, '&')
s = s.replace(/</g, '<')
s = s.replace(/>/g, '>')
s = s.replace(/ /g, ' ')
s = s.replace(/\'/g, ''')
s = s.replace(/\"/g, '"')
return s
}
不使用服务器渲染(SSR)，都用前端方式去写页面。
- 资源方面：可以设置白名单，让浏览器知道哪些资源是可以加载与执行的，设置白名单的方式是CSP，开启方式有两种：
http中设置Content-Security-Policy。
meta标签中进行设置。
<meta http-equiv="Content-Security-Policy">
总结
XSS攻击就是注入恶意代码，想办法让浏览器去执行，完整的预防XSS攻击还是挺难的，开发过程中要有这样的想法，尽可能预防XSS。
