Set-Cookie seems to get corrupted when working with iframe

Question

We are facing a weird issue with cookies. The server returns the below from a endpoint like https://product.example.com/rest/v1/stuff

Set-Cookie: id=c50b72c0-0b3a-11e7-b356-002590812948;Version=1;Comment="ID";Domain=.example.com;Path=/;HttpOnly

Once that is done, we create a iframe and all requests in the iframe are expected to send the cookie. When the browser makes the next request (iframe ref), one of a few things happens

1. no cookie gets sent
2. cookie gets sent as id=9b639ea0-e800-11e6-b3ee-002590812948
3. cookie gets sent as id=9b639ea0-e800-11e6-b3ee-002590812948; id=c50b72c0-0b3a-11e7-b356-002590812948
4. cookie gets sent as id=c50b72c0-0b3a-11e7-b356-002590812948

If the first request does use the correct cookie, the next set may vary and do different things (about 50 HTTP calls after loading page, each doing one of the 4 listed states)

We see that it happens in Chrome, Safari, and Firefox.

Debugging:

This may be a application problem, but we have yet to find a way to debug what is setting the cookie. Is there any browser were we can get notified for any change to cookie state (from http or js)?

Javascript:

We use react 14, here is the code in question

Make network request

getUri(id)
  .then((uri) => {
    self.dispatch(uri.uri);
  })
  .catch((errorMessage) => {
     self.actions.idFailures(errorMessage)
  })

Here is getUri

getUri(id) {
return new Promise(function(resolve, reject) {
  let url = 'rest/stuff/' + id;
  request
    .get(url)
    .set('Accept', 'application/json')
    .end(function(err, result){
      if(err || !result){
        reject(Error(err.response.text));
      }
      else {
        resolve(JSON.parse(result.text));
      }
    });
});

},

Set iframe

if(this.state.uri) {
  instance = <iframe src={this.state.uri} style={iFrameStyle}> </iframe>;
}

Answer 1

Is there any browser were we can get notified for any change to cookie state?

You can write a timer to check cookie state periodically and print useful information in console when cookie state changes. Check can i be notified of cookie changes in client side javascript for example code. The following code would work:

var lastCookie = document.cookie;
var checkCookie = function() {
  var currentCookie = document.cookie;
  if (currentCookie != lastCookie) {
    console.log('cookie changed!');
    console.log('old cookie:');
    console.log(lastCookie);
    console.log('new cookie:');
    console.log(currentCookie);
    lastCookie = currentCookie;
  }
};

window.setInterval(checkCookie, 1000);

However, the cookie change can only be detected after the code execution, which means the Set-Cookie of HTML file response may be missed.

In your code, multiple cookie values are set using one Set-Cookie response header, which is not recommended. Check Is it possible to set more than one cookie with a single Set-Cookie? for previous discussion.