前端面試之路五(網路HTTP篇)

kinshan發表於2018-12-25
前端面試HTTP

前端面試常見問題：

http method

  • HTTP1.0定義了三種請求方法： GET、POST 和 HEAD

  • HTTP1.1新增了五種請求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 、 CONNECT

http status code

2開頭 （請求成功）表示成功處理了請求的狀態程式碼。

200   （成功）  伺服器已成功處理了請求。 通常，這表示伺服器提供了請求的網頁。 
201   （已建立）  請求成功並且伺服器建立了新的資源。 
202   （已接受）  伺服器已接受請求，但尚未處理。 
203   （非授權資訊）  伺服器已成功處理了請求，但返回的資訊可能來自另一來源。 
204   （無內容）  伺服器成功處理了請求，但沒有返回任何內容。 
205   （重置內容） 伺服器成功處理了請求，但沒有返回任何內容。
206   （部分內容）  伺服器成功處理了部分 GET 請求。

3開頭 （請求被重定向）表示要完成請求，需要進一步操作。 通常，這些狀態程式碼用來重定向。

300   （多種選擇）  針對請求，伺服器可執行多種操作。 伺服器可根據請求者 (user agent) 選擇一項操作，或提供操作列表供請求者選擇。 
301   （永久移動）  請求的網頁已永久移動到新位置。 伺服器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
302   （臨時移動）  伺服器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。
303   （檢視其他位置） 請求者應當對不同的位置使用單獨的 GET 請求來檢索響應時，伺服器返回此程式碼。
304   （未修改） 自從上次請求後，請求的網頁未修改過。 伺服器返回此響應時，不會返回網頁內容。 
305   （使用代理） 請求者只能使用代理訪問請求的網頁。 如果伺服器返回此響應，還表示請求者應使用代理。 
307   （臨時重定向）  伺服器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以後的請求。

4開頭 （請求錯誤）這些狀態程式碼表示請求可能出錯，妨礙了伺服器的處理。

400   （錯誤請求） 伺服器不理解請求的語法。 
401   （未授權） 請求要求身份驗證。 對於需要登入的網頁，伺服器可能返回此響應。 
403   （禁止） 伺服器拒絕請求。
404   （未找到） 伺服器找不到請求的網頁。
405   （方法禁用） 禁用請求中指定的方法。 
406   （不接受） 無法使用請求的內容特性響應請求的網頁。 
407   （需要代理授權） 此狀態程式碼與 401（未授權）類似，但指定請求者應當授權使用代理。
408   （請求超時）  伺服器等候請求時發生超時。 
409   （衝突）  伺服器在完成請求時發生衝突。 伺服器必須在響應中包含有關衝突的資訊。 
410   （已刪除）  如果請求的資源已永久刪除，伺服器就會返回此響應。 
411   （需要有效長度） 伺服器不接受不含有效內容長度標頭欄位的請求。 
412   （未滿足前提條件） 伺服器未滿足請求者在請求中設定的其中一個前提條件。 
413   （請求實體過大） 伺服器無法處理請求，因為請求實體過大，超出伺服器的處理能力。 
414   （請求的 URI 過長） 請求的 URI（通常為網址）過長，伺服器無法處理。 
415   （不支援的媒體型別） 請求的格式不受請求頁面的支援。 
416   （請求範圍不符合要求） 如果頁面無法提供請求的範圍，則伺服器會返回此狀態程式碼。 
417   （未滿足期望值） 伺服器未滿足"期望"請求標頭欄位的要求。

5開頭（伺服器錯誤）這些狀態程式碼表示伺服器在嘗試處理請求時發生內部錯誤。 這些錯誤可能是伺服器本身的錯誤，而不是請求出錯。

500   （伺服器內部錯誤）  伺服器遇到錯誤，無法完成請求。 
501   （尚未實施） 伺服器不具備完成請求的功能。 例如，伺服器無法識別請求方法時可能會返回此程式碼。 
502   （錯誤閘道器） 伺服器作為閘道器或代理，從上游伺服器收到無效響應。 
503   （服務不可用） 伺服器目前無法使用（由於超載或停機維護）。 通常，這只是暫時狀態。 
504   （閘道器超時）  伺服器作為閘道器或代理，但是沒有及時從上游伺服器收到請求。 
505   （HTTP 版本不受支援） 伺服器不支援請求中所用的 HTTP 協議版本。
複製程式碼

快取

  • 客戶端快取
  • 代理伺服器快取
  • 快取如何驗證可用性

