React · 19/84
1. 为什么推荐将静态资源放到 CDN 上 2. Class 组件的局限性 3. Class 组件与函数组件 4. Composition API 与 Hooks 对比 5. Vue 中 computed 和 watch 的区别 6. 爬楼梯问题 7. createElement 执行过程 8. 限制构造函数只能通过 new 调用 9. 判断 React 组件类型 10. 受控与非受控组件 11. 自定义 Hook 开发 12. 什么是 DNS 劫持? 13. 判断对象是否是 React 元素 14. HOC 与 Render Props 15. React 中 Element、Component、Node、Instance 的区别 16. Hooks 使用规则 17. HTTP/2 多路复用原理 18. HTTP 报文结构 19. HTTPS 握手过程 20. Immutable 在 React 中的应用 21. 实现图片懒加载 22. JavaScript == 运算符的机制 23. JavaScript 数组的内存存储方式 24. JSX 本质 25. Immutable 在 React 中的应用 26. 最大子序和 27. React Router 的 Link 和 a 标签的区别 28. JSX语法糖本质 29. 父组件调用子组件方法 30. 移动端样式适配方案 31. Portal 中的事件冒泡机制 32. React 17 新特性 33. React 18 新特性与并发渲染 34. React 组件渲染流程 35. React 是什么 36. React元素$$typeof属性 37. React 组件通信方式 38. React 错误边界处理 39. React 核心概念 40. React 组件设计 41. React Fiber 架构 42. React Hooks 原理与规则 43. React 常用 Hooks 使用指南 44. React.memo 和 memoize 函数的区别 45. React 生命周期演变 46. React 性能优化实践 47. React 性能优化策略 48. React Portals 的使用场景 49. React 中的 ref 使用 50. React 和 React-DOM 的关系 51. React 为什么不直接使用 requestIdleCallback 52. React-Router 原理与工作方式 53. React 合成事件机制 54. React 服务端渲染实现 55. React 事务机制 56. setState 同步异步问题 57. setTimeout 为什么不能保证及时执行 58. Redux 工作流与中间件 59. React 服务端渲染实现 60. 单页应用如何提高加载速度 61. Source Map 的工作原理 62. TypeScript 中的命名空间与模块 63. Taro 多端框架实现原理 64. Taro 2.x 和 Taro 3 的区别 65. TypeScript 与 JavaScript 的区别 66. TCP 三次握手和四次挥手 67. useEffect 支持 async/await 68. useEffect 闭包陷阱 69. useMemo 和 useCallback 的使用场景 70. useContext 的使用方法 71. useReducer 与 Redux 对比 72. useState 连续调用 setState 导致值丢失 73. 实现 useTimeout Hook 74. useRef、ref 和 forwardRef 的区别 75. 虚拟DOM性能分析 76. 实现 useUpdate 强制组件重新渲染 77. Virtual DOM 的意义 78. 虚拟DOM的三个组成部分 79. Virtual DOM 与 Diff 算法 80. Vue 页面渲染流程 81. Vue 与 React 对比 82. Vue 与 React 的 Diff 算法差异 83. Vue2 数组变化检测的限制与解决方案 84. Vue3 实现 Modal 组件

HTTPS 握手过程

通过 Wireshark 抓包分析 HTTPS 完整的握手流程

问题

HTTPS 的握手过程是怎样的?

解答

HTTPS 在七层协议中属于应用层,基于 TCP 协议。完整的握手流程包括:TCP 三次握手 → 对称密钥协商 → 正常收发数据。

抓包准备

使用 Wireshark 抓包工具,执行以下命令:

curl https://www.baidu.com

为什么选择 Wireshark?

Fiddler 和 Charles 主要抓取应用层数据(连接建立后),而 Wireshark 直接读取网卡数据,可以抓取所有协议的数据包,包括连接建立前的过程。

为什么用 curl?

curl 只发送一个请求,浏览器打开页面会加载各种资源,产生大量不必要的数据包。

握手流程

第一步:TCP 三次握手

建立 TCP 连接,这是 HTTPS 握手的前提。

第二步:客户端发送 Client Hello

客户端发送 Client Hello 消息,包含:

  • TLS 版本信息
  • 随机数 random_C(用于后续密钥协商)
  • 加密套件候选列表
  • 压缩算法候选列表
  • 扩展字段

第三步:服务端发送 Server Hello

服务端返回协商结果:

  • 选择的 TLS 协议版本
  • 选择的加密套件 cipher suite
  • 选择的压缩算法 compression method
  • 随机数 random_S

第四步:服务端发送证书

服务端发送 SSL 证书。由于证书报文长度较大(如 3761 字节),TCP 层会进行分段传输。

第五步:服务端发送 Server Key Exchange(可选)

仅在使用 DHE/ECDHE 非对称密钥协商算法时发送。RSA、DH、ECDH 算法不发送此报文。

第六步:服务端发送 Server Hello Done

通知客户端服务端握手消息发送完毕。

第七步:客户端发送密钥交换信息

包含三个部分:

  • Client Key Exchange:发送客户端公钥参数,此时客户端已计算出密钥
  • Change Cipher Spec:通知服务器后续通信使用协商的密钥和加密算法
  • Encrypted Handshake Message:测试密钥的有效性和一致性

第八步:服务端发送 New Session Ticket

服务器创建会话,在超时时间内双方使用协商的密钥通信。

第九步:服务端发送 Change Cipher Spec

服务端解密客户端参数,计算出协商密钥,验证 Encrypted Handshake Message 的有效性后,通知客户端可以使用协商密钥通信。

第十步:服务端发送 Encrypted Handshake Message

验证客户端能正常解密,服务端能正常加密。

第十一步:开始传输加密数据

密钥协商完成,使用对称加密传输数据。

第十二步:TCP 四次挥手

数据传输完成后,通过 TCP 四次挥手关闭连接。

关键点

  • HTTPS 握手必须先完成 TCP 三次握手
  • 客户端和服务端各生成一个随机数,用于协商对称密钥
  • 服务端发送证书供客户端验证身份
  • Server Key Exchange 是否发送取决于加密算法(DHE/ECDHE 需要,RSA 不需要)
  • 双方通过 Change Cipher Spec 和 Encrypted Handshake Message 确认密钥协商成功