IE8 - IE10跨域JSONP饼干头痛 [英] IE8 - IE10 cross domain JSONP cookie headache

问题描述

由于是完全我的控制范围之外的决定，我在下面的情况：

Due to decisions that are completely outside of my control, I am in the following situation:

• 我有一个产品上市就catalog.org

• I have a product listing on catalog.org

点击一个产品的加入购物车按钮，使一个AJAX JSONP请求secure.com/product/add/[productKey]，从而节省了车的记录到数据库中，设置一个cookie同车的ID 的，并返回一个真正的响应（或失败则假）

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)

回catalog.org，如果响应是真实的，另一种AJAX JSONP请求发送到secure.com/cart/info~~V，读取的车ID的Cookie 的，取记录，并返回车中的项目数

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

返回上catalog.org再次，响应被读取，并且页面上的元素被更新显示的项目在购物车的数量（如果有的话）

Back on catalog.org once again, the response is read and an element on the page is updated showing the number of items in the cart (if any)

在这一点上，点击catalog.org进入购物车按钮显示在车汇总secure.com

At this point, clicking the "Go to Cart" button on catalog.org displays the cart summary on secure.com

本精美的作品在Firefox 17，Chrome浏览器32和IE 11，它也可以在IE8 - IE10对我们的开发和测试环境，其中catalog.org是catalog.development.com和catalog.test.com和secure.com是secure.development.com和secure.test.com分别。

This works beautifully in Firefox 17, Chrome 32 and IE 11. It also works in IE8 - IE10 on our development and test environments, where catalog.org is catalog.development.com and catalog.test.com and secure.com is secure.development.com and secure.test.com respectively.

然而，当我们部署到生产，这一停在IE8的工作 - IE10。增加产品到车后，项目在购物车的数量上catalog.org成功更新。然后，点击catalog.org进入购物车按钮后，在secure.com车汇总显示什么，因为它无法读取cookie。要缓存>查看Cookie信息在IE develeoper工具显示无车ID的Cookie。它应该在那里，就像它的存在在其他浏览器，并在我们的开发和测试环境。

However, after we deployed to production, this stopped working in IE8 - IE10. After adding a product to the cart, the number of items in the cart is updated successfully on catalog.org. Then, after clicking the "Go to Cart" button on catalog.org, the cart summary on secure.com shows nothing because it can't read the cookie. Going to Cache > "View cookie information" in IE develeoper tools shows no cart ID cookie. It should be there, just like it is there in other browsers and in our development and test environments.

我相信所发生的事情是IE浏览器阻止第三方的cookies。我们增加了对secure.com所有请求P3P压缩策略头，但该cookie仍然没有被设置。我们设置的标题是：

I believe what's happening is IE is blocking third party cookies. We have added a P3P compact policy header to all requests on secure.com, but the cookie is still not being set. The header we are setting is:

P3P: CP="CAO PSA OUR"

为什么不加入压缩策略头解决此问题在IE8 - IE10？我怎样才能解决这个问题，在所有版本的IE的工作？

Why doesn't adding the compact policy header fix this in IE8 - IE10? How can I fix this to work in all versions of IE?

解决方案

有以下几个贴好点子。我接受了@ sdecima的，因为它听起来最有前途的。最后我们结合其中的一些想法，但设法避免XDomainRequest：

There are several good ideas posted below. I accepted @sdecima's because it sounded the most promising. We ended up combining some of these ideas but managed to avoid XDomainRequest:

  
• 点击一个产品的加入购物车按钮可以使一个AJAX JSONP   要求secure.com/product/add/[productKey]，从而节省了购物车   记录到数据库中，设置与车ID 的一个cookie，并返回一个   真正的响应（或失败则假）
  

• 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的行动回报了布尔的J​​SON对象指示成功或失败的和的车标识。

We changed the action at secure.com/product/add to return a JSON object with a boolean indicating success or failure and the cart ID.

  
• 在回catalog.org，如果响应是真实的，另一种AJAX JSONP   请求发送到secure.com/cart/info~~V，其中的读取车ID   饼干的，取该记录，并返回在项目数   购物车
  

• 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为present，我们创建了一个隐藏的iframe页面上。该 iframe的SRC 属性设置为我们添加到secure.com一个新的端点。此操作接受一个购物车ID参数，并保存购物车ID的Cookie。我们不再需要保存的Cookie在secure.com/product/add行动。

We changed the callback function to check for both properties in the response object. If success is true and the cart ID is present, we create a hidden iframe on the page. The src attribute of the iframe is set to a new endpoint we added to secure.com. This action accepts a cart ID parameter and saves the cart ID cookie. We no longer need to save the cookie in the secure.com/product/add action.

