《现代前端技术解析》第二章读书笔记

第二章 前端与协议

HTTP协议

• HTTP协议
  • 头部结构
    • 请求头：请求类型，请求URI，协议版本，扩展内容
    • 请求头部域内容：Accept\Cookie\Cache-Control\Host等
    • 响应头：状态码，状态描述，协议版本，扩展内容
    • 响应头部域内容：Date\Content-Type\Cache-Control\Exprires等
  • 空行
  • 正文内容
• HTTP 1.1
  • 长连接（keep-alive）
    + 其实HTTP 1.0 也支持长连接，但是想要手动在头部加Connection：keep-alive
    + HTTP 1.1 默认包含keep-alive
    + 长连接指的其实是复用已经建立好的连接，无需重新握手
    • 协议扩展切换
      • Upgrade字段
        • 能让服务端找到客户端能支持其他协议（例如websocket）
      • WebSocket切换过程
        • 请求头中加入Connection: Upgrade和Upgrade：websocket
        • 如果服务器支持则返回响应头Upgrade和Connection并且状态码是101表示还需要完成协议的切换
    • 缓存控制
      • HTTP 1.0 主要通过Expires头进行实现（绝对时间）
      • HTTP 1.1 新增了Cahce-Control可以支持max-age表示相对时间
      • 请求服务器是也可以根据Etag和Last-Modified判断是否在缓存加载文件
    • 部分内容传输优化
      • HTTP1.1 可以支持超文本文件的部分传输
        • 比如通过起始位置和偏移长度
• HTTP2
  • 二进制传输（frame）
  • 消息头压缩
  • TCP多路复用
    • HTTP 1.1 的keep-alive是串行的，在应用层
    • TCP连接复用是并行的，可以在一个连接中同时进行传输，在传输层。
  • 传输优先级/流量控制
    • 保证优先级高的文件流先传输
      • 例如先传输CSS渲染页面
  • 服务端推送
    • 特定条件下把资源主动推送给客户端
      • 例如在HTML文档下载前先让JS或CSS先下载

Web安全机制

• 基础安全知识
  • XSS（跨站脚本攻击）
    • 可解析内容数据未经处理直接插入页面上解析导致的
    • 有存储型XSS、反射型XSS、MXSS（DOM XSS）三种
      • 其实就是攻击脚本插入位置不同
    • 应对方法：转义
  • SQL注入
  • CSRF（跨站请求伪造）
    • 非源站点按照源站点数据请求格式提交非法数据给源站点服务器的一种攻击
    • 应对方法：Token
• 请求劫持
  • DNS劫持
    • 篡改DNS服务器，去其他网站
  • HTTP劫持
    • 被ISP拦截并且在页面上加上小广告
• HTTPS
  • 加入SSL加密
  • 使用443端口
  • 这个会了还是省略一万字
• 安全机制
  • X-XSS-Protection
    • 防止浏览器中的反射性XSS问题发生，加在头部，只有较高版本浏览器支持。
  • Strict-Transport-Security
    • 一种用来配置浏览器和服务器之间的安全通信机制，防止中间人攻击，强制使用HTTPS协议
  • CSP（Content-Security-Policy）
    • 只加载可信域名来源内容
  • Access-Control-Allow-Origin
    • 从CORS中分离出来的，这个头部决定哪些网站可以访问当前服务器资源的设置。

实时协议

• WebSocket
  • 最小单位为帧。（流式传输）
• Poll和Long-poll
  • 前者不停发送请求，后者请求完了等待回应后继续发送请求。
  • 后者应用场景：微信扫码登录
• DDP（Distributed Data Protocol）
  • 兼容性问题还未广泛使用
  • 订阅服务器数据
  • 面向未来

RestFul

其实就是将一个URI地址可以用不同的请求方式访问从而达到不同的效果。

与Native交互

• Hybrid App
  • Web和Native App的缝合体
  • 可用网络资源少
  • 支持更新的浏览器特性
  • 离线应用
  • 要考虑更多机型
  • 支持与Native交互
• Web到Native的协议调用
  • URI调用
    • 通过window.location.href或者iframe发起URI请求
    • Native应用需要先在移动端系统注册一个Scheme协议的URI
      • 例如myApp://xxxx
  • addJavascriptInterface
• Native到Web
  • loadURl
  • JSBridge