web安全策略和同源策略的意义
如果登陆了一个网站，不小心又打开另一个恶意网站，如果没有安全策略，则他可以对已登录的网站进行任意的dom操作、伪造接口请求等，因此安全策略是必要的；
浏览器的同源策略限制了非同源的域名之间不可以对DOM进行读写操作、不可以读取非同源的cookie、indexDB、localStorge等数据与资源
XSS-跨站脚本攻击
理解
由于实际业务不可能完全不引用第三方的资源，因此需要跨域访问，而支持第三方资源引用就会容易引起XSS攻击。XSS是一种代码注入攻击，攻击者在网站注入恶意脚本，在浏览器上运行，从而盗取用户cookie等信息。
危害特点
- 窃取cookie信息，利用CORS将cookie上传到攻击者的服务器
- 监听用户行为，比如利用addEventListener监听用户键盘事件，获取用户输入的用户名密码等
- 修改DOM，伪造登陆窗口，骗取用户输入的用户名和密码等信息
- 生成悬浮广告，在页面生成悬浮广告，诱导用户点击
攻击类型
- 存储型XSS：攻击者将恶意脚本注入到有漏洞的服务器，当浏览器访问带有恶意脚本的页面时，就会上传用户信息到恶意服务器
- 反射型XSS：攻击者诱导用户点击一个连接，然后将带有恶意代码的请求发送到服务器，服务器将恶意代码返回反射到浏览器，完成最终XSS攻击
- 基于DOM的XSS：这个攻击方法不会涉及到服务器，是在web页面资源传输过程中或者用户使用web页面过程中 修改web页面的数据。这个劫持类型较多，例如本地软件劫持、路由器劫持
防御方法
无论是哪种攻击类型，他们的共同特点都是先将恶意脚本注入浏览器，然后将用户信息发送到恶意服务器。所以阻止XSS攻击要从防止浏览器脚本注入和阻止恶意消息的发送方面来实施。
- 服务器对输入脚本关键字符进行过滤或转码（例如 将<script 转为 <script>）
- 使用验证码，防止伪造用户提交
- 对于不受信任的输入，限制输入长度
- 使用HttpOnly属性标记cookie（HttpOnly属性标记的cookie只能用于请求携带，不能通过js访问）
- 采用纯前端渲染。不使用服务器渲染，通过接口请求的方式，然后使用innerText、setAttrbute等方法设置内容与属性
- 使用CSP安全策略。CSP的本质是建立白名单。可以指定哪些外部资源可以加载 ，来避免恶意第三方脚本的加载；也可以禁止向第三方域提交数据 ，防止信息外泄；还可以禁止执行内联脚本和未授权的脚本 ；还提供了上报机制，这样可以帮助我们尽快的发现有哪些XSS攻击，然后进行修复。
CRSF-跨域请求伪造攻击
理解
CRSF是指跨站请求伪造攻击，攻击者诱导用户进入第三方网站，在攻击者的网站中，利用用户的登陆状态伪造跨域请求，绕过服务器的用户验证，从服务器获取信息。
他的本质是利用同源请求会携带cookie发送到服务器，来冒充用户。
攻击类型
- get类型：比如用户在网站中的img标签中构建一个请求，在用户点击时自动发送请求
- post类型：比如构建一个隐藏的表单，在用户进入页面时自动提交
- 链接类型：比如在a标签的href属性中构建一个请求，在用户点击的时候自动发送
防御方法
他的攻击特点是利用服务器的漏洞，因此主要是提升服务器的安全性。
- 利用cookie的SameSite属性。Strict-完全禁止第三方cookie；Lax-对于get链接的形式可以携带；None-没有任何限制
- 验证请求的来源站点。服务器根据http请求头中的origin或referer判断是否为运行的站点，如果这两个值都不存在，则直接拒绝该请求。（缺点是有些情况referer也可以被伪造）
- 使用CSRF Token验证。浏览器向服务器发起请求时，服务器生成一个随机的CSRF Token，当浏览器再次发送请求时携带此Token，服务器会根据这个token进行验证。（缺点是流程繁琐，每个请求都要携带Token；其次如果服务器搭载了负载均衡，如果请求被分配到其他服务器，这个服务器session中没有缓存这个token，也无法完成验证）
- 对cookie进行双重验证。浏览器访问页面时，服务器向请求域名中注入一个随机字符串cookie，当用户再次访问时，获取cookie中的字符串并拼接到URL中，服务器根据参数中的字符串和cookie中的字符串进行对比，完成验证。（优点：比上述两种实现都为简单方便；缺点：如果同时遭遇了XSS攻击，则也将失效）