摘要：為了避免那些杯具，網(wǎng)站需要戴上名為的安全套。我也是經(jīng)網(wǎng)友提醒才給網(wǎng)站增加了以提高安全性，謝謝他。在談安全時(shí)，從來(lái)就沒(méi)有絕對(duì)的安全，就像安全套不能百分百避免中標(biāo)。要想使自己的網(wǎng)站時(shí)刻保持相對(duì)安全的狀態(tài)，站長(zhǎng)本身就應(yīng)該是一名黑客。

本文首發(fā)于歐雷流《給網(wǎng)站戴上「安全套」》。由于我會(huì)時(shí)不時(shí)對(duì)文章進(jìn)行補(bǔ)充、修正和潤(rùn)色，為了保證所看到的是最新版本，請(qǐng)閱讀原文。

上周六我去一家售后服務(wù)點(diǎn)參加了「冬日保養(yǎng)計(jì)劃」，雖然現(xiàn)在是春天……這是牛電科技為小牛電動(dòng)車(chē)車(chē)主所提供的一個(gè)售后服務(wù)，在去年 11 月 25 日之前購(gòu)入的可以對(duì)車(chē)子進(jìn)行一次免費(fèi)保養(yǎng)，同時(shí)還贈(zèng)送了一份人車(chē)保險(xiǎn)——「牛油保」。不得不說(shuō)，雖然各方面有些不足，但小牛做得還是不錯(cuò)的！

不像其他電動(dòng)車(chē)廠(chǎng)商，小牛對(duì)用戶(hù)的安全問(wèn)題比較重視，所以推出了這個(gè)計(jì)劃和保險(xiǎn)。昨天下班時(shí)，手機(jī)收到了一條由牛電科技發(fā)來(lái)的短信。

就連外界都對(duì)我們的安全那么關(guān)心，我們有什么理由不去注重自己的安全呢？不僅僅是自身，還應(yīng)該包括與自己相關(guān)的事物的安全，比如網(wǎng)站。

網(wǎng)站安全包含很多方面，本文所要說(shuō)的是沒(méi)什么技術(shù)含量的，只需要做一些簡(jiǎn)單配置的——你想的沒(méi)錯(cuò)，就是 HTTPS。

就在昨天，我做了一個(gè)決定——全站開(kāi)啟 HTTPS。

雖然是自己的網(wǎng)站，但我也會(huì)時(shí)不時(shí)地訪(fǎng)問(wèn)一下，體驗(yàn)并琢磨用戶(hù)在瀏覽網(wǎng)站和閱讀文章時(shí)的感受。無(wú)論是電腦還是手機(jī)，總會(huì)出現(xiàn)礙眼的東西！

看到圖中右下角那個(gè)「中國(guó)移動(dòng)」的圖標(biāo)沒(méi)有？按住可以拖動(dòng)到屏幕中的任何位置，就像 iOS 提供的那個(gè)輔助用的 AssistiveTouch 一樣；點(diǎn)擊后會(huì)出現(xiàn)一個(gè)顯示剩余流量和流量套餐的彈層。

是不是覺(jué)得中國(guó)移動(dòng)特別貼心，在你沒(méi)用 WiFi 瀏覽網(wǎng)頁(yè)時(shí)能夠時(shí)刻監(jiān)控并提醒你剩余流量？如果換做是中國(guó)電信，彈出的就是浮窗廣告了，這回你還覺(jué)得貼心么？

Too young, too simple! Sometimes naive!

不管你覺(jué)得貼不貼心，實(shí)際上它們都做了一件極其惡心的事情——HTTP 劫持！無(wú)論是作為網(wǎng)站用戶(hù)還是作為網(wǎng)站管理員，如果你所在瀏覽的網(wǎng)站已經(jīng)被網(wǎng)絡(luò)運(yùn)營(yíng)商劫持了，那么你的數(shù)據(jù)信息的安全正在遭受威脅！

為了你本人及你的網(wǎng)站著想，我有必要事先聲明一下——

本文中所描述的是配置全站 HTTPS，示例代碼中用的是本站的域名和目錄路徑，并且除了域名都是虛構(gòu)的，在操作時(shí)請(qǐng)?zhí)鎿Q成自己的。
我認(rèn)為開(kāi)啟全站 HTTPS 是條「不歸路」，也就是說(shuō)，要再改回 HTTP 會(huì)有很麻煩的后果。所以，在進(jìn)行配置之前請(qǐng)?jiān)偃紤]對(duì)你來(lái)說(shuō)是否真的有必要這么做。

如果你選擇繼續(xù)往下看，代表已經(jīng)知道后果并做好相應(yīng)的心理準(zhǔn)備了。

