安全 - CORS（未完）

• 出於安全緣由，瀏覽器限制從腳本內發起的跨域HTTP請求 或 攔截了跨域請求的結果。 例如，XMLHttpRequest和Fetch API遵循同源策略。 這意味着使用這些API的Web應用程序只能從加載應用程序的同一個域請求HTTP資源，除非響應報文包含了正確CORS響應頭。

什麼狀況下須要 CORS

• 由 XMLHttpRequest 或 Fetch 發起的跨域 HTTP 請求。
• Web 字體 (CSS 中經過 @font-face 使用跨域字體資源)
• WebGL 貼圖
• 使用 drawImage 將 Images/video 畫面繪製到 canvas
• 樣式表（使用 CSSOM）CSSOM視圖是一個模塊,容許操做文檔的可視化視圖,尤爲是其滾動行爲。？

功能概述

• 跨域資源共享標準新增了一組 HTTP 首部字段，容許服務器聲明哪些源站經過瀏覽器有權限訪問哪些資源。
• 規範要求，對那些可能對服務器數據產生反作用的 HTTP 請求方法，瀏覽器必須首先使用 OPTIONS 方法發起一個預檢請求，從而獲知服務端是否容許該跨域請求。服務器確認容許以後，才發起實際的 HTTP 請求
  • 對服務器數據產生反作用的 HTTP 請求方法（是 GET 之外的 HTTP 請求，或者搭配某些 MIME 類型的 POST 請求）
  • 在預檢請求的返回中，服務器端也能夠通知客戶端，是否須要攜帶身份憑證（包括 Cookies 和 HTTP 認證相關數據）。
• CORS請求失敗會產生錯誤，可是爲了安全，在JavaScript代碼層面是沒法獲知到底具體是哪裏出了問題。你只能查看瀏覽器的控制檯以得知具體是哪裏出現了錯誤。

若干訪問控制場景

簡單請求

• 某些請求不會觸發 CORS 預檢請求。本文稱這樣的請求爲「簡單請求」。若請求知足全部下述條件，則該請求可視爲「簡單請求」：
  • 使用下列方法之一
    • GET
    • HEAD
    • POST
  • Fetch 規範定義了對 CORS 安全的首部字段集合，不得人爲設置該集合以外的其餘首部字段。
    • Accept：用來告知服務器，客戶端能夠處理的內容類型，這種內容類型用MIME類型來表示。
    • Accept-Language：請求頭容許客戶端聲明它能夠理解的天然語言，以及優先選擇的區域方言。
    • Content-Language：是一個 entity header （實體消息首部），用來講明訪問者但願採用的語言或語言組合，這樣的話用戶就能夠根據本身偏好的語言來定製不一樣的內容。（用戶但願返回的內容的語言）
    • Content-Type 僅限於下列三者之一 ：Content-Type 實體頭部用於指示資源的MIME類型 media type
      • text/plain 文本文件默認值。即便它意味着未知的文本文件，但瀏覽器認爲是能夠直接展現的。
      • multipart/form-data 用於HTML表單從瀏覽器發送信息給服務器。
      • application/x-www-form-urlencoded 數據被編碼爲名稱/值對。標準的編碼格式，在get中表現爲（name1=value1&name2=value2…）
    • DPR（草案階段的請求頭）
    • Downlink（草案階段的請求頭）
    • Save-Data（草案階段的請求頭）
    • Viewport-Width（草案階段的請求頭）
    • Width（草案階段的請求頭）
  • 沒有註冊任何事件監聽器的任意XMLHttpRequestUpload 對象
  • 可使用 XMLHttpRequest.upload 屬性訪問的XMLHttpRequestUpload 對象
  • 請求中沒有使用 ReadableStream 對象。？