谨慎升级到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。

反思与思考

这个过程中出现一些问题,比如项目间的合作,将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的请求

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注