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?

**[This Link](http://stackoverflow.com/questions/3340797/can-an-ajax-response-set-a-cookie)** might be helpful.. :) — Guruprasad J Rao, Apr 23 '15 at 03:59
What are you using to intercept requests in the first place? — Xan, Apr 23 '15 at 07:02
@Xan, In the Chrome developer tools there is a `chrome.devtools.network.onRequestFinished` event that fires when a request completes and has the content of the request. — Abe Miessler, Apr 23 '15 at 14:39
There are two types of cookies, one the javascript engine has access to and the other type it does not. In a complete http request both types are sent. I am sure you will need to use something else other than jquery to perform your task. — Marko, Apr 29 '15 at 21:43
Interesting - can it be done in pure javascript? Or are you thinking that neither jQuery or pure javascript are capable? — Abe Miessler, Apr 29 '15 at 21:45
I think you can use https://developer.chrome.com/extensions/cookies to get access to all the cookies and maybe inject them into the page so you can add them to the jquery request. — Marko, Apr 29 '15 at 21:49
That's an interesting idea. I think it might be a problem that the request is fired from js in the extension rather than from the page itself (though it does get the original request from when the page is submitted). — Abe Miessler, Apr 29 '15 at 21:52
quick question, are your AJAX calls going to the same domain as the script that is making the request? — Mike Hamilton, May 06 '15 at 17:50
@MichaelHamilton - i'm actually not sure since I'm sending the request from a chrome extension. The request originates and is sent to the same domain, but the actual javascript that sends the request is in the chrome extension. — Abe Miessler, May 06 '15 at 17:53
@AbeMiessler, Thanks for the clarification. I believe that will still be considered cross domain then... — Mike Hamilton, May 06 '15 at 17:55

Xan · Accepted Answer · 2015-05-06T18:33:07.010

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.

score 1 · Answer 2 · edited May 23 '17 at 12:23

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)

Possible to modify cookie values in a jQuery ajax request?

2 Answers2

Linked