現(xiàn)如今，在訪(fǎng)問(wèn)一個(gè)網(wǎng)站時(shí)其網(wǎng)址大多為 http:// 開(kāi)頭。懂點(diǎn)網(wǎng)絡(luò)知識(shí)的都知道 HTTP 是不加密的明文傳輸，沒(méi)做任何安全保障措施，黑客可以不費(fèi)吹灰之力就能拿到數(shù)據(jù)，運(yùn)營(yíng)商能夠隨意利用你所訪(fǎng)問(wèn)的網(wǎng)站做些惡心的小動(dòng)作。為了避免那些「杯具」，網(wǎng)站需要戴上名為「SSL」的「安全套」。

根據(jù)不同的操作系統(tǒng)和服務(wù)器環(huán)境「戴法」也不盡相同，這里只說(shuō) CentOS + Nginx 的情況。

給網(wǎng)站加 SSL 需要證書(shū)，在以前都是收費(fèi)的，而且較貴，這對(duì)于個(gè)人站長(zhǎng)來(lái)說(shuō)無(wú)疑是一筆不小的開(kāi)銷(xiāo)，增加了運(yùn)營(yíng)成本。然而現(xiàn)在有很多免費(fèi)證書(shū)，為「全民 HTTPS 時(shí)代」提供了極大的方便！我所使用的是「沃通」所提供的免費(fèi) SSL 證書(shū)。

訪(fǎng)問(wèn)沃通數(shù)字證書(shū)商店的申請(qǐng)免費(fèi) SSL 證書(shū)頁(yè)面，填入各項(xiàng)信息后把生成的證書(shū)下載到本地；將壓縮包解壓，找到里面的 for Nginx 壓縮包再解壓就是證書(shū)文件了。

在進(jìn)行配置之前，需要將沃通生成的 SSL 證書(shū)傳到服務(wù)器上。因?yàn)槲覜](méi)安裝任何 FTP 應(yīng)用，所以使用命令行通過(guò) scp 命令把文件上傳過(guò)去。

scp ourai.ws_sha256_cn/for Nginx/1_ourai.ws_bundle.crt [email protected]:/home/www/ourai.ws.crt

scp ourai.ws_sha256_cn/for Nginx/2_ourai.ws.key [email protected]:/home/www/ourai.ws.key

接下來(lái)就是修改 Nginx 的配置文件了?？梢栽诜?wù)器上用 vim 命令直接修改，也可以拷貝到本地用 Sublime Text 之類(lèi)的圖形化編輯器修改完再傳到服務(wù)器上。所增加的配置內(nèi)容主要如下：

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

  # 沃通生成的 SSL 證書(shū)的存放位置
  ssl_certificate           /home/www/ourai.ws.crt;
  ssl_certificate_key       /home/www/ourai.ws.key;
  # 其他 SSL 相關(guān)設(shè)置
  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 訪(fǎng)問(wèn)都永久重定向（301）到 HTTPS
  if ( $scheme = http ) {
    rewrite ^/(.*) https://$server_name/$1 permanent;
  }
}

將配置文件保存并 nginx -s reload 重啟 Nginx，用瀏覽器訪(fǎng)問(wèn)一下自己的網(wǎng)站看看效果。

很酷很屌有沒(méi)有！逼格又上升了一個(gè)檔次??！媽媽再也不用擔(dān)心我的網(wǎng)站被強(qiáng)行插入了?。?！

先別得瑟，這還只是披了一層 HTTPS 的外衣，雖然能夠抵御一些攻擊，但距離真正的 HTTPS 還差點(diǎn)。

在啟用 HTTPS 后，一般會(huì)將通過(guò) HTTP 訪(fǎng)問(wèn)的鏈接跳轉(zhuǎn)到 HTTPS 的。

用戶(hù)在瀏覽器地址欄中輸入網(wǎng)址時(shí)基本不會(huì)帶協(xié)議，而是直接輸入域名，這時(shí)瀏覽器會(huì)先通過(guò) HTTP 的方式訪(fǎng)問(wèn)資源從而在沒(méi)有進(jìn)行加密的情況下與服務(wù)器建立了連接，黑客會(huì)在跳轉(zhuǎn)到 HTTPS 之前的空隙進(jìn)行攻擊，即「中間人攻擊」。

