谨慎升级到HTTPS

我们的业务主要为两块，首先是h5商城，在商城里面会有很多很多的运营活动，点击进去是在后台配置的各种H5活动链接。而H5商城和运营活动是两个业务，两者的联系就是要在后台系统将运营活动的链接配置到商城中。

在说下我们商城的购物车，当用户进行相应的加车、减车或其他操作的时候，此时是将用户的购买信息保存在本地的，即保存在localStorage中。

昨天商城上线，上线后，通知我们将图片链接都替换成https的。

购物车被清空

当商城项目上线后，业务反馈出现一些问题：

客户使用我们的商城添加了一些商品，然后进行了一些其他操作，之后返回到购物车，发现之前添加的商品没有了，找不到了。

当时我们认为是不是用户触发了清空购物车的操作，但实际上并没有，后来PM操作了一些步骤啊，复现了这个问题。

原来是用户在商城中浏览商品并添加到购物车，然后进入到了运营活动页面，从运营活动页面又返回到了商城，此时购物车商品便丢失了。

此时已经有眉目了，商城上线后已经迁到了HTTPS中，但是后台配置的运营活动的链接还是HTTP的，所以，从HTTPS的商城进入到了HTTP的活动页面中，从HTTP的活动页面又进入到了HTTP的商城中，所以，此时的页面是HTTP的，不是迁移后的HTTPS的。

另外，localStorage也是遵循同源策略的，http与https是两个不同的源，所以在https站点添加的localStorage在http站点内是读不出来的，所以就出现了上面的问题。

图片不显示

当在后台中将所有的http的配置换成https后，已经解决了上面的问题，但还有些问题存在，比如我的页面是https了，但是页面中的图片链接还是http的，此时浏览器会抛出警告：

Mixed Content: The page at 'https://m.xxx.com/re-cms-market/?id=40&t=1498815598619' was loaded over HTTPS, but requested an insecure image 'http://ygres.xxx.com/c6c1d5a1a3345ab0ecac30'. This content should also be served over HTTPS.

意思就是说，这个页面是混合页面，既有https，又有http。主页是https，但是请求的内容却是不安全的http，那么在chrome上，会自动转为https请求，但是在有些手机浏览器上，如果https页面有中http请求的话，此时图片是不展示的。

所以还需要把所有的内容中出现的请求（主要是图片）切换到https。

微信支付异常提示

当整个站点切换到https后，请务必检查是否在其他地方有配置URL，比如：微信支付授权目录，或者其他授权目录。否则，在支付微信支付时会提示：“当前页面的URL未注册...”。

处理方式

因为出现这么多问题，而且又有双购物车问题，所以最后后端进行了处理，把http的访问重定向到https的，解决两个站点的问题，统一入口为https。

反思与思考

这个过程中出现一些问题，比如项目间的合作，将http切换到https这个事应该提前通知相关业务方，做好提前切换，提前测试。当然不能要求别人做太多，突出问题还是在于我没有主动去了解商城版本的变动，从而思考对我们运营活动这边有没有影响。

另外一个问题在于，自己对从http切换到https会产生的问题不清楚。自己往往会想切换后页面更安全了，请求可能稍微会慢那么一点等等，不会去想到同源策略，也不会想到混合协议的页面问题，这属于自我经验以及知识的短板，需要不断总结与学习。

下面是根据本次事情做的一些总结与实践方案：

项目间合作层面

1、梳理自身业务与其他业务的联系，要知道别人的哪些业务变动会影响我我们自身的业务
2、当相关业务有版本变动时，要及时去了解该版本的变动情况，涉及到自身业务变动时要及时更改，以免发生严重问题

技术层面

1、之前图片上传到阿里云，返回的是完整的图片链接，我们把图片链接存到数据库中，这种方式会导致后期切换异常麻烦，会涉及到老数据修复，所以这种方式要更改，只保存图片id
2、保存为图片ID后，各个业务独立维护图片的base_url，后期如果有切换则统一切换
3、base_url格式应该是://:xxx.com/，不能携带协议部分，要不然测试环境是http，线上是https，开发上线时的切换也很麻烦
4、安排http以及https的学习计划，对相关细节进行学习与总结

总结

如果大家也要切换到https的话，一定要做好以下几点：

1、通知相关业务方提前切换，并进行确认
2、仔细思考自身业务中有没有涉及到同源策略问题
3、确保站点与站内的请求都是https的请求

总之就是提前通知、提前测试、提前确认，不要等到上线了在做这些事情。