我们的业务主要为两块,首先是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的请求
总之就是提前通知、提前测试、提前确认,不要等到上线了在做这些事情。