给网站戴上「安全套」

本文首发于欧雷流《给网站戴上「安全套」》。因为我会时不时对文章进行补充、修正和润色，为了保证所看到的是最新版本，请阅读原文。

上周六我去一家售后服务点参加了「冬日保养计划」，虽然如今是春天……这是牛电科技为小牛电动车车主所提供的一个售后服务，在去年 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」……ˊ_>ˋ）