IE8 - IE10跨域JSONP cookie令人头疼

由于完全不受我控制的决定,我处于以下情况:

我在catalog.org上有一个产品列表

单击产品上的"添加到购物车"按钮会发出对Secure.com/product/add/[productKey的AJAX JSONP请求,这会将购物车记录保存到数据库,使用购物车ID设置cookie,然后返回true响应(如果失败则为false)

回到catalog.org,如果响应为真,则向secure.com/cart/info发出另一个AJAX JSONP请求,该请求读取购物车ID cookie,获取记录,并返回购物车中的商品数量

再次返回catalog.org,读取响应并更新页面上的元素,显示购物车中的商品数量(如果有)

此时,单击catalog.org上的"转到购物车"按钮会在secure.com上显示购物车摘要

这在Firefox 17,Chrome 32和IE 11中运行良好.它也适用于我们开发和测试环境中的IE8 - IE10,其中catalog.org是catalog.development.com,catalog.test.com和secure.com是安全的. development.com和secure.test.com分别.

但是,在我们部署到生产之后,这停止了在IE8 - IE10中工作.将产品添加到购物车后,购物车中的商品数量会在catalog.org上成功更新.然后,在单击catalog.org上的"转到购物车"按钮后,secure.com上的购物车摘要显示任何内容,因为它无法读取cookie.在IE开发人员工具中进入缓存>"查看cookie信息"显示没有购物车ID cookie.它应该存在,就像在其他浏览器和我们的开发和测试环境中一样.

我相信正在发生的事情是IE阻止第三方cookie.我们已经为secure.com上的所有请求添加了一个P3P精简策略标头,但cookie仍未设置.我们设置的标题是:

P3P: CP="CAO PSA OUR"

为什么不在IE8-IE10中添加紧凑的策略头修复此问题？我怎样才能解决这个问题,以便在IE的所有版本中使用？

解

下面有几个好主意.我接受了@ sdecima's,因为它听起来最有希望.我们最终结合了其中的一些想法,但设法避免了XDomainRequest:

单击产品上的"添加到购物车"按钮会发出对Secure.com/product/add/[productKey的AJAX JSONP请求,这会将购物车记录保存到数据库,使用购物车ID设置cookie,然后返回true响应(如果失败则为false)

我们在secure.com/product/add上更改了操作,以返回一个JSON对象,其中包含指示成功或失败的布尔值以及购物车ID.

回到catalog.org,如果响应为真,则向secure.com/cart/info发出另一个AJAX JSONP请求,该请求读取购物车ID cookie,获取记录,并返回购物车中的商品数量

我们更改了回调函数以检查响应对象中的两个属性.如果成功,并且存在购物车ID,我们会在页面上创建隐藏的iframe.srciframe 的属性设置为我们添加到secure.com的新端点.此操作接受购物车ID参数并保存购物车ID Cookie.我们不再需要在secure.com/product/add操作中保存cookie.

接下来,我们更改了secure.com/cart/info上的操作以接受购物车ID参数.此操作将使用购物车ID参数(如果存在)来获取购物车信息,否则它仍将尝试读取cookie.如果我们可以保证iframe已经完成加载并且cookie已经保存在secure.com上,那么这个额外的检查将是不必要的,但是由于浏览器安全限制,我们无法知道iframe何时在catalog.org上完成加载.

最后,CP="CAO PSA OUR"仍然需要P3P标头才能在IE7-IE10中工作.(是的,这也适用于IE7 :)

我们现在有一个解决方案(尽管是一个非常复杂的解决方案),用于保存和访问适用于所有主流浏览器的跨域cookie,至少在我们能够可靠测试的时候.

我们可能会对此进行一些重构.首先,此时对secure.com/cart/info的第二个AJAX JSONP请求是多余的,因为我们可以将原始请求中所需的所有信息返回到secure.com/product/add操作(更改的附带好处)该操作返回一个JSON对象 - 加上我们可以返回一条错误消息,指出如果出现错误则确切失败的原因).