cache-control：

  • max-age=100 靜態資源快取100s
  • public、private 設定只能在客戶端快取，還是可以通過代理伺服器快取
  • must-revalidate 在快取過期後必須到伺服器端驗證過才能繼續使用快取
  • no-cache、no-store 控制是否使用快取

快取驗證

  • last-modified配合if-modified-since
  • etage配合if-none-match

快取是web開發中對效能提升最大的一面

更有意義的頭部

  • Content-type、Content-Encoding等用來約束資料型別
  • cookie保持會話資訊
  • CORS實現跨域並保持安全性限制

深入到TCP：

  • 什麼是三次握手
  • HTTPS連結的建立過程，以及為什麼HTTPS就是安全的
  • 什麼是長連結，為什麼需要長連結
  • HTTP2的通道複用為什麼能提升效能

輸入URL後HTTP請求返回的完整過程

前端面試之路五(網路HTTP篇)

  • 1、為什麼一開始需要做redirect：因為瀏覽器可能記錄了這個地址永久跳轉成一個新的地址，一開始瀏覽器需要判斷redirect，redirect到什麼地址
  • 2、看快取：看請求的資源是否已經快取
  • 3、dns解析
  • 4、建立連線
  • 5、開始傳送資料包

Nginx

  • 配置ngnix作為http的代理
  • 開啟ngnix的快取功能
  • 利用代理快取提高http效能

HTTP協議基礎及發展歷史

五層網路模型介紹

前端面試之路五(網路HTTP篇)

  • 物理層：主要定義物理裝置如何傳輸資料，硬體裝置
  • 資料鏈路層：在通訊的實體間簡歷資料鏈路連結
  • 網路層：為資料在節點之間傳輸建立邏輯鏈路
  • 傳輸層：像使用者提供可靠的端到端(End-to-End)服務
    傳輸層向高層遮蔽了下層資料通訊的細節
  • 應用層:為應用軟體提供了很多服務
    構建於TCP協議之上
    遮蔽了網路傳輸相關細節

HTTP協議發展歷史

HTTP 0.9

  • 1、只有一個命令GET
  • 2、沒有header等描述資料的資訊
  • 3、伺服器傳送完畢，就關閉了TCP連線

HTTP1.0

  • 1、增加了很多命令
  • 2、增加status code和header
  • 3、多字符集支援、多部分傳送、許可權、快取等

HTTP1.1

  • 1、持久連線(建立TCP消耗)
  • 2、pipeline(同一個連結可以傳送多個請求，服務端是按照順序接受，可能需要等待，序列)
  • 3、增加host和其他一些命令

HTTP2（尚未普及）

  • 1、所有資料以二進位制進行傳輸
  • 2、同一個連結裡面傳送多個請求不再小按照順序來(並行)
  • 3、頭資訊壓縮以及推送等提高效率的功能

HTTP的三次握手

前端面試之路五(網路HTTP篇)

  • 客戶端和伺服器端進行資訊傳送，是需要建立一個TCP-connetion
  • http是不存在連線這個概念，只有請求和響應，它們都是資料包
  • tcp連結可以傳送多個http請求

三次握手時序圖

前端面試之路五(網路HTTP篇)

URI-URL和URN

Uniform Resource Locator/統一資源定位器

http://user:pass@host.com:80/path?query=string#hash
複製程式碼

URN:永久統一資源定位符

  • 在資源移動之後還能找到
  • 目前還沒有非常成熟的使用方案

HTTP報文格式

前端面試之路五(網路HTTP篇)

HTTP各種特性總覽

CORS跨域請求的限制與解決

請求已經傳送，已經獲取到了返回資料。不過瀏覽器在解析返回的時候，發現是不允許的，瀏覽器攔截了，隱藏了資料。必須伺服器允許跨越請求。

  • 瀏覽器允許link、script、img這些在標籤上寫路徑載入的時候，允許跨越，不管伺服器是否允許跨域請求。jsnop原理也是如此

  • 伺服器端可以加： 'Access-Control-Allow-Origin': '*'，表示允許跨域訪問。'*'表示允許所有跨域訪問，可以設定指定的伺服器訪問。多域可以動態判斷

CORS跨域限制以及預請求驗證

不需要預請求的限制： (其餘需要預請求驗證後才能傳送)

  • 1、允許method： GET、HEAD、POST
  • 2、允許Content-Type： text/plain、 multipart/form-data、 application/x-www-form-urlencoded
  • 3、請求頭限制：
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type： 只限於三個值
      • application/x-www-form-urlencoded、
      • multipart/form-data、
      • text/plain
  • 4、XMLHttpRequestUpload物件軍沒有註冊任何事件監聽器
  • 5、請求中沒有使用ReadableStream

解決方法：

