⚠️⚠️传送门⚠️⚠️
寒冬期前端准备总结---JS篇
寒冬期前端准备总结---浏览器篇
[寒冬期前端准备总结---服务器和网络篇]
寒冬期前端准备总结---CSS篇
寒冬期前端准备总结---框架篇
寒冬期前端准备总结---算法篇
- HTTP和HTTPS的区别
* HTPPS是在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为客户端和服务器之间的通信加密
* HTTPS协议需要到CA申请证书或者自制证书
* HTTP的信息是明文传输；HTTPS是具有安全性的ssl加密的
* HTTP是直接与TCP进行数据传输；HTTPS和TCP之间多了一层SSL/TCS安全传输层
* HTTP的连接是无状态的，不会记录下用户请求的一些临时数据，类似于登录状态，（结合cookie实现HTTP的连接有状态）
* HTTP无连接：每一次连接只能处理一个请求
* HTTP无状态：对所有的请求都没有记忆功能，后面的请求需要前面请求的数据时，就需要重新传递数据
* cookie是服务端生成保存在客户端的，4K，session是服务端保存的，数据量不宜过多
- 请求报文和响应报文
请求报文
* 请求方法
* 请求URL
* http版本
* 请求头
* 请求体
响应报文
* 状态码
* 响应头
* 响应体
* HTTP版本
- HTTP2与HTTP1.x对比
* HTTP2使用的是二进制格式传送；HTTP1.x是文本传送，二进制协议解析起来更高效
* HTTP2支持多路复用，同一域名下的请求共享一个TCP连接，HTTP1.x每一个请求会创建一个TCP连接，且同一域名下的TCP连接数量有限
* HTTP2进行头部压缩，减少传输大小以及避免重复header的传输
* HTTP2支持服务器推送
- TCP/UDP
* UDP连接不需要三次握手和四次挥手，而且不会对数据报文进行处理，就直接传递出去了，这样想传输就传输的数据不太安全，不过它支持一对多、多对多的传输方式
* TCP需要三次握手和四次挥手，接收确认标示和序列号这些信息保证数据的可靠性
- TCP三次握手
* 客户端向服务端发送握手信号以及seq序列号
* 服务端接收到信号后，发送新的seq序列号和连接确认号到客户端
* 客户端发送初始序列号+1和服务端确认号+1，表明接收到服务端信号，TCP连接成功
- TCP四次挥手
* A发送给B一个释放连接报文，B收到后发送确认，此时A不能向B发送，但是A会接受B的发送请求 半关闭状态
* 之后B向A发送释放连接报文，A收到后发送确认，TCP连接完全断开连接
- 缓存
缓存位置
* Service Worker：运行在浏览器背后的独立线程，通过请求拦截的方式查询是否命中缓存，需要https协议来保障安全，是持续性缓存
* Memory Cache：浏览器内存缓存，读取高效，但是缓存持续性很短，会随进程的释放而释放，例如关闭tab页，大文件不存
* Disk Cache：硬盘上的缓存，相对于内存缓存，优势在于容量和时效性
* Push Cache：推送缓存，HTTP2的内容；只在会话中存在，会话结束被释放，时效性短
强缓存和协商缓存
强缓存不会向服务器发送请求，不关心服务端的文件是否更新，直接从缓存中读取资源，通过设置两种Http Header实现强缓存：expires（响应头）和cache-control（通用头）
* expires（V1.0）缓存过期时间，是服务器的时间节点，受限于本地时间
* cache-control（V1.1）控制网页缓存：no-cache、max-age等
* cache-control的优先级大于expires，expires用于兼容
协商缓存是强缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识来决定是否使用缓存的过程，通过设置两种Http Header：last-modified（响应头）/ if-modified-since（请求头） 和ETag（响应头）/if-none-match（请求头）
* 协商缓存生效，返回304和Not modified；协商缓存失效，返回200和请求结果
* last-modified和if-modified-since通过判断文件的最后修改日期，以及是否修改标识判断
* ETag和if-none-match，其中ETag是由服务器生成的唯一符，资源变化便重新生成ETag
* 强缓存（200）：第一次向服务器请求，直接下载请求数据，存到本地，第二次请求时直接使用本地缓存
* 协商缓存（304）：第一次向服务器请求时，保存缓存标记和缓存时间，缓存到本地，第二次请求时服务器判断重新请求数据，还是直接使用缓存
cache-control的值（响应头和请求头都可以设置）
* private: 客户端可以缓存（响应头）
* public: 客户端和代理服务器都可缓存（响应头）
* max-age=xxx: 缓存的内容将在 xxx 秒后失效
* no-cache: 需要使用对比缓存来验证缓存数据
* no-store: 所有内容都不会缓存，强制缓存，对比缓存都不会触发
- HTTP的POST和GET
使用上区别
* GET是从服务器上获取数据，POST是向服务器传送数据
* GET是通过URL进行传输（不安全），POST是通过请求体传输数据（较安全）
* GET的传输数据量不能大于2K，POST的传输数据不限
* GET可以通过URL的历史访问、缓存可以查到数据，不安全
进阶
* 都是通过http协议请求，没有差异
* get也可以发送请求体，只要服务端做处理
* url的传输限制长度只是浏览器的限制，跟请求无关
- HTTP的长连接和短连接（即TCP的长短连接）
* 短连接：客户端和服务器每进行一次HTTP操作，就建立一个连接，但任务结束就会中断连接
* 长连接：HTTP1.1 默认长连接。数据传输完成后保持TCP的连接，等待同域名下的请求继续使用这个连接通道
减少重连的耗时，服务器可以利用这个连接主动推送消息到客户端
HTTP的头部字段Connection：keep-alive显示设置期望长连接
- options预请求
跨域请求时，浏览器自动发起options请求，用于判断服务器是否支持此次跨域请求，会发送两次请求
浏览器自动触发预请求的条件
* http的请求方法为：PUT/DELETE/PUTCH/CONNECT/OPTIONS/TRACE（非get/post）
* 人为设置请求头部的字段：
Accept/Accept-Language/Content-Type/Content-Language/DPR/Downlink/Save-Data/Viewport-Width/Width
* Content-Type的值为非以下属性值：（例如application/json）
application/x-www-form-urlencoded、multiple/form-data、text/plain
- 请求头部属性
Request Header和Response Header
通用
* Cache-Control：缓存机制和缓存类型
* Connection：是否保持长连接
* Transfer-Encoding：文件编码
* content-type：实体报文的内容类型
Request
* Accept：客户端希望接受的响应数据类型
* User-Agent：客户端的信息
* Authorization：web认证信息
Response
* Location：客户端的重定向URI
* Server服务器信息
* Content-type：返回内容的媒体类型
- Web攻击
XSS:cross site script 跨站脚本攻击，往页面插入恶意的脚本，document.cookie盗用cookie实现无密码登录
CSRF：cross site request forgery 跨站请求伪造，盗用用户身份，发送恶意请求
浏览器会自动带上cookie，但是不会带上token，token为了防止CSRF
XSS
- DOM xss:使用DOM更换文档内容，完全由客户端进行DOM解析
- 反射型 xss:非持久性，在客户端发送请求时，将代码拼接在URL中，提交到服务端，服务端返回携带不安全脚本的响应内容，再由客户端渲染
- 存储型 xss:持久性，代码被提交后，被服务端接收并存储，每次请求都会带上脚本，每一次用户访问时都存在
❌利用虚假输入表单骗取用户信息
❌利用脚本窃取用户的cookie，在用户不知情的情况下，帮助攻击者发送恶意请求
❌页面重定向
✅httpOnly：服务端response设置header时cookie设置HttpOnly，保证无法通过js脚本拿到cookie信息
✅用户输入内容做校验，防止插入script脚本
✅对于跳转链接的url要校验内容，禁止javascript链接
✅不对内容格式过滤时，要对标签进行转义
CSRF
- 冒充用户发起请求，在用户不知情的情况下
✅强制用户交互，比如验证码，再完成用户请求
✅使用post方法发起请求，也是交互
✅通过token进行校验请求方是否合法
- Https 中间人攻击过程
* 服务器向客户端发送公钥
* 攻击者拦截公钥
* 攻击者生成伪造的公钥发送给客户端
* 客户端收到伪造公钥生成加密后的hash值
* 攻击者获得加密后的hash，用自己的私钥解密获得真秘钥
* 同时生成假的加密的hash，发送给服务端
* 服务器用私钥解密获得假秘钥
* 服务器用假秘钥加密传输数据
实际中，服务器向客户端发送公钥的时候加证书
- 前端加密的场景和方法
密码传输：
* 前端使用Base64/Unicode等方式加密成非明文，后端解开存入MD5/MD6
* 前端使用MD5/MD6取得hash，后端直接存hash的hash
展示成果加密
* 反爬虫
- http状态码：服务器对请求的响应状态
* 1**：表示临时响应
* 2**：表示请求成功
* 3**：表示重定向
* 4**：表示客户端错误
* 5**：表示服务端错误
* 200：成功
* 202：服务端接收请求，但并未响应
* 204：服务端成功处理请求，但不需要返回任何实体内容
* 205：服务端成功处理请求，但不需要返回任何实体内容。不同于204，要求请求者重置文档视图
* 301：永久性重定向
* 302：临时性重定向
* 304：浏览器的缓存数据依然有效（协商缓存）
* 400：客户端请求有误，无法被服务端理解
* 401：当前请求需要用户验证
* 403：服务器理解请求，通过身份验证，但是身份没有权限，拒绝执行请求
* 404：请求资源未找到
* 405：身份验证通过，http方法不在用户权限内
* 500：内部服务器错误
* 502：网关错误
* 503：服务器过载，当前无法处理请求
- restful 和 graphQL
* restful
前后端接口定义的规范，通过API命名语义化
* graphQL
前端想后端传递需要返回的数据结构，偏查询，减少数据冗余
- restful状态码
* GET:200 OK
* POST:201 Created
* PUT:200 OK
* PATCH:200 OK
* DELETE:204 No Content
- 请求幂等性（使用上，非强制）
多次请求结果一致，无副作用
* get: 幂等
* post: 非幂等，新建资源
* put: 幂等，更新资源，整体替换
* patch: 非幂等，局部更新，请求一次修改一次
* delete: 幂等，删除资源
- 跨域
同源策略：协议+域名+端口号
* 利用script标签的跨域能力，发送get 请求，执行请求回调
* jsonp请求，只能发送get请求，
* webSocket跨域 socket.io插件
* 设置网络代理服务器
* CORS通过origin设置跨域资源共享
* iframe跨域
* postMessage方法：iframe.currentWindow.postMessage / window.parent.postMessage