第二章 前端與協議

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