給網站戴上「安全套」

本文首發於歐雷流《給網站戴上「安全套」》。因爲我會時不時對文章進行補充、修正和潤色，爲了保證所看到的是最新版本，請閱讀原文。

上週六我去一家售後服務點參加了「冬日保養計劃」，雖然如今是春天……這是牛電科技爲小牛電動車車主所提供的一個售後服務，在去年 11 月 25 日以前購入的能夠對車子進行一次免費保養，同時還贈送了一份人車保險——「牛油保」。不得不說，雖然各方面有些不足，但小牛作得仍是不錯的！

不像其餘電動車廠商，小牛對用戶的安全問題比較重視，因此推出了這個計劃和保險。昨天下班時，手機收到了一條由牛電科技發來的短信。

就連外界都對咱們的安全那麼關心，咱們有什麼理由不去注重本身的安全呢？不只僅是自身，還應該包括與本身相關的事物的安全，好比網站。

網站安全包含不少方面，本文所要說的是沒什麼技術含量的，只須要作一些簡單配置的——你想的沒錯，就是 HTTPS。

事前說明

就在昨天，我作了一個決定——全站開啓 HTTPS。

原因

雖然是本身的網站，但我也會時不時地訪問一下，體驗並琢磨用戶在瀏覽網站和閱讀文章時的感覺。不管是電腦仍是手機，總會出現礙眼的東西！

看到圖中右下角那個「中國移動」的圖標沒有？按住能夠拖動到屏幕中的任何位置，就像 iOS 提供的那個輔助用的 AssistiveTouch 同樣；點擊後會出現一個顯示剩餘流量和流量套餐的彈層。

是否是以爲中國移動特別貼心，在你沒用 WiFi 瀏覽網頁時可以時刻監控並提醒你剩餘流量？若是換作是中國電信，彈出的就是浮窗廣告了，這回你還以爲貼心麼？

Too young, too simple! Sometimes naive!

無論你以爲貼不貼心，實際上它們都作了一件極其噁心的事情——HTTP 劫持！不管是做爲網站用戶仍是做爲網站管理員，若是你所在瀏覽的網站已經被網絡運營商劫持了，那麼你的數據信息的安全正在遭受威脅！

聲明

爲了你本人及你的網站着想，我有必要事先聲明一下——

本文中所描述的是配置全站 HTTPS，示例代碼中用的是本站的域名和目錄路徑，而且除了域名都是虛構的，在操做時請替換成本身的。

我認爲開啓全站 HTTPS 是條「不歸路」，也就是說，要再改回 HTTP 會有很麻煩的後果。因此，在進行配置以前請再三考慮對你來講是否真的有必要這麼作。

若是你選擇繼續往下看，表明已經知道後果並作好相應的心理準備了。

傳輸加密

現現在，在訪問一個網站時其網址大多爲 http:// 開頭。懂點網絡知識的都知道 HTTP 是不加密的明文傳輸，沒作任何安全保障措施，黑客能夠不費吹灰之力就能拿到數據，運營商可以隨意利用你所訪問的網站作些噁心的小動做。爲了不那些「杯具」，網站須要戴上名爲「SSL」的「安全套」。

根據不一樣的操做系統和服務器環境「戴法」也不盡相同，這裏只說 CentOS + Nginx 的狀況。

申請 SSL 證書

給網站加 SSL 須要證書，在之前都是收費的，並且較貴，這對於我的站長來講無疑是一筆不小的開銷，增長了運營成本。然而如今有不少免費證書，爲「全民 HTTPS 時代」提供了極大的方便！我所使用的是「沃通」所提供的免費 SSL 證書。

訪問沃通數字證書商店的申請免費 SSL 證書頁面，填入各項信息後把生成的證書下載到本地；將壓縮包解壓，找到裏面的 for Nginx 壓縮包再解壓就是證書文件了。

配置 Nginx

在進行配置以前，須要將沃通生成的 SSL 證書傳到服務器上。由於我沒安裝任何 FTP 應用，因此使用命令行經過 scp 命令把文件上傳過去。

scp ourai.ws_sha256_cn/for\ Nginx/1_ourai.ws_bundle.crt user@ourai.ws:/home/www/ourai.ws.crt

scp ourai.ws_sha256_cn/for\ Nginx/2_ourai.ws.key user@ourai.ws:/home/www/ourai.ws.key

接下來就是修改 Nginx 的配置文件了。能夠在服務器上用 vim 命令直接修改，也能夠拷貝到本地用 Sublime Text 之類的圖形化編輯器修改完再傳到服務器上。所增長的配置內容主要以下：

