页面安全问题的主要原因是浏览器为同源策略开的两个“后门”：一个是在页面中可以任意引用第三方资源，另一个是通过 CORS 策略让 XMLHttpRequest 和 Fetch 去跨域请求资源。
XSS
跨站脚本攻击。往用户访问的页面注入恶意脚本进而达到攻击的目的。
行为
- 窃取用户的cookie。通过document.cookie获取到用户的cookie，然后通过XMLHttpRequest/Fetch加上CORS或者image发送到黑客服务器，从而模拟用户的登陆行为
- 监听用户的信息。通过addEventListener监听用户的行为
- 通过修改DOM伪造假的登陆窗口
- 注入广告，影响用户体验
注入方式
存储型XSS，将恶意脚本提交到服务端，用户访问页面返回并执行脚本
-
反射型XSS
- 恶意脚本属于用户发送到网站请求中的一部分，网站再把恶意脚本返回给用户
- 诱导用户点击链接：
http://localhost:3000/?xss=<script>做一些坏事</script> - web服务器不会存储反射型XSS攻击的恶意脚本
基于DOM的XSS
通过网络劫持修改页面内容
阻止方式
- 客户端和服务器对输入输出内容进行转义过滤
- 充分利用CSP
- cookie设置HttpOnly属性，这样cookie就只可以使用在http请求过程中
CSRF
跨站请求伪造。黑客诱导用户打开站点，在站点内利用用户的登陆信息发起请求伪造。CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事。
特征
CSRF攻击的三个必要条件：
- 目标站点一定要有CSRF漏洞
- 浏览器保持着目标站点的登陆状态
- 需要用户打开一个黑客站点
攻击方式
-
自动发起GET请求
- 在黑客页面，将接口地址设置成img的src，自动发起请求
-
自动发起POST请求
- 黑客在网站内隐藏一个form表单
-
诱导用户点击链接
- 在邮件或者论坛诱导用户点击链接，从而发起请求
阻止方式
-
充分利用cookie的SameSite属性
Strict； 浏览器完全禁止向第三方站点发送cookie
-
Lax
- 从三方站点打开链接或从第三方站点提交GET请求方式的情况会携带cookie
- 第三方站点通过POST方式、img、iframe发起的请求不会携带cookie
None；任何情况下都会发送cookie
-
服务器验证请求的来源站点
-
Referer字段
- 记录了HTTP请求的来源地址
- 不太安全因为是把源站点完整的路径告诉服务器
-
Origin字段
- 记录了源站点的域名
-
-
CSRF Token
- 第一步，浏览器向服务器发起请求时，服务器生成一个CSRF Token（字符串），返给浏览器页面
- 浏览器发起请求时，将该token带到服务器，然后服务器验证其合法性，如果从第三方站点请求将无法获取到CSRF Token