'Access-Control-Allow-Origin': 'http://127.0.0.1:8888',
'Access-Control-Allow-Headers': 'X-Test-Cors',   
'Access-Control-Allow-Methods': 'POST, PUT, DELETE',

'Access-Control-Max-Age': '1000'
//允許以這種方式傳送預請求的時間，這段時間內不需要再傳送預請求了
複製程式碼

快取頭Cache-Control的含義和使用

可快取性

  • pulic :http請求經過的任何路徑都可以對返回內容的快取
  • private:只有發起請求的瀏覽器才可以進行快取
  • non-cache:任何節點都不可以進行快取

到期：

  • max-age=<seconds>
  • s-maxage=<seconds>            //如果兩個都設定，代理伺服器會讀取這個，專為代理伺服器設定
  • max-stale=<seconds>           //只有在發起端設定才管用，即便max-age過期，只要在max-stale時間內仍然可以使用過期的快取，服務端返回中設定沒有作用

重新驗證：

  • 1、must-revalidate                   //設定了max-age中如果已經過期了，必須去原服務端重新傳送請求，重新獲取資料驗證是否真的過期
  • 2、proxy-revalidate           //快取伺服器中
  • 3、no-store                 //永遠都要去伺服器拿新的
  • 4、no-transform         //告訴代理伺服器不可改動內容

cache-control 應用

  • 1、只是宣告性的，並沒有強制約束力
  • 2、chrome 裡面的disable cache 必須勾掉
  • 3、cache-control 是一種客戶端快取，而且一般快取時間都比較長，可能會導致服務端靜態資源改變而客戶端無法更新。解決方案：在靜態資原始檔後面加上一串雜湊碼，如果內容沒有變，雜湊碼沒變，可以使用靜態資源快取；如果檔案有邊，發的請求就是新的靜態資源請求。
'Cache-Control': 'max-age=200,public'
複製程式碼

快取驗證Last-Modefied 和Etag 的使用

資源驗證

前端面試之路五(網路HTTP篇)

last-modified

  • 上次修改時間
  • 配合If-Modified-Since 或者If-Unmodified-Since 使用

Etag

  • 更加嚴格的驗證
  • 資料簽名(任何的修改，唯一)，最典型的就是雜湊計算得到唯一值
  • 配合If-Match 或者If-Non-Match
  • 對比資源的簽名判斷是否使用快取

說明

  • 1、304:Not Modified。資源沒有修改，可以直接讀快取。會忽略response body裡面的內容。
  • 2、If-Modified-since和If-None-Match，disable cache 快取驗證頭就不傳送這兩個引數。
  • 3、如果設定了no-store會忽略所有跟快取有關的
const http = require('http')
const fs = require('fs')

http.createServer(function(request, response) {
    console.log('request ', request.url)
    const html = fs.readFileSync('test.html', 'utf8')
    if (request.url === '/') {
        const html = fs.readFileSync('test.html', 'utf8')
        response.writeHead(200, {
            'Content-Type': 'text/html'
        })
        response.end(html)
    }
    if (request.url === '/script.js') {
        const html = fs.readFileSync('test.html', 'utf8')

        const etag = request.headers['if-none-match']
        if (request.getHeader = '777') {
            response.writeHead(304, {
                'Content-Type': 'text/javascript',
                'Cache-Control': 'max-age=2000000,no-cache',
                'Last-Modified': '123',
                'Etag': '777'
            })
            response.end('123')
        } else {
            response.writeHead(200, {
                'Content-Type': 'text/javascript',
                'Cache-Control': 'max-age=2000000,no-cache',
                'Last-Modified': '123',
                'Etag': '777'
            })
            response.end('console.log("script loadded")')
        }
    }
}).listen(8888)

console.log('serve listening on 8888')
複製程式碼
const http = require('http')
const fs = require('fs')

http.createServer(function(request, response) {
    console.log('request ', request.url)
    const html = fs.readFileSync('test.html', 'utf8')
    response.writeHead(200, {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'X-Test-Cors'
    })
    response.end(html)
}).listen(8887)

console.log('serve listening on 8887')
複製程式碼

cookie 和 session

cookie

  • 通過Set-Cookie 設定，同域請求中
  • 下次請求會自動帶上
  • 鍵值對，可以設定多個

cookie 屬性

  • max-age 和 expires 設定過期時間（如果不設定過期時間，關閉瀏覽器就關閉了）
  • secure 只在https 的時候傳送
  • httpOnly 無法通過document.cookie 訪問
'Set-Cookie':['id=12343,max-age=10,name=dafdafda';HttpOnly]
複製程式碼

不同域cookie不能獲取，同一個主域名的二級域名可以共享cookie，通過domain這種方式。

