![\"Documentation\"](\"https://img.shields.io/badge/Docs-supercookie.me-blue\"){kind=icon}
\r\n ![\"Website](\"https://img.shields.io/website?down_message=down&up_color=green&up_message=online&url=https%3A%2F%2Fsupercookie.me\")
\r\n ![\"License\"](\"https://img.shields.io/github/license/jonasstrehle/supercookie\")
\r\n ![\"Fingerprint](\"https://img.shields.io/badge/dynamic/json?label=Fingerprints&query=index&url=https://supercookie.me/api&color=yellow\"){kind=icon}
\r\n ![\"N](\"https://img.shields.io/badge/dynamic/json?label=Current%20redirects&query=bits&url=https://supercookie.me/api&color=yellow\"){kind=icon}
\r\n ![](\"https://www.docker.com/wp-content/uploads/2022/03/vertical-logo-monochromatic.png\"){kind=logo}
[Docker daemon](https://docs.docker.com/get-docker/)\r\n\r\n1. Clone repository\r\n```bash\r\ngit clone https://github.com/jonasstrehle/supercookie\r\n```\r\n\r\n2. Update .env file in [supercookie/server/.env](https://github.com/jonasstrehle/supercookie/blob/main/server/.env)\r\n```env\r\nHOST_MAIN=yourdomain.com #or localhost:10080\r\nPORT_MAIN=10080\r\n\r\nHOST_DEMO=demo.yourdomain.com #or localhost:10081\r\nPORT_DEMO=10081\r\n```\r\n\r\n3. Run container\r\n```bash\r\ncd supercookie/server\r\ndocker-compose up\r\n```\r\n\r\n-> Webserver will be running at https://yourdomain.com\r\n\r\n\r\n\r\n### 🤖 Local machine\r\n**requirements**: \r\n![](\"https://seeklogo.com/images/N/nodejs-logo-FBE122E377-seeklogo.com.png\"){kind=logo}
[Node.js](https://nodejs.org/)\r\n\r\n1. Clone repository\r\n```bash\r\ngit clone https://github.com/jonasstrehle/supercookie\r\n```\r\n\r\n2. Update .env file in [supercookie/server/.env](https://github.com/jonasstrehle/supercookie/blob/main/server/.env)\r\n```env\r\nHOST_MAIN=localhost:10080\r\nPORT_MAIN=10080\r\n\r\nHOST_DEMO=localhost:10081\r\nPORT_DEMO=10081\r\n```\r\n\r\n3. Run service\r\n```bash\r\ncd supercookie/server\r\nnode --experimental-json-modules main.js\r\n```\r\n\r\n-> Webserver will be running at http://localhost:10080\r\n\r\n\r\n## Workwise of [supercookie](https://supercookie.me/workwise)\r\n\r\n\r\n### [📖 Background](https://supercookie.me/workwise#content-background)\r\n\r\nModern browsers offer a wide range of features to improve and simplify the user experience.\r\nOne of these features are the so-called favicons: A favicon is a small (usually 16×16 or 32×32 pixels) logo used by web browsers to brand a website in a recognizable way. Favicons are usually shown by most browsers in the address bar and next to the page's name in a list of bookmarks.\r\n\r\nTo serve a favicon on their website, a developer has to include an attribute in the webpage’s header. If this tag does exist, the browser requests the icon from the predefined source and if the server response contains an valid icon file that can be properly rendered this icon is displayed by the browser. In any other case, a blank favicon is shown.\r\n\r\n```html\r\n\r\n```\r\n\r\nThe favicons must be made very easily accessible by the browser. Therefore, they are cached in a separate local database on the system, called the favicon cache (F-Cache). A F-Cache data entries includes the visited URL (subdomain, domain, route, URL paramter), the favicon ID and the time to live (TTL).\r\nWhile this provides web developers the ability to delineate parts of their website using a wide variety of icons for individual routes and subdomains, it also leads to a possible tracking scenario.\r\n\r\nWhen a user visits a website, the browser checks if a favicon is needed by looking up the source of the shortcut icon link reference of the requested webpage.\r\nThe browser initialy checks the local F-cache for an entry containing the URL of the active website. If a favicon entry exists, the icon will be loaded from the cache and then displayed. However, if there is no entry, for example because no favicon has ever been loaded under this particular domain, or the data in the cache is out of date, the browser makes a GET request to the server to load the site's favicon.\r\n\r\n\r\n### [💣 Threat Model](https://supercookie.me/workwise#content-threat-model)\r\n\r\nIn the article a possible threat model is explained that allows to assign a unique identifier to each browser in order to draw conclusions about the user and to be able to identify this user even in case of applied anti-fingerprint measures, such as the use of a VPN, deletion of cookies, deletion of the browser cache or manipulation of the client header information.\r\n\r\nA web server can draw conclusions about whether a browser has already loaded a favicon or not:\r\nSo when the browser requests a web page, if the favicon is not in the local F-cache, another request for the favicon is made. If the icon already exists in the F-Cache, no further request is sent.\r\nBy combining the state of delivered and not delivered favicons for specific URL paths for a browser, a unique pattern (identification number) can be assigned to the client.\r\nWhen the website is reloaded, the web server can reconstruct the identification number with the network requests sent by the client for the missing favicons and thus identify the browser.\r\n\r\n\r\n\r\n\r\n![\"Supercookie](\"https://supercookie.me/assets/header.png\")
\r\n ![](\"/assets/404.png\")
\n ![](\"/assets/header.png\")
\n \n \n \n \n Workwise • supercookie \n
\n \n📚 Please have a look at this elaboration from University of Illinois:\n www.cs.uic.edu\n
\n\n \n \n \n \n Introduction\n
\n \n\n\n\n \n Browsers are the most widespread access medium that makes it incredibly easy for us humans to connect to the Word Wide Web.\n Data is the new gold!
\n
\n
\n Due to the constant development of the Internet, such as the continuous elaboration of new standards and features, the introduction of powerful APIs and further interfaces on the browser side, the possibilities for collecting and analyzing data have also significantly expanded over the last few decades!\n
\n
\n First and foremost, there is nothing wrong with collecting data at all. All of us collect data, whether unconsciously in private everyday life or completely consciously in school or at work - collecting data, interpreting it and drawing conclusions is actually incredibly important!\n
\n
\n With the launch of the WWW for the public and the development of the first online services, data collection also started to become interesting for the various website providers, according to the motto if I own a website, I also want to know who is surfing it.\n
\n However, in most cases we as consumers only want to disclose as little as possible and only the data necessary for the intended service - in fact, my private data is no one else's business.\n
\n
\n The above-mentioned further development of the WWW's capabilities has allowed data to be assigned to individual profiles, enabling the recognition of unique users and the ability to trace their browsing activities even across different pages - the so called device fingerprinting.\n
\n Some known methods for assigning a unique fingerprint to browsers are hardware benchmarking, fingerprinting via Canvas and WebGL or analysis of active browser extensions. \n
This article is about a less known way to achieve something similar!\n
\n \n
\n \n \n \n Background\n
\n\n\n Modern browsers offer a wide range of features to improve and simplify the user experience.\n One of these features are the so-called favicons: A favicon is a small (usually 16×16 or 32×32 pixels) logo used by web browsers to brand a website in a recognizable way. \n Favicons are usually shown by most browsers in the address bar and next to the page's name in a list of bookmarks.\n\n
\n To serve a favicon on their website, a developer has to include an <link rel> attribute in the webpage’s header.\n If this tag does exist, the browser requests the icon from the predefined source and if the server response contains an valid icon file that can be properly rendered this icon is displayed by the browser. In any other case, a blank favicon is shown.\n
\n
\n
\n\n The favicons must be made very easily accessible by the browser. Therefore, they are cached in a separate local database on the system, called the favicon cache (F-Cache).\n A F-Cache data entries includes the visited URL (subdomain, domain, route, URL paramter), the favicon ID and the time to live (TTL). \n <link rel=\"icon\" href=\"/favicon.ico\" type=\"image/x-icon\">\n
While this provides web developers the ability to delineate parts of their website using a wide variety of icons for individual routes and subdomains, it also leads to a possible tracking scenario.\n
\n
\n When a user visits a website, the browser checks if a favicon is needed by looking up the source of the shortcut icon link reference of the requested webpage.
\n The browser initialy checks the local F-cache for an entry containing the URL of the active website. If a favicon entry exists, the icon will be loaded from the cache and then displayed. \n However, if there is no entry, for example because no favicon has ever been loaded under this particular domain, or the data in the cache is out of date, the browser makes a GET request to the server to load the site's favicon.\n
\n \n
\n \n \n \n Threat Model\n
\n In the article a possible threat model is explained that allows to assign a unique identifier to each browser in order to draw conclusions about the user and to be able to identify this user even in case of applied anti-fingerprint measures, such as the use of a VPN, deletion of cookies, deletion of the browser cache or manipulation of the client header information.\n\n A web server can draw conclusions about whether a browser has already loaded a favicon or not:
\n So when the browser requests a web page, if the favicon is not in the local F-cache, another request for the favicon is made. If the icon already exists in the F-Cache, no further request is sent.
\n By combining the state of delivered and not delivered favicons for specific URL paths for a browser, a unique pattern (identification number) can be assigned to the client.\n
When the website is reloaded, the web server can reconstruct the identification number with the network requests sent by the client for the missing favicons and thus identify the browser.\n
\n
\n
\n\n
- \n
- \n Write identification\n
\n The goal of the write operation is to generate a unique identifier and store it on the client side.
\n First step is to create a new N-bit ID on the server and translate it to a path vector as shown below.
\n Example:\n\n\nconst N = 4;
\n
const ROUTES = [\"/a\", \"/b\", \"/c\", \"/d\"];
const ID = generateNewID(); // -> 1010 • (select unassigned decimal number, here ten: 10 -> 1010b in binary)\n\n \n Second step is to store the actual data inside the browser:const vector = generateVectorFromID(ID); // -> [\"/a\", \"/c\"] • (because [a, b, c, d] where [1, 0, 1, 0] is 1 -> a, c)
\n
\n The user will be redirected along all of the website paths, starting at /a, navigating to /b, to /c and finally to /d.\n
\n- \n
- /a \n
- /b \n
- /c \n
- /d \n
\n \n While the user is redirected on every load the browser requests a favicon for the respective route, going the same way like/a/favicon.ico, to /b/favicon.ico, to /c/favicon.ico and finally to /d/favicon.ico.\n
\n- \n
- /a/favicon.ico \n
- /b/favicon.ico \n
- /c/favicon.ico \n
- /d/favicon.ico \n
\n\n The webserver will now only process those favicon requests whose path is present in the previously created path vector. If the route is present the webserver answers with the favicon file and Status 200 OK.
\n If the requested route is not in the path vector, the webserver aborts the request with an Error 404 Not Found, or sends no response.
\n Since the browser - as described earlier - only stores the delivered favicons in the F-Cache, we have now stored our unique identification number and the writing process is complete.
\n In the above example, the webserver only responds to requests for the favicons under paths /a/favicon.ico and /c/favicon.ico. The F-Cache only has favicons-entries for these two paths.
\n\n\n \n![](\"/assets/diagram-write.svg\")
\n \n\n
\n \n \n - \n Read identification\n
\n Here the goal is to re-identify a returning user based on his existing F-Cache entries.
\n In read mode the server always responds to favicon requests with an Error 404 Not Found status, but responds normally to all other requests. \n This preserves the integrity of the cached favicons during the read operation, since no new F-cache entry is created by the browser.
\n To reconstruct a visitor's identifier, the browser must be routed through all available routes. The server records which favions are requested by the browser (those that are not present in the browsers F-cache) and which are not.\n
\n
\n Example:\n\n\n The server can thus reconstruct the identification from the missing favicon requests and the reading process is complete.\nconst visitedRoutes = [];
\n
Webserver.onvisit = (route) => visitedRoutes.push(route); // -> [\"/b\", \"/d\"]
Webserver.ondone = () => { const ID = getIDFromVector(visitedRoutes) }; // -> 10 • (because \"/a\" and \"/b\" are missing -> 1010b)
\n \n\n \n![](\"/assets/diagram-read.svg\")
\n \n
\n \n
![](\"/assets/diagram-write.png\")
\n \n
\n
![](\"/assets/diagram-read.png\")
\n \n \n \n \n Target\n
\n\n It looks like all top browsers are vulnerable to this attack scenario.Mobile browsers are also affected.
\n
Browser | \n Windows | \n MacOS | \n Linux | \n iOS | \n Android | \n Info | \n
|---|---|---|---|---|---|---|
| Chrome (v 87.0) | \n✅ | \n✅ | \n✅ | \n✅ | \n✅ | \n- | \n
| Safari (v 14.0) | \n- | \n✅ | \n- | \n✅ | \n- | \n- | \n
| Edge (v 87.0) | \n✅ | \n✅ | \n❌ | \n❌ | \n✅ | \n- | \n
| Firefox (v 85.0) | \n✅ | \n✅ | \n❌ | \n❌ | \n❌ | \nFingerprint different in incognito mode | \n
| Brave (v 1.19.92) | \n❌ | \n❌ | \n❌ | \n❔ | \n❌ | \n- | \n
Browser | \n Windows | \n MacOS | \n Linux | \n iOS | \n Android | \n Info | \n
|---|---|---|---|---|---|---|
| Brave (v 1.14.0) | \n✅ | \n✅ | \n✅ | \n✅ | \n✅ | \n- | \n
| Firefox (< v 84.0) | \n✅ | \n✅ | \n❔ | \n❌ | \n✅ | \n- | \n
\n\n The demonstration also impressively shows that applying anti-tracking software, adblockers, VPN or surfing in incognito mode does not offer any significant improvement and the browser remains vulnerable to the tracking even with these measures:
\n
| Browser | \nIncognito / Private mode | \nClear Website Data | \nVPN | \nAdblock / Anti-Tracking | \n
|---|---|---|---|---|
| Chrome | \n✅ | \n✅ | \n✅ | \n✅ | \n
| Safari | \n✅ | \n✅ | \n✅ | \n✅ | \n
| Edge | \n✅ | \n✅ | \n✅ | \n✅ | \n
| Firefox | \n✅ | \n✅ | \n✅ | \n✅ | \n
\n \n \n \n Scalability & Performance\n
\n\n By varying the number of bits that corresponds to the number of redirects to subpaths, this attack can be scaled almost arbitrarily.\n It can distinguish 2^N unique users, where N is the number of redirects on the client side.
\n \n
\n\n Since each subpath redirection increases the duration of the identification, the performance of the attack the webserver can dynamically increase the number of redirects. This is done trivially by appending a new subpath in the sequence of subpaths.\n
The calculation of the number of redirects (N) is done by the operation: \"floor(log2(id))+1\", where id corresponds to the decimal identification number.\n
\n For example, if the server changes from 3-bit identifiers to 4-bit identifiers, the subpath vector will change from [\"/a\", \"/b\", \"/c\"] to [\"/a\", \"/b\", \"/c\", \"/d\"] and\n the identifier of a client (here dec. 6) changes from \"011\" to \"0110\" without changing the actual value of already written F-Cache identifiers. \n
This leads to the fact that only the minimum number of redirections is necessary for the attack.\n\n \n
![](\"/assets/diagram-scalability.png\")
\n \n\n \n
\n \n \n The time taken for the read and write operation increases as the number of distinguishable clients and redirects does.
\n The following measured times prove to be the minimum time required for this attack to work. The actual time required in practice depends on many more factors, such as Internet speed, location, hardware setup and browser type.\n
\n
| Redirects (N bit) | \n distinguishable clients | \nwrite time | \nread time | \nscale information | \n
|---|---|---|---|---|
| 2 | \n4 | \n< 300ms | \n< 300ms | \nOne user with four browsers | \n
| 3 | \n8 | \n< 300ms | \n~ 300ms | \nAbout the amount of Kardashians | \n
| 4 | \n16 | \n< 1s | \n~ 1s | \nBunch of your neighbors | \n
| 8 | \n256 | \n< 1s | \n~ 1s | \nAll your facebook-friends | \n
| 10 | \n1024 | \n< 1.2s | \n~ 1s | \nReally small village | \n
| 20 | \n1,048,576 | \n< 1.8s | \n< 1.5s | \nSmall city (San Jose, California) | \n
| 24 | \n16,777,216 | \n< 2.4s | \n< 2s | \nWhole Netherlands | \n
| 32 | \n4,294,967,296 | \n~ 3s | \n< 3s | \nAll people with internet access | \n
| 34 | \n17,179,869,184 | \n~ 4s | \n~ 4s | \nAll people with internet access each using 4 different browsers | \n
\n \n \n \n Related work\n
\n\n- \n
- \n
cs.uic.edu:\n Study by Scientists at the University of Illinois, Chicago\n \n - \n heise.de:\n Browser-Fingerprinting: Favicons als \"Super-Cookies\"\n \n
\n