接下来，我们改变了行动，在secure.com/cart/info接受车ID参数。这一行动将使用车ID参数，如果present去取车信息，否则仍将尝试读取cookie。这额外的检查是不必要的，如果我们能保证的iframe过完装，该Cookie已被保存在secure.com，但我们知道，当iframe中加载完成后对目录的没有办法的。组织由于浏览器的安全限制。

Next, we changed the action at secure.com/cart/info to accept a cart ID parameter. This action will use the cart ID parameter if present to fetch the cart information, otherwise it will still attempt to read the cookie. This extra check would be unnecessary if we could guarantee that the iframe had finished loading and the cookie had been saved on secure.com, but we have no way of knowing when the iframe has finished loading on catalog.org due to browser security restrictions.

最后，P3P头 CP =CAO PSA OUR仍然需要这种在IE7的工作 - IE10。 （是的，这部作品在IE7现在太：）

Finally, the P3P header CP="CAO PSA OUR" is still required for this to work in IE7 - IE10. (Yes, this works in IE7 now too :)

我们现在有一个解决方案（尽管是一个非常复杂的），保存和访问跨域的Cookie，在所有主要的浏览器的工作原理，至少可以追溯到我们能够可靠地测试。

We now have a solution (albeit an incredibly complex one) for saving and accessing cross domain cookies that works in all major browser, at least as far back as we can reliably test.

我们可能会重构这个更多一些。一方面，第二AJAX JSONP请求secure.com/cart/info~~V是多余的，在这一点上，因为我们可以回到我们需要在原来的要求secure.com/product/add~~V改变动作（一个附带好处的信息该操作返回一个JSON对象 - 再加上我们就可以为什么如果有一个错误失败返回，表示完全是一个错误消息）

We will probably refactor this some more. For one thing, the second AJAX JSONP request to secure.com/cart/info is redundant at this point since we can return all the information we need in the original request to secure.com/product/add action (a side benefit of changing that action to return a JSON object - plus we can return an error message indicating exactly why it failed if there was an error).

推荐答案

饼干不会通过IE 8和9一个跨域请求，它可以工作在IE 10和11，但。

In short

Cookies will NOT go through a cross-origin request on IE 8 and 9. It should work on IE 10 and 11 though.

在IE8 / 9 XMLHtt prequest 部分支持 CORS 和跨域请求进行的的XDomainRequest~~MD~~aux对象不发送cookie与每个请求。

On IE8/9 XMLHttpRequest partially supports CORS, and cross-origin requests are made with the help of the XDomainRequest object which does NOT send cookies with each request.

您可以阅读更多关于这在以下MSDN官方博客文章：
<一href="http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx">http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

You can read more about this on the following official MSDN Blog post:
http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

特别是这一部分：

5。无验证或饼干将请求发送

为了用户的环境权威prevent滥用（如   饼干，HTTP的凭证，客户端证书等），的请求   饼干和凭证被剥离，并会忽略任何   在HTTP认证挑战或Set-Cookie的指令   响应。 XDomainRequests不会在previously验证的发   连接，因为某些Windows身份验证协议（例如：   NTLM / Kerberos的）是每个连接为基础的，而不是每请求为基础的。

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.

与IE10开始，全 CORS 支持加入的 XMLHTT prequest ，并能很好地工作在一个正确的访问控制 - 允许 - 产地头属性来自服务器的响应（即希望设定在浏览器上的cookie）。

IE 10+

Starting with IE10, full CORS support was added to XMLHTTPRequest and it should work fine with a correct Access-Control-Allow-Origin header property on the response from the server (that wishes to set the cookie on the browser).

更多关于这家在这里：
<一href="http://blogs.msdn.com/b/ie/archive/2012/02/09/cors-for-xhr-in-ie10.aspx">http://blogs.msdn.com/b/ie/archive/2012/02/09/cors-for-xhr-in-ie10.aspx
在这里：
<一href="http://www.html5rocks.com/en/tutorials/cors/">http://www.html5rocks.com/en/tutorials/cors/

More about this here:
http://blogs.msdn.com/b/ie/archive/2012/02/09/cors-for-xhr-in-ie10.aspx
And here:
http://www.html5rocks.com/en/tutorials/cors/

唯一的办法去解决这个IE8的/ 9，引用相同的<一个href="http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx">MSDN帖子如上：

The only way to go around this on IE8/9 is, quoting the same MSDN post as above:

该网站希望执行用户的身份验证跨域   要求能使用明确的方法（例如令牌在POST体或   URL）即可通过该认证，而不用担心信息   用户的环境权限。

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.

这篇关于IE8 - IE10跨域JSONP饼干头痛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！