章節(jié)目錄

• 靜態(tài)資源分類
• CDN場景
• nginx作為靜態(tài)資資源web服務_配置語法
• 瀏覽器緩存
• 服務器端設(shè)置瀏覽器緩存過期實踐
• 跨站訪問

靜態(tài)資源分類

靜態(tài)資源：非服務器動態(tài)運行生成的文件

CDN場景

CDN場景.png

如上圖所示，用戶請求通過DNS解析技術(shù)，將用戶請求定位到分發(fā)層 代理服務器nginx上。

nginx作為靜態(tài)資資源web服務_配置語法

配置語法-tcp_nopush

要求實時性不高的場景下使用，不著急返回給客戶端
語法：tcp_nopush on | off;
默認配置：tcp_nopush  off;
可配置模塊：http、server、location
nopush：整體處理，資源準備好之后一起發(fā)送給用戶

作用：在sendfile開啟狀態(tài)下，提高網(wǎng)絡(luò)包的傳輸效率

配置語法-tcp_nodelay

要求實時性比較高的場景下使用
語法：tcp_nodelay on | off;
默認配置：tcp_nodelay  on;
可配置模塊：http、server、location

作用：keepalive連接下，提高網(wǎng)絡(luò)包的傳輸實時性

配置語法-壓縮

解壓(瀏覽器端)---------------->壓縮(nginx靜態(tài)資源服務端)
語法： gzip_comp_level level;
默認配置：gzip_comp_level 1;
可配置模塊：http、server、location

壓縮模塊擴展
http_gzip_static_module－支持預讀gzip功能

作用：較少網(wǎng)絡(luò)資源的消耗，提高靜態(tài)資源快速響應的能力,提高服務端的處理效率

瀏覽器緩存

http協(xié)議定義的緩存機制

如:Expires；cache-control等

校驗過期機制

詳細解釋：

1.cache-control-(本地緩存是否失效驗證階段):
客戶端緩存的文件先會檢查原先請求頭中的cache-control是否已經(jīng)超過可緩存 期限，超過則過期
2.Last-Modified 1s精度
跟了時間，客戶端請求過程中請求頭中攜帶Last-Modified 如果跟服務器端文件的last-Modified相同則返回304，如果不相同則服務端重新返回給客戶端。
3.Etag 是對服務器文件的一段編碼，服務器文件變化后Etag會發(fā)生變化，
如果客戶端傳遞過來的Etag與服務器端不一致，則響應最新的文件并在響應之
前進行緩存協(xié)商，返回對應的緩存控制信息給瀏覽器。

瀏覽器緩存原理示意圖

瀏覽器緩存原理示意圖

服務器端設(shè)置瀏覽器緩存過期實踐

Response添加Cache-Control、Expries頭

語法：expries time;
默認：expries off;//默認是關(guān)閉的
可配置項：http、server、location、if in location

配置實踐

1. touch /etc/nginx/conf.d/static_server.conf
2. vi  /etc/nginx/conf.d/static_server.conf
3. 配置如下：
server {
   listen 80;
   server_name eshop-cache03;

   location ~ .*\.(html|htm)$ {
     expires 24h;//添加時間
     root /opt/app/code;
   }
}

image.png

瀏覽器強制設(shè)置請求頭Cache-Control 保證隨時跟服務器交互

跨站訪問

什么是跨站訪問

即瀏覽器訪問統(tǒng)一個頁面www.a.com，利用ajax請求www.b.com 

請求服務端用到兩個域名

為什么瀏覽器禁止跨域訪問
不安全，容易出現(xiàn)csrf攻擊！
如下圖所示：

為什么瀏覽器禁止跨域訪問

舉例說明：
假如一家銀行用以執(zhí)行轉(zhuǎn)賬操作的URL地址如下： [http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName](http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName)

那么，一個惡意攻擊者可以在另一個網(wǎng)站上放置如下代碼： <img src="[http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman](http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman)">

如果有賬戶名為Alice的用戶訪問了惡意站點，而她之前剛訪問過銀行不久，登錄信息尚未過期，那么她就會損失1000資金。

這種惡意的網(wǎng)址可以有很多種形式，藏身于網(wǎng)頁中的許多地方。此外，攻擊者也不需要控制放置惡意網(wǎng)址的網(wǎng)站。例如他可以將這種地址藏在論壇，博客等任何[用戶生成內(nèi)容](https://zh.wikipedia.org/wiki/%E7%94%A8%E6%88%B7%E7%94%9F%E6%88%90%E5%86%85%E5%AE%B9 "用戶生成內(nèi)容")的網(wǎng)站中。這意味著**如果服務器端沒有合適的防御措施的話，用戶即使訪問熟悉的可信網(wǎng)站也有受攻擊的危險**。

透過例子能夠看出，攻擊者并不能通過CSRF攻擊來直接獲取用戶的賬戶控制權(quán)，也不能直接竊取用戶的任何信息。他們能做到的，是**欺騙用戶瀏覽器，讓其以用戶的名義執(zhí)行操作**。

nginx設(shè)置允許跨站訪問
假如我們使用nginx做了動靜分離，動態(tài)數(shù)據(jù)都需要通過ajax請求數(shù)據(jù)接口來獲取，那么瀏覽器默認的同源策略會組織我們?nèi)コ晒φ埱髷?shù)據(jù)接口。比如我們網(wǎng)站A網(wǎng)頁域名前綴是www.abc.com、數(shù)據(jù)接口網(wǎng)站前綴是 api.abc.com .那么這個就屬于跨站訪問了。
如何通過nginx服務器設(shè)置，使得api.abc.com 允許跨站訪問呢？

配置如下：
語法：add_header name value [always];
默認：---
可配置上下文：http、server、location

瀏覽器端是否允許跨站訪問是需要驗證response 中的Access-Control-Allow-Origin
跨站訪問實戰(zhàn)*

配置如下：
server {
   listen 80;
   server_name  api.abc.com;
   location ~ .*\.(html|htm)$ {
       add_header Access-Control-Allow-Origin http://www.abc.com;
       add_header Access-Control-Allow-Methods GET,POST,DELET,PUT,OPTIONS;
      root /opt/app/code;
   }
}

瀏覽器判斷服務器返回頭中返回的Access-Control-Allow-Origin 字段是否包含www.abc.com ，如若包含，正確返回相關(guān)響應數(shù)據(jù)。