Possible to modify cookie values in a jQuery ajax request?

Question

I am working on a Chrome extension that would allow users to record all HTTP requests for a site, modify pieces of the request and then resend it.

I'm hoping to use jQuery's ajax method to construct and send the modified request. I have been able to construct the other parts of the request, but as far as I can tell there is no way to include cookie values in the request.

Just to be clear - I'm not trying to create a cookie on the browser, I'm trying to modify the cookie value that will be sent along as part of the HTTP request using jQuery's ajax method.

Can this be done with jQuery's ajax? If not, is there anyway to do it in javascript?

Answer 1

Since you're talking about a Chrome extension, you can employ webRequest API to intercept and modify your requests.

chrome.webRequest.onBeforeSendHeaders.addListener(
  function(details) {
    /* Identify somehow that it's a request initiated by you */

    for (var i = 0; i < details.requestHeaders.length; i++) {
      if (details.requestHeaders[i].name === 'Cookie') {
        /* Do something with it */
        break;
      }
    }

    /* Add the Cookie header if it was not found */

    return {requestHeaders: details.requestHeaders};
  },
  {urls: ["*://*.example.com/*"]}, 
  ["blocking", "requestHeaders"]
);

This way you should be able to modify the cookies without actually modifying the browser's cookie store. I said "should" because I have not tested this solution.

Some important points:

• You will need permissions: "webRequest", "webRequestBlocking" and host permissions (for this example, "*://*.example.com/")
• There's a caveat that you can't intercept your own synchronous requests, as a precaution against deadlocks. As long as your AJAX is asynchronous, it should not matter.
• If you need to prevent Set-Cookie from the response from reaching the cookie store, you can do so by modifying the response headers in onHeadersReceived. You can use the request ID to find the corresponding response.

Answer 2

It's not going to be possible to do this everywhere using jQuery.ajax().

XMLHttpRequest doesn't allow you to modify the Cookie header (see spec), and jQuery.ajax uses XMLHttpRequest under the hood.

And using XMLHttpRequest directly in javascript has the same issue, so no help there.

You can add cookies to the current document and tell jQuery to tell the XHR to send cookies cross-domain with xhrFields: { withCredentials: true }, but the target site also has to have the corresponding CORS setup, which it sounds like doesn't match your use-case.

If you want to try it out, some resources:

Sending credentials with cross-domain posts?

http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings (look for xhrFields)