Cookie Analysis Tool

Table of contents

• Cookie Analysis Tool
  • Table of contents
  • Problem Description
  • Purpose
  • Audience
  • Future Improvements
  • Documentation
    • Sketches
    • Development modules
    • Whitebox view
    • Architecture Decision Records (ADRs)
    • Glossary
  • Development
    • Running the project
  • Cloudfest Hackathon
    • Wacky Hackathon things:

Problem Description

Private browsing on the internet is a concern of users [1]. To address this concern, browser providers continuously try to provide features that supplement anonymous browsing [2]. One of that features is blocking 3rd party cookies to stop cross-side tracking. This increases privacy, but also affects the functionality of currently existing websites as a lot of embedded elements on a website, such as iframes, are heavily using 3rd party cookies.

By mid 2024, all 3rd party cookies will be blocked in most browsers, including Google Chrome [3] (e.g. Safari is blocking 3rd party cookies already; state: 2023-03-19). Google Chrome is with a market share of 79.7% the most widely adopted browser in February 2023 [4]. Due to that, the upcoming change will have a significant impact on the browsing experience, and internet marketing industries if not addressed in time.

Purpose

With this project, we want to create awareness for the upcoming changes caused by the blocking of 3rd party cookies in commonly used web browsers, such as Google Chrome. In detail, we want to provide a tool that allows technical and non-technical stakeholders to analyze a website and get clear answers regarding:

1. Is the website affected by the blocking of 3rd party cookies?
2. What 3rd party cookies is the website using?
3. How would the website look like if 3rd party cookies are blocked?
4. (What is the origin of 3rd party cookies used on the website?)

Audience

This project is addressed to technical and none-technical stakeholders that use or consume 3rd party cookies on a website in their work context.

Future Improvements

• TBD

Documentation

Sketches

Development modules

First sketch of the approach of cutting the project into modules.

Whitebox view

Architecture Decision Records (ADRs)

Find the ADRs here.

Glossary

Find the glossary here.

Development

Running the project

# Install the dependencies
npm i
# Build react app and watch changes in the extension folder
npm run watch

Afterwards add the build folder in your chrome extensions (after enabling developer mode).

Cloudfest Hackathon

This Extension was developed during the Cloudfest Hackathon 2023 by @Stefan0x, @airsplitter, @genesfa, @janvogt, @andreylipattsev, @benjaminburkhardt, @mehdi-bh, @YoZe24,@KathiBoguth, @johannhof, @tharsheblows, @LorenFiorini, @bibatwork, @Max-eMundo

Wacky Hackathon things:

• In order to have the storage/cookies.ts available in the react-app we need to copy it in the prebuild of the react package.json.