基于阿里云上实现全站https

http://www.zhuxiaodong.net/2016/how-to-switch-your-website-to-https-on-aliyun-part1/

一些重要的互联网资源参考:

---

强烈建议通读一下Jerry Qu的关于https, http/2, nginx的blog, 这是我目前发现的在国内的技术文章中, 关于上述的几个知识点讲解的最为全面透彻的文章.

传送门: https://imququ.com/

为什么我们需要实现全站https?

---

目前主流大厂的网站和服务都已经实现了全站https, 例如: baidu, taobao, jd等. 
关于这方面的好处和优势, 互联网上太多文章在进行介绍. 例如: 为什么我们应该尽快升级到 HTTPS？
对于一般的创业型公司, 迫切需要实现全站https的理由: 
1. 苹果要求所有iOS应用在年底前默认使用HTTPS连接
2. 微信小程序的开发, 要求必须使用https通信
3. HTTP/2的支持

HTTP2.0其实可以支持非HTTPS的，但是现在主流的浏览器chrome，firefox表示还是只支持基于TLS部署的HTTP2.0协议，所以要想升级成HTTP2.0还是先升级HTTPS为好.

升级之前的准备工作.

---

SSL的证书类型?

• DV (Domain Validation): 面向个体用户，安全体系相对较弱，验证方式就是向 whois 信息中的邮箱发送邮件，按照邮件内容进行验证即可通过.
• OV (Organization Validation): 面向企业用户，证书在DV证书验证的基础上，还需要公司的授权，CA通过拨打信息库中公司的电话来确认.
• EV (Extended Validation): 在浏览器URL地址栏当中，展示了注册公司的信息，这会让用户产生更大的信任，这类证书的申请除了以上两个确认外，还需要公司提供金融机构的开户许可证，要求十分严格.

需要强调的是，不论是 DV、OV 还是 EV 证书，其加密效果都是一样的！

重要的区别:
1. DV证书的审核速度较快, 由程序完成审核, 一般申请了之后马上就能够完成证书颁发; OV和EV证书审核较慢, 由人工审核, 一般需要数天的时间.
2. EV证书会在浏览器当中显示公司的信息, 通常被称为绿色地址栏, 以增加用户的信任感. 参考如下访问github时, chrome浏览器的显示方式:

3. EV证书**不支持单个泛域名(*.example.com)或者多个泛域名(*.example1.com, .example2.com)*, OV和DV证书则支持.

如何选择?
通常的情况下, 一个处于初创阶段的互联网公司有多少个子系统是很难在前期就界定出来的. 因此, 如果能够无法明确规划出未来有多少个子系统, 需要使用多少个二级域名, 最好购买支持单个或者多个泛域名的证书. 至于是DV还是OV, 我个人觉得不是那么重要.

一些经验总结:
HTTPS网页中加载的HTTP资源被称之为Mixed Content, 不同的浏览器有不同的block http资源的策略, 因此最好提前整理出你的程序依赖的内部http资源, 和外部http资源(统计资源[GA, CNZZ, 百度统计], 第三方分享, 第三方地图服务等). 尤其是外部的http资源, 需要评估是否提供了https的服务.

到哪里获取https证书?

免费资源:

• Let's Encrypt: 目前个人站点使用的非常普遍的证书.
  特点/限制:

  • 如果你在使用云服务提供商的CDN或者负载均衡服务(例如阿里云的CDN或者SLB), Let's Encrypt就不太适合了, 阿里云的CDN或者SLB要求在云平台上上传证书的公钥和私钥, 而Let's Encrypt强制90天过期, 虽然我们可以通过自动化的方式renew证书, 但我目前还没有找到比较好的解决方案.
  • 只支持单个域名.

• 阿里云Symantec免费DV证书: 
  特点/限制:

  • 赛门铁克-顶级证书颁发机构.
  • 1年过期.
  • 只支持单个域名.

• 腾讯云GeoTrust免费DV证书: 
  特点/限制:

  • GeoTrust-顶级证书颁发机构.
  • 1年过期.
  • 只支持单个域名.

强烈不推荐:
1. StartSSL.com: 详见官网的以下描述:

1. Wosign(沃通): 聊聊“沃通/WoSign”的那些破事儿 Mozilla发布的wosign-issue 新浪的报道

PS: 
1. 阿里云在之前的一段时间也能够购买wosign的证书, 目前也已经下线了.
2. wosign的SEO做得不错, 搜索**SSL证书**, google和baidu都排在了第一页, 导致很多不明真相的群众被忽悠了.

付费资源:

• 阿里云: 提供了赛门铁克, GeoTrust, CFCA三个颁发的证书.

PS: 其它都没有用过, 就不推荐了.

最终我选了什么?

阿里云上的GeoTrust DV SSL: 价格便宜, 支持泛域名, 颁发迅速(30 min之内), 最重要的是统一使用了阿里云进行管理.

后续内容, 请继续参考下一篇文章

http://www.zhuxiaodong.net/2016/how-to-switch-your-website-to-https-on-aliyun-part2/

上一篇文章当中, 我们介绍了SSL证书的类型, 如何选择和购买等. 本篇文章我们开始进入实践环节, 讨论如何部署SSL证书.

我们应用程序的整体架构:

---

上述架构只列出了和讨论https相关的部分.

SSL证书放在哪里进行管理?

---

对于静态资源请求, 由于存储在阿里云OSS上, 并在最前端使用了阿里云CDN, 因此将SSL证书的相关信息在阿里云CDN上配置一下就好了.

对于动态资源的请求, 最前端是使用SLB, 理论上来说, 处理方式可以和上述CDN的方式保持一致, 即将SSL证书放在SLB上进行管理, 但是这样做有以下的缺点:

