浏览器安全可分为三大块——Web页面安全、浏览器网络安全和浏览器系统安全。这里是Web页面安全。
一、浏览器的同源策略
如果两个url协议、域名和端口都相同，那么就称这两个URL同源。浏览器默认同源的两个源之间是可以相互访问资源和操作DOM的。两个不同的源之间想要互相访问资源或者操作DOM，那么会有一套基础的安全策略的制约，我们把这称为同源策略。
同源策略主要表现在DOM、Web数据和网络这三个层面
１、DOM层面
同源策略限制了来自不同源的JavaScript脚本对当前DOM对象读和写的操作
要是不同源的站点操作DOM就会报错：Uncaught DOMException
２、Web数据
同源策略限制了不同源站点读取当前站点的Cookie、IndexDB、LocalStorage等数据。
3、网络
同源策略限制了通过XMLHttpRequest等方式将站点数据发送给不同源的站点。默认情况下，XMLHttpRequest不能访问跨域的资源
二、牺牲一些安全性，增加一些便利性
浏览器牺牲了一些安全性，来让Web开发和使用相对便捷。让出的安全性就衍生出了一些安全问题。比方说引入外部资源文件就出现XSS风险，进而出现CSP减少XSS攻击。
1、页面中可以嵌入第三方资源
页面需要引入外部不同源的文件，当恶意程序通过各种途径向HTML插入script标签的恶意脚本，当页面启动时，这个脚本就会执行。它能修改用户的搜索结果、改变一些内容的链接指向、窃取如Cookie、IndexDB、LoacalStorage等数据，通过XSS的手段发送给服务器。为了应对XSS攻击，浏览器引入了内容安全策略CSP，CSP的核心思想是让服务器决定浏览器能够加载哪些资源，让服务器决定浏览器是否能够执行内联JavaScript代码，CSP能够大大减少XSS攻击。
2、跨域资源共享和跨文档消息机制
XMLHttpRequest因为同源策略不能访问不同源的资源，但实际上很多时候又需要访问不同源资源。
为了访问不同源的资源，引入了跨域资源共享（CSRS），使用此机制可以进行跨域访问控制，是跨域可以安全的进行。
两个不同源的页面不可以互相操作DOM，在实际应用中，经常需要两个不同源之间的DOM之间进行通信，于是引入了跨文档消息机制，即通过window.postMessage的JavaScript接口来和不同源的DOM进行通信
三、XSS攻击
XSS（Cross Site Scripting）是跨站脚本攻击，为了与“CSS”区分，所以叫XSS，翻译过来就是跨站脚本
最开始的时候，这种攻击是通过跨域来实现的，所以叫“跨站脚本”。但是现在往HTML中注入恶意代码的方式越来越多了，所以是否跨域注入脚本已经不是唯一的注入手段，但是XSS这个名字却一直保留至今。
1、恶意脚本可以做哪些事情
- 可以窃取Cookie信息。恶意JavaScript可以通过“document.Cookie”获取Cookie信息，然后通过XMLHttpRequest或者Fetch加上CORS功能将数据发送给恶意服务器；恶意服务器拿到用户的Cookie信息之后，就可以在其他电脑上模拟用户的登录
- 可以监听用户的行为。恶意JavaScript可以使用“addEventListener”接口来监听键盘事件，比如可以获取用户输入的信用卡等信息，欺骗用户输入用户名和密码等信息
- 可以修改DOM伪造假的登录窗口，用来欺骗用户输入用户名和密码等信息
- 可以在页面内生成浮窗广告，这些广告严重地影响用户体验
- 其他很多事情
2、恶意脚本是如何注入的
通常情况下，被恶意注入JavaScript脚本是非常危险的。所以要知道有哪些注入方式。通常情况下，主要有存储型XSS攻击、反射型XSS攻击和基于DOM的XSS攻击三种方式来注入恶意脚本
① 存储型XSS攻击
攻击者将恶意JavaScript代码提交给服务器的数据库，用户访问服务器时，恶意JavaScript代码随着正常请求的页面返回给用户。
② 反射型XSS攻击
在一个反射性XSS攻击过程中，恶意JavaScript脚本属于用户发送给网站请求的一部分，随后网站又将恶意JavaScript脚本返回给用户。和存储型XSS类似的是都要先把恶意JavaScript脚本发送给服务器，但是反射型XSS不会存储这段恶意JavaScript代码，而是直接返回。主要是通过用户点击恶意链接实现的
③ 基于DOM的XSS攻击
基于DOM的XSS攻击都是在浏览器端完成的，不要经过服务器，基于DOM的XSS攻击是属于前端的安全漏洞。黑客通过各种手段将恶意脚本注入到用户的页面中，比如通过网络劫持在页面传输过程中修改HTML页面内容，这种劫持类型很多，比如WiFi路由器劫持、通过本地恶意软件劫持，它们的共同点是在Web资源传输过程或者在用户使用页面的过程中修改Web页面的数据。
3、如何阻止XSS攻击
存储型XSS和反射型XSS都是需要经过Web服务器来处理的，因此可以认为这是服务器的安全漏洞。而基于DOM的XSS攻击全部都是在浏览器端完成的，因此基于DOM的XSS攻击是属于前端的安全漏洞。
① 服务器对输入脚本进行过滤转码
- 过滤就是把script标签以及其中的内容直接过滤掉。（就是删除）
- 转码就是把script标签等敏感字符替换
② 充分利用CSP
虽然服务器过滤转码能够阻止XSS攻击的发生，但完全依靠服务器端依然是不够的，我们还需要CSP等策略充分地利用起来，以降低XSS攻击带来的风险和后果。
- 限制加载其他域下面的资源文件，这样即使黑客插入了一个JavaScript文件，这个JavaScript文件也是无法被加载的
- 禁止向第三方域提交数据，这样用户数据也不会外泄
- 禁止执行内联脚本和未授权的脚本
- 提供了上报机制，这样可以帮助我们尽快发现有哪些XSS攻击，以便尽快修复问题
③ 使用HttpOnly属性
很多XSS攻击都喜欢盗用Cookie，服务器可以在设置Cookie时添加HttpOnly属性，这样document.cookie就无法获取cookie了。
四、CSRF攻击
CSRF(Cross Site request forgery)——跨站请求伪造。指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的登陆状态发起跨站的请求。主要有三种方式去实施CSRF攻击：自动发起Get请求、自动发起Post请求、引诱用户点击链接。和XSS不同的是，CSRF攻击不需要将恶意代码注入用户的页面，仅仅是利用服务器的漏洞和用户的登录状态来实施攻击。
1、CSRF是如何发起伪造请求的
① 自动发起Get请求
黑客把一个请求接口隐藏在img标签中，欺骗浏览器这是一个图片资源。页面加载的时候浏览器会自动发起img的资源请求，如果服务器没有对该请求做判断的话，就会被执行。如果这是一个转账请求，钱就被转走了
② 自动发起Post请求
黑客在他的页面构造了一个隐藏的表单，表单就是一个转账接口。当用户打开该站点之后，这个表单就会被自动执行提交；当表单被提交，就会执行转账操作。
③ 引诱用户点击链接
黑客还可以诱惑用户去点击黑客站点的链接，这种方式常常出现在论坛或者恶意邮件上。黑客会采用很多方式去诱惑用户点击链接。比如黑客说这是一张美女图片，放了图片的下载地址，而这个下载地址实际上是黑客用来转账的接口，一旦用户点击了这个链接，他的钱就会被转到黑客账户上了。
2、如何阻止CSRF
CSRF发起攻击有三个必要条件：目标站点必须要有CSRF漏洞、用户要登录过目标站点，并持有目标站点的Cookie、第三个需要用户打开一个第三方站点，可以是黑客的站点或者是一些论坛
① 利用Cookie的SameSite属性
在HTTP响应头中，通过设置set-cookie字段设置Cookie时，可以带上SameSite选项，SameSite有三个值：Strict、Lax和None
- Strict会完全禁用第三方Cookie。从B网站访问A网站无论如何都不会带上A网站的Cookie
- Lax相对宽松一点，从B网站提交Get表单到A网站或者从B网站打开A网站的链接都会带上Cookie，Post或者img、iframe等都不会携带Cookie
- None的话，就是任何情况下都可以发生Cookie
② 验证请求的来源站点
服务器可以通过验证请求来源的站点，禁用来自第三方的请求。
Referer是请求头中的一个字段，记录了HTTP请求的来源地址，Referer可以告诉服务器HTTP请求的来源，这只是一个选项，因为有些场景不适合将Referer发送给服务器。
Origin属性，通过XMLHttpRequest、Fetch发起跨站请求或者通过Post方法发送请求时，都会带上Origin属性。Origin属性和Referer的区别是Origin只包含了域名信息，没有包含具体的URL路径，这是因为有些站点因为安全考虑，不想把源站点的详细路径暴露给服务器。
服务器的策略是优先判断Origin，如果请求头中没有包含Origin属性，再根据实际情况判断是否使用Referer值
③ CSRF Token
CSRF Token验证分为两步
第一步：客户端发起请求后，服务器生成一个CSRF Token，即服务器生成的字符串，然后将该字符串植入到返回的页面中
第二步：在浏览器端如果要发起转账请求，那么需要带上页面中的CSRF Token，然后服务器会验证该Token是否合法。如果是从第三方站点发出的请求，那么将无法获取到CSRF中的值，所以即使发出了请求，服务器也会因为CSRF Token不正确而拒绝请求。
