# cookie
## cookie都有哪些api
1. value
2. same-site：禁止网页引入的第三方js设置cookie，从而达成csrf攻击，csrf攻击就是跨站防御伪造，可以通过获取cookie来伪造用户身份。
（比如一个网页引入了京东，然后京东会获取当前信息并设置到京东域名下的cookie的信息），
same-size默认是**严格模式strict**。
严格模式下，cookie在任何情况下都不能作为第三方cookie使用，
宽松模式下，cookie可以被请求是get，且会法生页面跳转的请求所使用
3. http-only：不允许脚本读取，可以预防xss攻击，因为xss攻击就是往脚本注入恶意代码，从而做出一些恶意的事情，比如脚本获取cookie
4. secure ：只能用于https请求携带
## 客户端怎么设置cookie
document.cookie=""
其中值是一个由键值对组成的字符串
## cookie怎么设置跨域
由于同源策略的原因，默认cookie是不开启跨域的。可以通过在请求头设置with-credentials=true，以及服务端设置access-control-allow-orgin和access-control-allow-credentials
## cookie默认多大
4kb
# 浏览器安全
## 网页攻击方式
浏览器攻击方式：xss攻击，csrf攻击，中间人攻击，网络劫持
### xss攻击（恶意代码攻击）
通过往页面注入恶意代码，达成攻击的目的，
#### 常见的攻击方式有
1. 存储型：恶意代码存储在服务器，返回在html中
2. 反射性：恶意代码放在url中
3. dom型：取出和执行恶意代码都是在浏览器端完成
#### 怎么预防？
1. 设置cookie不能被第三方获取
2. 对代码进行转义
3. 建立csp白名单，告诉浏览器哪些外部资源可以被加载，
（1）、设置http首部的content-security-policy
（2）、设置meta，<meta http-equiv="content-security-policy"
### csrf攻击，跨站防御伪造
#### 常见的攻击方式有
1. get请求，就是模拟图片链接
2. post请求，就是模拟表单点击进行攻击
3. 链接攻击，模拟链接，让用户点击
#### 怎么预防？
1. 进行同源检测
2. 使用token
3. 设置cookie不能被第三方使用，设置same-site
4. referer 验证请求来源网站
### 中间人攻击
攻击者与被攻击的两端分别联系，让被攻击者以为他们正在进行一个安全的私密的通信，攻击者可以随意拦截通讯双方的通话并插入新的内容
### 网络劫持
#### 常见的劫持方式
1. dns劫持：点击京东跳转淘宝
2. http劫持：点击谷歌发现都是贪玩蓝月的广告
## 跨域
当请求的协议，域名，端口号中的任意一个和当前页面的url不同则视为跨域
### 为什么需要同源策略
因为为了防止csrf攻击。csrf攻击就是利用用户的登录状态发起恶意请求。
如果没有同源策略，恶意ajax就会诱导用户从已登录的被攻击网站触发ajax，
此时浏览器会将携带用户信息的cookie到目标服务器，并进行攻击
### 如何解决跨域
1. cors请求：
由后端配置，后端会返回一个Access-contro-allow-origin,表示允许跨域的源地址，
前端发送请求时会在请求头字段发送origin来表明本次请求来自哪个源（url）
（1）、简单请求：使用get，post，head方法作为请求方法，
并且contentType的格式是text/plain, application/x-www-form-urlencoded, mutilpart/form-data
（2）、对服务器有特殊要求的请求，比如delete，put。非简单请求请求前都会发送一个预检查请求，
请求方式为option，会在请求头携带origin表明源，以及Access-control-request-method列出请求cors会以什么请求方式发起请求，
另外还有access-control-request-header指定cros请求会额外发送的头信息字段
# 浏览器缓存
对于频繁变动的资源，可以使用cache-control设置no-cache，并设置etag和last-modified来验证资源的有效性，
虽然无法减少请求次数，但可以减少响应数据大小
当开始解析html的过程，如果遇到静态资源还会继续发起网络请求，如果强缓存就不会发起网络请求，
## 缓存策略
### 强缓存
在header中设置expire和cache-control
1. expire为过期时间
2. cache-control有多个命令：
（1）、no store
不缓存任何响应
（2）、no cache
缓存，但会立即失效，下次会发起请求验证资源有效性，表明没有强缓存，会使用协商缓存
（3）、max-age=xxx
表明啥时候过期，优先级高于expire
（4）、public
（5）、private
（6）、s-maxage
（7）、max-stale[=]
### 协商缓存
当强缓存未命中时就走协商缓存，比如max-age过期了，expire过期了，或者设置了no-cache
1. 在header中设置last-modified
last-modified会被if-modified-sin带到服务器，询问last-modified最后修改日期之后是否资源有过更改，有就返回资源，没有就返回403
2. etag
类似文件指纹，if-none-match会把etag带到服务器询问该文件是否有过更改，有变动就把资源发送回来。etag比last-modified优先级高
## 缓存位置
1. service worker
浏览器背后的独立线程，可以用来实现缓存。当service worker没有命中缓存时，会根据缓存查找优先级去查找数据，不管是从memory cache还是fetch请求获取到的数据，都会显示是从Service worker里获取,使用Service worker必须是https协议,脱离了浏览器窗体无法访问dom
2. memory cache（身份验证一些实时性资源存在这）
内存缓存，快，但存储失效短
3. disk cache（静态资源存在这）
硬盘缓存，比内存缓存慢，但存储时效久
4. push cache（http2）
前三种缓存都未命中时，就命中这个，但这个属于session缓存，一旦会话结束就会释放
5. 网络请求
# 浏览器垃圾回收
## 回收算法
1. 引用计数清除
当一个变量引用了一个引用类型一次，那么这个引用类型就会计数+1，当这个引用类型不再被引用变为0，就会被清除掉， 循环引用不会被引用计数清除，所以浏览器不使用这种方式
2. 标记清除
从window对象中一层一层查找，如果没有在这个链中找到对象，那么此对象就可以被清除掉。
比如说闭包，如果该函数被window执行，那么里面所引用的对象就能够在window对象的属性链中找到，所以也不会被清除
闭包算内存泄漏吗？不算，预期内的对象不被回收这种结果不算是内存泄漏
## 内存泄漏的场景有哪些
1. 被全局变量，函数引用，组件销毁时未清除
window.aa = this.a, window.myFunction = console.log(this.a)}
2. 被全局事件，定时器引用，组件销毁时未清除
setInterval().
3. 被自定义事件引用，组件销毁时未清除
window.addEvenListener('resize',"自定义事件")
