202103 -- http+前端安全

http

1. 简单讲解一下 http2 的多路复用

• HTTP2 采用二进制格式传输，取代了 HTTP1.x 的文本格式，二进制格式解析更高效。

• 多路复用代替了 HTTP1.x 的序列和阻塞机制，所有的相同域名请求都通过同一个 TCP 连接并发完成。

• 在 HTTP1.x 中，并发多个请求需要多个 TCP 连接，浏览器为了控制资源会有6-8个 TCP 连接的限制。

• HTTP2 中同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。

• 单个连接上可以并行交错的请求和响应，之间互不干扰。

2. A、B 机器正常连接后，B 机器突然重启，问 A 此时处于 TCP 什么状态？

• 因为 B 会在重启之后进入 tcp 状态机的 listen 状态，只要当 a 重新发送一个数据包（无论是 syn 包或者是应用数据），b 端应该会主动发送一个带 rst 位的重置包来进行连接重置，所以 a 应该在 syn_sent 状态

3. 介绍 https 握手过程

1. clientHello

2. SeverHello

3. 客户端回应

4. 服务器的最后回应

6. https 握手过程中，客户端如何验证证书的合法性？

1. 校验证书的颁发机构是否受客户端信任。

2. 通过 CRL 或 OCSP 的方式校验证书是否被吊销。

3. 对比系统时间，校验证书是否在有效期内。

4. 通过校验对方是否存在证书的私钥，判断证书的网站域名是否与证书颁发的域名一致。

7. 介绍下 HTTPS 中间人攻击

• https 协议由 http + ssl 协议构成，具体的链接过程可参考 SSL 或 TLS 握手的概述

• 中间人攻击过程如下：

  1. 服务器向客户端发送公钥。

  2. 攻击者截获公钥，保留在自己手上。

  3. 然后攻击者自己生成一个【伪造的】公钥，发给客户端。

  4. 客户端收到伪造的公钥后，生成加密 hash 值发给服务器。

  5. 攻击者获得加密 hash 值，用自己的私钥解密获得真秘钥。

  6. 同时生成假的加密 hash 值，发给服务器。

  7. 服务器用私钥解密获得假秘钥。

  8. 服务器用假秘钥加密传输信息

• 防范方法：

  • 服务端在发送浏览器的公钥中加入 CA 证书，浏览器可以验证 CA 证书的有效性

前端安全

1. cookie 和 token 都存放在 header 中，为什么不会劫持 token？

1. 攻击者通过 xss 拿到用户的 cookie 然后就可以伪造 cookie 了。

2. 或者通过 csrf 在同个浏览器下面通过浏览器会自动带上 cookie 的特性

3. 在通过 用户网站-攻击者网站-攻击者请求用户网站的方式 浏览器会自动带上 cookie

• token

  1. 不会被浏览器带上，问题 2 解决

  2. token 是放在 jwt 里面下发给客户端的 ，而且不一定存储在哪里，不能通过 document.cookie 直接拿到，通过 jwt + ip 的方式可以防止被劫持，即使被劫持也是无效的 jwt

2. 介绍下前端加密的常见场景和方法

• 首先，加密的目的，简而言之就是将明文转换为密文、甚至转换为其他的东西，用来隐藏明文内容本身，防止其他人直接获取到敏感明文信息、或者提高其他人获取到明文信息的难度。

• 通常我们提到加密会想到密码加密、HTTPS 等关键词，这里从场景和方法分别提一些我的个人见解。

对前端页面性能优化有自己的理解？

pc

网络加载类

• 减少 http 资源请求次数

• 避免空的 href 和 src

• 减少页面重定向

页面渲染类

• 减少 DOM 元素数量和深度

• 尽量减少使用 js 动画

• css 动画使用 translate、scale 代替top、height

• 尽量避免使用 <table><iframe>

移动端

网络加载类

• 首屏加载和按需加载，非首屏内容滚屏加载，保证首屏内容最小化

缓存类

• 合理利用浏览器缓存

图片类

• 图片压缩处理

• 使用较小的图片，合理使用 base64 内嵌图片

• 图片懒加载