1、

web資源防盜鏈

• 盜鏈是什麼？ 為什麼要防？
• 在自己頁面上顯示一些不是自己伺服器的資源（圖片、音訊、視訊、css、js等）
  由於別人盜鏈你的資源會加重你的伺服器負擔，所以我們需要防止
  可能會影響統計
  

• 防盜鏈是什麼？ 有哪幾種方式？

  防止別人通過一些技術手段繞過本站的資源展示頁，盜用本站資源，讓繞開本站資源展示頁面的資源連結失效
  大大減輕伺服器壓力

  1、Referer (易偽造referer,安全性低)2、加密簽名 （安全性高）

  防盜鏈的工作原理

  通過Referer，伺服器可以檢測到訪問目標資源的來源網站，如果是資原始檔，則可以跟蹤到顯示它的網頁地址。一旦檢測到來源網站不是本站進行阻止

  通過簽名，根據計算簽名的方式，判斷請求是否合法，如果合法則顯示，否則返回錯誤資訊

  Referer實現

  以Nginx為例，前提載入ngx_http_referer_module模組

  //指令valid_referers  全域性invalid_referer

  location ~* \.(gif|jpg|png|webp)$ {

     valid_referers none blocked domain.com *.domain.com ;

     if ($invalid_referer) {

          return 403;

          #rewrite ^/ http://www.domain.com/403.jpg;

     }

  }

  注意：為什麼要none呢？因為如果通過瀏覽器直接訪問資源，

  referer就是為空，所以這種方式不能徹底阻擋住盜鏈。

  加密簽名

  以Nginx為例，前提載入第三方模組HttpAccessKeyModule實現防盜鏈

  location ~* \.(gif|jpg|png|webp)$ {

      accesskey on;

      accesskey_hashmethod md5;

      accesskey_arg key;

      accesskey_signature "mysrc$remote_addr";

  }

  減少HTTP請求次數

  發現問題

  80~90%是花費在頁面引用控制元件的載入上，只有10~20%是花費在文件的載入上
  HTTP/1.1協議規定請求只能序列傳送，話句話就是100個請求，只能一個一個傳送，上一個請求完成才能進行下一個請求

  如何改善？

  減少引用控制元件數量，從而達到減少HTTP請求次數

  如何實現減少請求？

  1、圖片地圖

  原理：把多張圖片合成一張，再使用<map>標籤來實現對圖片上不同區域的連結

  <img src="img/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

  <map name="planetmap">

    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

  </map>

  圖片地圖

  2、CSS Sprites（雪碧圖）

  原理：合拼圖片，再使用css的background-image和background-position來指定顯示元素

  CSS Sprites與圖片地圖效能差不多，但CSS Sprites更加簡單靈活

  3、合併JS與CSS檔案

  載入一個JS檔案比載入多個JS檔案要快

  一般會使用前端自動構建工具打包合併

  4、圖片使用base64編碼

  注意：圖片base64除了可以使用在<img>中，還可以使用在css的background-image中