你連接到一個(gè)免費(fèi) WiFi 接入點(diǎn)，然后開(kāi)始瀏覽網(wǎng)站，訪(fǎng)問(wèn)你的網(wǎng)上銀行，查看你的支出，并且支付一些訂單。很不幸，你接入的 WiFi 實(shí)際上是黑客的筆記本熱點(diǎn)，他們攔截了你最初的 HTTP 請(qǐng)求，然后跳轉(zhuǎn)到一個(gè)你銀行網(wǎng)站一模一樣的釣魚(yú)網(wǎng)站。 現(xiàn)在，你的隱私數(shù)據(jù)暴露給黑客了。

那么，該如何防止自己的用戶(hù)在訪(fǎng)問(wèn)網(wǎng)站時(shí)遭遇上述事情呢？給自己的網(wǎng)站再加上一層保護(hù)——HSTS

Nginx 中配置起來(lái)還是很簡(jiǎn)單的，只需在配置了 HTTPS 的 server 塊中加一句 add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";。

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

  # 沃通生成的 SSL 證書(shū)的存放位置
  ssl_certificate           /home/www/ourai.ws.crt;
  ssl_certificate_key       /home/www/ourai.ws.key;
  # 其他 SSL 相關(guān)設(shè)置
  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，過(guò)期時(shí)間為兩年
  add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";

  # 所有 HTTP 訪(fǎng)問(wèn)都永久重定向（301）到 HTTPS
  if ( $scheme = http ) {
    rewrite ^/(.*) https://$server_name/$1 permanent;
  }
}

別忘記 nginx -s reload 重啟服務(wù)器哦！

新建一個(gè)標(biāo)簽頁(yè)，打開(kāi) Chrome DevTools 切換到「Network」選項(xiàng)卡，「Preserve log」前面打上勾后再次訪(fǎng)問(wèn)網(wǎng)站，在日志的最上面有兩個(gè)看起來(lái)相同的網(wǎng)絡(luò)請(qǐng)求。

然而它們并不一樣，第一個(gè)是 HTTP 請(qǐng)求，第二個(gè)是跳轉(zhuǎn)后的 HTTPS 請(qǐng)求。再仔細(xì)點(diǎn)看會(huì)發(fā)現(xiàn)那個(gè) HTTP 請(qǐng)求的狀態(tài)碼變了，不是 301 了，而是從未見(jiàn)過(guò)的 307！

這個(gè) 307 跳轉(zhuǎn)不是服務(wù)器端進(jìn)行的，而是瀏覽器識(shí)別到網(wǎng)站設(shè)置了 HSTS 而自己進(jìn)行的客戶(hù)端跳轉(zhuǎn)。

如果設(shè)置了 HSTS，用戶(hù)只要用某個(gè)現(xiàn)代瀏覽器通過(guò) HTTPS 的方式訪(fǎng)問(wèn)過(guò)網(wǎng)站一次，以后即使用 HTTP 訪(fǎng)問(wèn)網(wǎng)站也會(huì)在請(qǐng)求到達(dá)服務(wù)器之前就被瀏覽器攔截并改成 HTTPS 請(qǐng)求服務(wù)器。

SSL 就像是安全套，雖提高了安全性卻失去了快感。HTTPS 使從發(fā)起請(qǐng)求到看到頁(yè)面的步驟加長(zhǎng)，響應(yīng)速度必定比 HTTP 慢，性能也會(huì)有所降低。

支持 HTTPS 后，只有當(dāng)頁(yè)面中的靜態(tài)資源（圖片、腳本、樣式表等）全部為 https:// 開(kāi)頭時(shí)才會(huì)被瀏覽器認(rèn)為是「安全的」，網(wǎng)址前面會(huì)顯示鎖頭圖標(biāo)。

網(wǎng)上搜出來(lái)的啟用 HTTPS 的教程文章基本都只講「如何配置 SSL」而沒(méi)有提到「添加 HSTS」。我也是經(jīng)網(wǎng)友提醒才給網(wǎng)站增加了 HSTS 以提高安全性，謝謝他。:-)

網(wǎng)站就是戰(zhàn)場(chǎng)，是站長(zhǎng)與黑客交手的地方。在談「安全」時(shí)，從來(lái)就沒(méi)有絕對(duì)的安全，就像安全套不能百分百避免中標(biāo)。不存在一勞永逸的銀彈，就是見(jiàn)招拆招，正所謂「道高一尺，魔高一丈」，「安全防范」都是「防君子不防小人」。要想使自己的網(wǎng)站時(shí)刻保持相對(duì)安全的狀態(tài)，站長(zhǎng)本身就應(yīng)該是一名黑客。

忽然想起有一本關(guān)于前端安全的書(shū)買(mǎi)了許久沒(méi)看……

我一定會(huì)找時(shí)間把它看掉的！（這絕逼不是「死亡 flag」……ˊ_>ˋ）