'Set-Cookie':['id=12343,max-age=10,domain="test.com']
複製程式碼

HTTP長連線

  • 複用TCP/IP 連線
  • 三次握手的開銷可能不要比長連線消耗的高
  • Connection: keep-alive
  • chrome 一般六個併發
  • HTTP2 通道複用

資料協商

請求

  • Accept ：//返回資料型別
  • Accept-Encoding ：//主要是如何資料壓縮
  • Accept-Language ://返回語言
  • User-Agent ：//返回pc端還是移動端

返回

Content-Type：對應Accept
Content-Encoding:對應Accept-Encoding
Content-Language:對應Accept-Language
複製程式碼
X-Content-Type-Options:nosniff  //不會主動預測返回內容
複製程式碼

資料壓縮

const zlib = require('zlib')
'Content-Encoding':'gzip'
複製程式碼

Redirect

301 Moved Permanently 被請求的資源已永久移動到新位置，並且將來任何對此資源的引用都應該使用本響應返回的若干個URI之一。如果可能，擁有連結編輯功能的客戶端應當自動把請求的地址修改為從伺服器反饋回來的地址。除非額外指定，否則這個響應也是可快取的。 重定向在瀏覽器快取中，如果使用者不清理快取，那麼服務端沒法控制

302 Found
請求的資源現在臨時從不同的URI響應請求。由於這樣的重定向是臨時的，客戶端應當繼續向原有地址傳送以後的請求。只有在Cache-Control或Expires中進行了指定的情況下，這個響應才是可快取的。

CSP內容安全策略

CSP定義了Content-Security-PolicyHTTP頭來允許你建立一個可信來源的白名單，使得瀏覽器只執行和渲染來自這些來源的資源，而不是盲目信任伺服器提供的所有內容。即使攻擊者可以找到漏洞來注入指令碼，但是因為來源不包含在白名單裡，因此將不會被執行。

作用

  • 限制資源獲取
  • 報告資源獲取越權

限制方式

  • default-src 限制全域性跟連結有關的資源型別
  • 制定資源型別

獲取指令

  • connect-src：限制能通過指令碼介面載入的URL
  • default-src：為其他取指令提供備用服務fetch directives
  • font-src：限制通過@font-face載入的字型源。
  • frame-src： 限制通過類似<frame>和<iframe> 標籤載入的內嵌內容源。
  • img-src: 限制圖片和圖示源
  • manifest-src ： 限制 application manifest 檔案源。
  • media-src ：限制通過<audio> 或<video> 標籤載入的媒體檔案源。
  • object-src：限制通過 <object>, <embed> ，<applet> 標籤載入源。
  • script-src：限制javascript 源。
  • style-src：限制層疊樣式表檔案源。

文件指令:管理文件屬性或者工作環境應用哪個策略。

  • base-uri : 限制在DOM中使用base標籤的URL
  • plugin-types: 限制一系列可以通過一些限制型別的資源載入內嵌到DOM的外掛。
  • sandbox: 允許類似{HTMLElement("iframe")}} sandbox sandbox屬性

導航指令: 導航指令管理使用者能開啟的連結或者表單可提交的連結

  • form-action:限制能被用來作為給定上下文的表單提交的 目標 URL （說白了，就是限制 form的action 屬性的連結地址）
  • frame-ancestors 指定可能嵌入頁面的有效父項<frame>, <iframe>, <object>, <embed>, or <applet>
  • navigation-to 限制文件可以通過以下任何方式訪問URL`` (a, form, window.location, window.open, etc.)

報告指令節:報告指令控制 CSP違規的報告過程

  • report-uri 當出現可能違反CSP的操作時，讓客戶端提交報告。這些違規報告會以JSON檔案的格式通過POST請求傳送到指定的URI
  • report-to Fires a SecurityPolicyViolationEvent

其他指令

  • block-all-mixed-content:當使用HTTPS載入頁面時組織使用HTTP載入任何資源。
'Content-Security-Policy:'default-src http：https''
//只允許http和https載入
'Content-Security-Policy:'default-src \'selt\'';form-action \'self\'
//限制只能從本站外鏈指令碼


複製程式碼

金三銀四，看見大家都在為了面試而努力 特開了一個前端模擬面試題，組織了面試的群友每天來群裡分享面試題，講題 急思眾議，共同進步，歡迎最近在面試或者準備面試的群友加入本群，加群格式： 工作年限-面試等級(初、中、高)-工作地點 (不在面試或者不準備面試或者不活躍的勿加本群，加了也會被清理)

前端面試之路五(網路HTTP篇)

相關文章