javascript - IE8 - IE10 跨域 JSONP cookie 头疼

Question

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

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

单击产品上的“添加到购物车”按钮向 secure.com/product/add/[productKey] 发出 AJAX JSONP 请求，该请求将购物车记录保存到数据库中，使用购物车 ID 设置 cookie，并返回 true响应(如果失败则为 false)

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

再次返回 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 紧凑策略 header ，但仍未设置 cookie。我们正在设置的标题是:

P3P: CP="CAO PSA OUR"

为什么在 IE8 - IE10 中添加紧凑策略 header 不解决这个问题？如何修复此问题以在所有版本的 IE 中工作？

解决方案

下面发布了几个好主意。我接受了@sdecima，因为它听起来最有前途。我们最终结合了其中一些想法，但设法避免了 XDomainRequest:

• Clicking the "Add to Cart" button on a product makes an AJAX JSONP request to secure.com/product/add/[productKey], which saves the cart record to the database, sets a cookie with the cart ID, and returns a true response (or false if it failed)

我们更改了 secure.com/product/add 上的操作，以返回一个带有指示成功或失败的 bool 值和购物车 ID 的 JSON 对象。

• Back on catalog.org, if the response is true, another AJAX JSONP request is made to secure.com/cart/info, which reads the cart ID cookie, fetches the record, and returns the number of items in the cart

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

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

最后，P3P header CP="CAO PSA OUR"这仍然需要在 IE7 - IE10 中工作。 (是的，这现在也适用于 IE7 :)

我们现在有一个解决方案(尽管非常复杂)，用于保存和访问跨域 cookie，它适用于所有主要浏览器，至少在我们可以可靠测试的时候是这样。

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

Answer 1

简而言之

Cookie 不会在 IE 8 和 9 上通过跨域请求。不过它应该适用于 IE 10 和 11。

IE 8 和 9

在 IE8/9 上 XMLHttpRequest部分支持 CORS和跨域请求是在 XDomainRequest object 的帮助下进行的。它不会随每个请求发送 cookie。

您可以在以下官方 MSDN 博客文章中阅读有关此内容的更多信息:
http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

特别是这部分:

5 . No authentication or cookies will be sent with the request

In order to prevent misuse of the user’s ambient authority (e.g. cookies, HTTP credentials, client certificates, etc), the request will be stripped of cookies and credentials and will ignore any authentication challenges or Set-Cookie directives in the HTTP response. XDomainRequests will not be sent on previously-authenticated connections, because some Windows authentication protocols (e.g. NTLM/Kerberos) are per-connection-based rather than per-request-based.

浏览器 10+

从 IE10 开始，完整 CORS支持已添加到 XMLHTTPRequest并且它应该可以在来自服务器的响应(希望在浏览器上设置 cookie)上使用正确的 Access-Control-Allow-Origin header 属性正常工作。

更多关于这里的信息:
http://blogs.msdn.com/b/ie/archive/2012/02/09/cors-for-xhr-in-ie10.aspx
和这里:
http://www.html5rocks.com/en/tutorials/cors/

IE 8 和 9 上的解决方法

在 IE8/9 上解决这个问题的唯一方法是引用相同的 MSDN post如上:

Sites that wish to perform authentication of the user for cross-origin requests can use explicit methods (e.g. tokens in the POST body or URL) to pass this authentication information without risking the user’s ambient authority.