一、为什么要升级https

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

二、目标

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

三、前端做了哪些调整

升级范围为考拉前台所有站点，包括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，使其同时支持双协议； 但是此调整不能在业务高峰期做，否则可能影响线上支付；

四、升级过程

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

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

五、后续其它可以做的

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

by 渔樵