Determining origin of cookie which javascript or tracking pixel

Question

I need to be able to determine and identify the source of cookies. While many cookies will come to the browser in the HTTP response of the original page, others are added to the browser via javascript or via assets being loaded on the page using http (such as tracking pixels or AJAX calls).

What is a good way to determine/identify the source of each cookie?

Chassis

How? You want to do this via browser add-on? Packet sniffer? Much more information is needed about why you need this data if we are to be able to suggest a good hack to go about getting it. Is this for your site? Other sites? – Cylindrical

Our own corporate website. However, there's over a dozen teams working on it and the subdomains as well as a lot of third-party plugins being used. We have run into a situation where the cookie is growing to be over 8k and need to identify what is coming from where so we can initiate a cookie diet. A packet sniffer wouldn't tell you the javascript initiated cookies. If there's a browser add-on that would monitor when a cookie is set, that'd be awesome. :) – Chassis

That's my point... if you look at network created cookies, you know which ones are left over, created from JavaScript. That doesn't really apply to your situation though. You should add that information to your question, as that really clarifies what is going on. – Cylindrical

Ok, for network related cookies, I don't seem to be able to find anything that'll tell me out of all the hundreds of network requests per one page load actually sets a cookie. I'd have to open the response of each and every one hundred plus network calls on each of over 1000 pages. That's a of manual work, just to find out that some cookies were set by javascript. Then scour thru hundreds of javascript files to find which cookies were set. – Chassis

I've been tasked with identifying exactly which cookies are set by which javascript file. And which cookies are set by traffic pixel image calls. Currently I've identified 64 unique cookie names and then will need to identify which lines of code are making them or which tracking pixels called them. – Chassis

there are some extensions that will do this on your workstation. if you want to get crazy, you COULD overload document.cookie to log the assignment before actually setting on the hidden alias. with more jank like thrown exceptions for the filename and arguments.callee.caller.name, you can get a pretty good idea of where the set was initiated. i haven't tried this for cookies, but ive used it to debug other native "APIs". aside: are cookies an api? why isn't there a nice cookie api yet? – Tyner

Answer 1

Posting this as I was struggling with this question as well and finally found a solution.

This works in the Firefox console only as far as I can tell...

1. Set a breakpoint on the very first line of javascript that you know runs on your page after a refresh (before any cookie is set).
2. Then clear your cache and cookies.
3. Paste the below code snippet into your console in Firefox.
4. Remove the breakpoint and resume script execution.

You should see the stack trace for each cookie being created in the console!

origDescriptor = Object.getOwnPropertyDescriptor(HTMLDocument.prototype, 'cookie'); // add cookie property to HTMLDocument constructor

Object.defineProperty(document, 'cookie', {
    get() {
        return origDescriptor.get.call(this);
    },

    set(value) {
        console.log("%c Cookie is :" + value, "background: #ffffff; color: #000000");
        console.trace();
        // debugger;
        return origDescriptor.set.call(this, value);
    },

    enumerable: true,
    configurable: true
});

I have to give credit to fflorent for this code he posted in another topic - thanks!

Nadabb

This is the another topic: stackoverflow.com/questions/41245885 as stated there, irrelevant to chrome, for chrome, paste this in console: function debugAccess(obj, prop, debugGet){ var origValue = obj[prop]; Object.defineProperty(obj, prop, { get: function () { if ( debugGet ) debugger; return origValue; }, set: function(val) { debugger; return origValue = val; } }); }; debugAccess(document, 'cookie'); – Lebel

Answer 2

Code to paste on Chrome console, based on this: Breaking JavaScript execution always when cookie is set

function debugAccess(obj, prop, debugGet){
        var origValue = obj[prop];
        Object.defineProperty(obj, prop, {
            get: function () {
                if ( debugGet )
                    debugger;
                return origValue;
            },
            set: function(val) {
                debugger;
                return origValue = val;
            }
        });
    };
    debugAccess(document, 'cookie');

Lebel

Answer 3

Open up the development console in the browser and save a reference to the native document.cookie getter/setter. After this, override the document.cookie getter/setter with your own function, where you can include a console.log('creating cookie: ' + value), then call the native getter/setter within that function. See the following link for a code example: Cookie Monster

Cummins