title: IE8 - IE10 cross domain JSONP cookie headache
body: <p>Due to decisions that are completely outside of my control, I am in the following situation:</p>
  
  <ul>
  <li><p>I have a product listing on catalog.org</p></li>
  <li><p>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, <em>sets a cookie with the cart ID</em>, and returns a true response (or false if it failed)</p></li>
  <li><p>Back on catalog.org, if the response is true, another AJAX JSONP request is made to secure.com/cart/info, <em>which reads the cart ID cookie</em>, fetches the record, and returns the number of items in the cart</p></li>
  <li><p>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)</p></li>
  <li><p>At this point, clicking the "Go to Cart" button on catalog.org displays the cart summary on secure.com</p></li>
  </ul>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>P3P: CP="CAO PSA OUR"
  </code></pre>
  
  <p>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?</p>
  
  <p><strong>Solution</strong></p>
  
  <p>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:</p>
  
  <blockquote>
    <ul>
    <li>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, <em>sets a cookie with the cart ID</em>, and returns a
    true response (or false if it failed)</li>
    </ul>
  </blockquote>
  
  <p>We changed the action at secure.com/product/add to return a JSON object with a boolean indicating success or failure <em>and</em> the cart ID.</p>
  
  <blockquote>
    <ul>
    <li>Back on catalog.org, if the response is true, another AJAX JSONP
    request is made to secure.com/cart/info, <em>which reads the cart ID
    cookie</em>, fetches the record, and returns the number of items in the
    cart</li>
    </ul>
  </blockquote>
  
  <p>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 <code>src</code> 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.</p>
  
  <p>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 <em>no way</em> of knowing when the iframe has finished loading on catalog.org due to browser security restrictions.</p>
  
  <p>Finally, the P3P header <code>CP="CAO PSA OUR"</code> is still required for this to work in IE7 - IE10. (Yes, this works in IE7 now too :)</p>
  
  <p>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.</p>
  
  <p>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).</p>