XSS （跨站脚本）攻击
页面中的第三方资源引用和 CORS 带来了很多安全问题，其中最典型的就是XSS 攻击。
XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。
恶意脚本都能做哪些事情：
- 窃取 Cookie 信息
- 监听用户行为
- 修改 DOM伪造假的登录窗口，用来欺骗用户输入用户名和密码等信息
- 在页面内生成浮窗广告
XSS攻击可以分成两种类型：
- 非持久型攻击
- 持久型攻击
持久型攻击
1.存储型 XSS 攻击
存储型 XSS 攻击大致需要经过如下步骤：
- 首先黑客利用站点漏洞将一段恶意 JavaScript 代码提交到网站的数据库中；
- 然后用户向网站请求包含了恶意 JavaScript 脚本的页面；
- 当用户浏览该页面的时候，恶意脚本就会将用户的 Cookie 信息等数据上传到服务器。
典型案例：2015年喜马拉雅FM站点就因为服务器没有对用户输入的专辑名称做输入校验，黑客直接将一段恶意脚本当做文本提交给了服务器，然后当用户访问该专辑页面的时候，该恶意脚本就会被执行，随后窃取cookie完成攻击。
非持久型攻击
2.反射型 XSS
用户将一段含有恶意代码的请求提交给 Web 服务器，Web 服务器接收到请求时，又将恶意代码反射给了浏览器端，这就是反射型 XSS 攻击。
反射型XSS 攻击大致需要经过如下步骤：
- 用户发给服务器的请求携带了参数，并且参数中被插入了恶意脚本；
- 服务器收到请求后返回的数据中有用户刚刚提交的参数也就是恶意脚本；
- 当用户浏览页面的时候，恶意脚本就会将用户的 Cookie 信息等数据上传到服务器；
Web 服务器不会存储反射型 XSS 攻击的恶意脚本，这是和存储型XSS 攻击不同的地方。
存储型 XSS 攻击和反射型 XSS 攻击都是需要经过 Web 服务器来处理的，因此可以认为这两种类型的漏洞是服务端的安全漏洞。
3.基于 DOM 的 XSS 攻击
基于 DOM 的 XSS 攻击是不牵涉到页面 Web 服务器的。
案例：在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据。
相同点：
三者都是先往浏览器中注入恶意脚本，然后再通过恶意脚本将用户信息发送至黑客部署的恶意服务器上。
不同点：
注入的方式不一样，有通过服务器漏洞来进行注入的，还有在客户端直接注入的。
怎么阻止XSS攻击？
我们知道存储型 XSS 攻击和反射型 XSS 攻击都是需要经过 Web 服务器来处理的，因此可以认为这两种类型的漏洞是服务端的安全漏洞。而基于 DOM 的 XSS 攻击全部都是在浏览器端完成的，因此基于 DOM 的 XSS 攻击是属于前端的安全漏洞。
我们分别从服务端和前端两个方向来分析阻止XSS攻击的解决办法。
1.服务器设置 HttpOnly 属性
由于很多 XSS 攻击都是来盗用 Cookie 的，因此还可以通过使用 HttpOnly 属性来保护我们 Cookie 的安全。
顾名思义，使用 HttpOnly 标记的 Cookie 只能使用在 HTTP 请求过程中，所以无法通过 JavaScript 来读取这段 Cookie。 服务端设置响应头set-cookie的时候，将其属性HttpOnly设置为true。
2.服务器对输入脚本进行过滤或转码
过滤：HTML中可以获取资源的标签如：script、link、style、meta等文本进行过滤。
转码：浏览器会对特殊字符转换成文本内容显示，而不是一段可执行的代码。
- 对< 、>、/、等字符进行转码：
< 转码成 <
> 转码成 >
/ 转码成 /
- 对非数字、字母的字符都转为小于256的ASCII码字符。
3.浏览器充分利用CSP(内容安全策略)
CSP 的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联 JavaScript 代码。通过这些手段就可以大大减少 XSS 攻击。
具体来讲 CSP 有如下几个功能：
- 限制加载其他域下的资源文件，这样即使黑客插入了一个 JavaScript 文件，这个JavaScript 文件也是无法被加载的；
- 禁止向第三方域提交数据，这样用户数据也不会外泄；
- 禁止执行内联脚本和未授权的脚本； 还提供了上报机制，这样可以帮助我们尽快发现有哪些 XSS 攻击，以便尽快修复问题。
同源策略可以查看：[浏览器安全之Web页面安全（一）同源策略（Same-origin policy）]juejin.cn/post/716920…
CSRF攻击可以查看：[浏览器安全之Web页面安全（三）CSRF（跨站请求伪造）攻击]juejin.cn/post/716942…
有问题欢迎在评论区指出！相互交流才能一起进步！
