考拉升级https经验

1、为何要升级https

1. 保护用户数据传输过程当中的安全。
2. 运营商网络劫持问题愈来愈严重，各类广告插入、强制跳App下载等手段严重影响用户体验，若是有违法内容或者用户被骗，还会牵连到考拉。
3. Apple要求iOS平台App在2017.1.1开始强制启用https，不然不容许上架App Store；启用https的应用若是要在各平台都正常，需应用内部webview打开的站点也所有启用https。
4. 随着web标准的更新，愈来愈多的新特性（好比Service Worker等）要求站点开启HTTPS才能使用；

2、目标

• 调整考拉前端代码，使其可同时支持https，http访问；
• 与平常开发同步进行，不影响平常开发；
• 稳步启用https，http双协议支持，最大限度避免https上线致使的问题；

3、前端作了哪些调整

升级范围为考拉前台全部站点，包括wap、web等工程，历史代码量大；主要是将原写死http协议的地方改形成相对协议，使其可同时兼容http及https服务；

1. 页面内资源协议修改

页面资源包括几部分： 静态资源（js，css，ui图片，视频等等），动态内容修改

• 静态资源
  • js: 调整js内部的http资源引用为相对协议，可是传递给外部应用的数据则根据 location.protocol 自动补全为当前页面使用的协议； 其次调整页面对js的引用，使js资源引用为相对协议；
  • css：调整mcss中图片等资源引用URL为相对协议；调整页面对css的引用为相对协议；
  • 打包调整： 调整打包工具配置，使其输出静态资源为相对协议；
  • 图片： 调整js、ftl中的图片缩略函数，区别是否为考拉和nos的图片，判断是否支持https作相应缩略处理，防止外部图片不支持https而显示不出来；全工程查找并替换硬编码图片标签src属性；
  • 外部库调整： 好比NEJ的一些模块或者工具，在URL改成相对协议是，认为其不是一个绝对地址，按相对协议解析会报错，会致使资源加载问题； 好比文件上传功能，在fallback到flash方案时，flash信息都是写死为http，也作了调整;
• 动态内容
  后端给数据，前端显示类型的内容：
  • 图文详情：用正则匹配图文详情里面的img，video标签，并替换http协议为相对协；
  • 页面内部插值输出：调整js、ftl缩略图过滤器，为未使用过滤器的图片等资源增长过滤器，自动进行相对协议处理；
• 页面跳转
  因为部分运营配置的页面，都是直接配置了http连接，用户点击页面的连接很容易跳回到http，不能长期在https下使用，因而咱们在页面的a标签点击时自动根据当前页面协议，调整a标签的href属性的协议为当前协议，来支持正常跳转。

2. CSP规则调整

原CSP规则限制了页面内部加载的资源，协议必须一直，可是https上线初期缓和内容难以免，因此在CSP中增长了规则，容许浏览器加载混合内容（仅限图片、视频）；

3. 外部关联调整

• 微信支付： 调整微信支付后台登记的安全域名信息，增长https url，使其同时支持双协议； 可是此调整不能在业务高峰期作，不然可能影响线上支付；

4、升级过程

这里仅仅列出主要的步骤，细节还比较多：

1. 前端修改双协议支持后的代码上线，并让cdn支持https
2. 公司内网双协议打开进行内部小范围试用
3. 线上双协议打开，可是不开启https强制跳转
4. 线上功能级别灰度启用https，让用户能够从一些页面开始使用https
5. 所有放开

5、后续其它能够作的

1. 上线h2, 已经在作了，很快开始内部测试
2. 域名收敛
3. 其它优化等

by 渔樵