2.XSS攻击

XSS 跨站脚本攻击

为何会有XSS攻击？

因为我们默认页面中可以引用任意第三方资源，然后又引入 CSP 策略来加以限制；默认 XMLHttpRequest 和 Fetch 不能跨站请求资源，然后又通过 CORS 策略来支持其跨域。就因为支持页面中的第三方资源引用和 CORS 也带来了很多安全问题，其中最典型的就是 XSS 攻击

什么是 XSS 攻击

XSS 全称是 Cross Site Scripting，翻译就是“跨站脚本”

XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段

如果页面被注入了恶意 JavaScript 脚本，恶意脚本都能做哪些事情一些列子：

• 可以窃取 Cookie 信息
• 可以监听用户行为
• 可以通过修改 DOM 伪造假的登录窗口，用来欺骗用户输入用户名和密码等信息
• 还可以在页面内生成浮窗广告，这些广告会严重地影响用户体验

怎么被注入的

存储型 XSS 攻击、反射型 XSS 攻击和基于 DOM 的文档型XSS 攻击

1.存储型 XSS 攻击

存储型，就是恶意脚本被存储了起来

首先黑客利用站点漏洞将一段恶意 JavaScript 代码提交到网站的数据库中；然后用户向网站请求包含了恶意 JavaScript 脚本的页面；当用户浏览该页面的时候，恶意脚本就会执行，可能会将用户的 Cookie 信息等数据上传到他的服务器。

比如你去听歌，打开了别人创建的歌单，别人的歌单可能在设置一些信息如歌单描述啊时注入了js脚本，被服务器保存，然后服务器返回给你了，脚本就会在你本地执行

2.反射型 XSS 攻击

反射型 XSS 攻击过程中，恶意 JavaScript 脚本属于用户发送给网站请求中的一部分，随后网站又把恶意 JavaScript 脚本返回给用户

比如你点开了一个别人发你的恶意链接其实是如下链接

http://bilibli/?xss=<script>alert('你被xss攻击了')</script>

服务器端会拿到xss参数, 然后将内容返回给浏览器端，浏览器将这些内容作为HTML的一部分解析，发现是一个脚本，直接执行，这样就被攻击

3.基于 DOM 的 XSS 攻击

文档型XSS攻击，不牵涉到页面 Web 服务器的

比如 网络劫持，有通过 WiFi 路由器劫持的，有通过本地恶意软件来劫持的

共同点是在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据。

如何防御

1.服务器对输入脚本进行过滤或转码

不管是反射型还是存储型 XSS 攻击，我们都可以在服务器端将一些关键的字符进行转码：

code:<script>alert('你被xss攻击了')</script>

过滤删掉script：

code:

可以转码：

code:<script>alert('你被xss攻击了')</script>

这样在前端就不会执行了

2.充分利用 CSP

CSP 服务器决定浏览器加载哪些资源 有如下几个功能：

• 限制加载其他域下的资源文件，这样即使黑客插入了一个 JavaScript 文件，这个 JavaScript 文件也是无法被加载的；
• 禁止向第三方域提交数据，这样用户数据也不会外泄；
• 禁止执行内联脚本和未授权的脚本；
• 还提供了上报机制，这样可以帮助我们尽快发现有哪些 XSS 攻击，以便尽快修复问题。

3. 利用 HttpOnly

比如：

set-cookie: NID=189=M8q2FtWbsR8RlcldPVt7qkrqR38LmFY9jUxkKo3-4Bi6Qu_ocNOat7nkYZUTzolHjFnwBw0izgsATSI7TZyiiiaV94qGh-BzEYsNVa7TZmjAYTxYTOM9L_-0CN9ipL6cXi8l6-z41asXtm2uEwcOC5oh9djkffOMhWqQrlnCtOI; expires=Sat, 18-Apr-2020 06:52:22 GMT; path=/; domain=.google.com; HttpOnly

可以看到在服务器返回的set-cookie头中有HttpOnly，这样js就不可以读取cookie了，无法通过 document.cookie 是来读取的。

总结

XSS 攻击就是黑客往页面中注入恶意脚本，然后将页面的一些重要数据上传到恶意服务器。

有三种

• 存储型 XSS 攻击
• 反射型 XSS 攻击
• 文档型 XSS 攻击

防御：

• 服务器对存储的内容转码或者过滤
• 利用 CSP
• 利用Cookie 的 HttpOnly 属性