server {
  listen       80;
  listen       443 ssl;      # 對 443 端口進行 SSL 加密
  server_name  ourai.ws;
  root         /home/www/site;

  # 沃通生成的 SSL 證書的存放位置
  ssl_certificate           /home/www/ourai.ws.crt;
  ssl_certificate_key       /home/www/ourai.ws.key;
  # 其餘 SSL 相關設置
  ssl_session_timeout       10m;
  ssl_protocols             TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers               EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES;
  ssl_prefer_server_ciphers on;

  # 全部 HTTP 訪問都永久重定向（301）到 HTTPS
  if ( $scheme = http ) {
    rewrite ^/(.*) https://$server_name/$1 permanent;
  }
}

將配置文件保存並 nginx -s reload 重啓 Nginx，用瀏覽器訪問一下本身的網站看看效果。

很酷很屌有沒有！逼格又上升了一個檔次！！媽媽不再用擔憂個人網站被強行插入了！！！

先別得瑟，這還只是披了一層 HTTPS 的外衣，雖然可以抵禦一些攻擊，但距離真正的 HTTPS 還差點。

增強安全性

在啓用 HTTPS 後，通常會將經過 HTTP 訪問的連接跳轉到 HTTPS 的。

用戶在瀏覽器地址欄中輸入網址時基本不會帶協議，而是直接輸入域名，這時瀏覽器會先經過 HTTP 的方式訪問資源從而在沒有進行加密的狀況下與服務器創建了鏈接，黑客會在跳轉到 HTTPS 以前的空隙進行攻擊，即「中間人攻擊」。

你鏈接到一個免費 WiFi 接入點，而後開始瀏覽網站，訪問你的網上銀行，查看你的支出，而且支付一些訂單。很不幸，你接入的 WiFi 其實是黑客的筆記本熱點，他們攔截了你最初的 HTTP 請求，而後跳轉到一個你銀行網站如出一轍的釣魚網站。 如今，你的隱私數據暴露給黑客了。

那麼，該如何防止本身的用戶在訪問網站時遭趕上述事情呢？給本身的網站再加上一層保護——HSTS

Nginx 中配置起來仍是很簡單的，只需在配置了 HTTPS 的 server 塊中加一句 add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";。

server {
  listen       80;
  listen       443 ssl;      # 對 443 端口進行 SSL 加密
  server_name  ourai.ws;
  root         /home/www/site;

  # 沃通生成的 SSL 證書的存放位置
  ssl_certificate           /home/www/ourai.ws.crt;
  ssl_certificate_key       /home/www/ourai.ws.key;
  # 其餘 SSL 相關設置
  ssl_session_timeout       10m;
  ssl_protocols             TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers               EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES;
  ssl_prefer_server_ciphers on;

  # 主域名和子域名都啓用 HSTS，過時時間爲兩年
  add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";

  # 全部 HTTP 訪問都永久重定向（301）到 HTTPS
  if ( $scheme = http ) {
    rewrite ^/(.*) https://$server_name/$1 permanent;
  }
}

別忘記 nginx -s reload 重啓服務器哦！

新建一個標籤頁，打開 Chrome DevTools 切換到「Network」選項卡，「Preserve log」前面打上勾後再次訪問網站，在日誌的最上面有兩個看起來相同的網絡請求。

然而它們並不同，第一個是 HTTP 請求，第二個是跳轉後的 HTTPS 請求。再仔細點看會發現那個 HTTP 請求的狀態碼變了，不是 301 了，而是從未見過的 307！

這個 307 跳轉不是服務器端進行的，而是瀏覽器識別到網站設置了 HSTS 而本身進行的客戶端跳轉。

若是設置了 HSTS，用戶只要用某個現代瀏覽器經過 HTTPS 的方式訪問過網站一次，之後即便用 HTTP 訪問網站也會在請求到達服務器以前就被瀏覽器攔截並改爲 HTTPS 請求服務器。

後記

SSL 就像是安全套，雖提升了安全性卻失去了快感。HTTPS 使從發起請求到看到頁面的步驟加長，響應速度一定比 HTTP 慢，性能也會有所下降。

支持 HTTPS 後，只有當頁面中的靜態資源（圖片、腳本、樣式表等）所有爲 https:// 開頭時纔會被瀏覽器認爲是「安全的」，網址前面會顯示鎖頭圖標。

網上搜出來的啓用 HTTPS 的教程文章基本都只講「如何配置 SSL」而沒有提到「添加 HSTS」。我也是經網友提醒纔給網站增長了 HSTS 以提升安全性，謝謝他。:-)

網站就是戰場，是站長與黑客交手的地方。在談「安全」時，歷來就沒有絕對的安全，就像安全套不能百分百避免中標。不存在一勞永逸的銀彈，就是見招拆招，正所謂「道高一尺，魔高一丈」，「安全防範」都是「防君子不防小人」。要想使本身的網站時刻保持相對安全的狀態，站長自己就應該是一名黑客。

突然想起有一本關於前端安全的書買了許久沒看……

我必定會找時間把它看掉的！（這絕逼不是「死亡 flag」……ˊ_>ˋ）