• 我们需要支持将http请求强制跳转至https, 毕竟用户在浏览器当中输入地址时, 几乎没有用户会主动在浏览器地址栏当中输入: https://. 目前阿里云的SLB并不支持redirect强制跳转的功能,因此我们需要在SLB背后在架设一个nginx, 通过配置server listen 80来做强制跳转.

1
2
3
4
5

server {
    listen          80;
    server_name     .example.com;
    return 301      https://$host$request_uri;
}

• SLB无法做更多基于https安全以及性能层面的优化. 例如支持HSTS, Content Security Policy, OCSP Stapling

同时, nginx还可以很方便做很多扩展功能, 例如http/2的支持, TCP优化等.

基于上述原因, 我们决定在SLB背后的web server上部署nginx, 并将SSL证书放在nginx上进行管理.

调整之后的架构如下:

Q: 上述架构中nginx是否会有单点失败的问题?
A: 不会, 基于成本的考虑, 我们并没有在使用单独的ECS Server部署nginx, 而是将nginx直接部署到了原来的那2台web server上, SLB上的健康检查也调整为check对应的nginx端口是否alive. 具体的设置方式会在下文当中进行介绍.

实践环节

---

接下来我们会阿里云CDN配置, nginx编译/部署/配置, 阿里云SLB配置, 以及相关的应用程序改动等方面, 逐一讲解完整的https部署过程.

Step 1: 从阿里云portal上下载SSL证书.

这里下载的是for nginx格式的证书. 原因是由于在阿里云CDN设置证书时需要使用, 此外我们会使用nginx来管理SSL证书.

下载解压了之后, 会得到2个文件:
xxx.pem
xxx.key

关于证书的编码格式和不同的扩展名, 请参考这里

Step 2: 在阿里云CDN上设置开启https支持.

• 在阿里云CDN的基本信息中, 找到https安全加速, 点击编辑按钮.
  

• 使用文本编辑器打开之前下载xxx.pem文件, 将文件的内容copy到证书内容文本框内.(注意去掉—–END CERTIFICATE—–与—–BEGIN CERTIFICATE—–之间的换行符)

• 使用文本编辑器打开之前下载xxx.key文件, 将文件的内容copy到私钥文本框内
  

• 建议跳转类型设置为默认, 这样保证在程序完全切换完成之前兼容性.

• 保存了之后, 使用https去访问任意的一个静态资源, 测试看是否正常.

Step 3: 源代码编译部署nginx.

内容较多, 参考这里

Step 4: 调整阿里云SLB的监听设置.

上一个步骤中, 我们已经部署好了nginx, 接下来需要调整SLB, 将原有SLB的监听端口由访问后端web application调整为访问nginx.

在阿里云后台portal中, 添加SLB监听设置: SLB TCP:443 –> Nginx TCP:443

设置SLB的健康检查:

NOTE:

1. 原有SLB http:80 –> backend server http:port 的监听在完全切换为https之前建议保留, 以确保应用程序的兼容性.
2. 完整切换完成之后, 将SLB http:80的监听调整为: SLB TCP:80 –> backend server tcp:443(即nginx的端口)

Step 5: 修改代码中内部以及第三方访问资源.

正如前文提到的, 由于浏览器的Mixed Content规范, 我们需要将application当中的使用到的内部访问URL以及第三方组件, 调整为使用https协议进行访问.

在升级的过程当中, 我们难免会出现遗漏的地方, 有两种方式来解决这个问题:

1. 加载资源时, 去掉显式指定访问协议的部分, 这样浏览器就能根据主页面协议类型来自动选择HTTP/HTTPS资源 例如:

   1
   2
   3
   4
   5

   <img src="http://static.example.com/banner.jpg" />
   # 调整为:
   <img src="//static.example.com/banner.jpg" />

2. 针对于现代浏览器, 可以通过upgrade-insecure-requests这个CSP 指令, 强制让页面上所有的http访问转换为https访问, 设置方式参考这里

下面我们列出一些在升级第三方组件的过程当中, 踩过的一些“坑”:

百度地图javascript api.

按照百度地图javascript api的官方文档, 只有javascript V2.0版本才支持https, 参考下图:

对于javascript API, 比较关键的是添加query string: s=1, 参考这里

1

https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1；

我们在将原有程序使用V1.4版本升级到V2.0的过程当中, 还发现了api的不兼容问题, 最后调整了代码才解决这个问题:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var local = new BMap.LocalSearch(map, {
    onSearchComplete: function (rs) {
        searchResult = rs;
    }
});
function bindTraffic() {
    var html = [];
    var str = buildTemplate(searchResult[0]);
    if (str != "") {
        // your code logic here
    }
}
function buildTemplate(ud, tmpl) {
    var context = {
        title: ud.keyword,
        items: []
    };
    $.each(ud, function (index1, u) {
    //u对象下V1.4版本的属性名叫ki, V2.0版本调整为了wr
        $.each(u.wr, function (index2, ki) {
            // your code logic here
        })
    });
}

CNZZ (用于网站的数据收集统计,类似于GA或百度统计)

不需要升级, 官方的js脚本已经考虑了https的使用场景.

OneAPM (用于网站性能监控和统计)

不需要升级, 官方的js脚本已经考虑了https的使用场景.

百度站长统计

js代码需要调整为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
    (function(){
        var bp = document.createElement('script');
        bp.src = '//push.zhanzhang.baidu.com/push.js';
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

对网站进行https测试.

---

使用SSL Lab’s进行评测

访问https://www.ssllabs.com/ssltest/index.html, 以下是我们按照上述方式调整之后的得分:

使用HTTP Security Report进行评测

访问https://httpsecurityreport.com/, 以下是我们按照上述方式调整之后的得分:

得分并不高, 剩下的几个点需要参考HTTP Security Best Practice继续优化.