Documentation

Thank you so much for your interest in Ariadne!

Ariadne is a browser extension that helps you become aware of deceptive patterns in cookie banners on the Web. It does this through a set of specifically-trained machine learning models that detect deceptive design patterns within the language and the design of cookie banners.

Ariadne (v.0.1.2) is part of an ongoing research project on the automated detection of deceptive design in cookie banners.

For Users

Installation

At the time of writing, users can install Ariadne on Google Chrome and other Chromium-based browser. Ariadne can be installed directly onto the browser from the Chrome Web Store. Just click the Chrome Web Store badge below.

Usage

Upon installation, the browser extension displays information upon clicking the icon on the top bar of the browser or from the dropdown selection of browser extensions. For ease of accessibility, you can pin this onto the browser so that the icon appears next to your URL bar.

Ariadne's icon has an indicator that flags whether or not deceptive patterns are detected in the website currently opened.

Ariadne's icon looks like this when deceptive patterns are not detected.

Ariadne's icon looks like this when deceptive patterns are detected.

The console displays a wealth of information. Most importantly, it flags whether or not deceptive patterns were detected on the page. If detected, the browser extension has a purple banner at the top of the console, indicating that the cookie banner on the page may be making use of unclear language, weighted options, or both.

Ariadne's banner looks like this when deceptive design is not detected.

Ariadne's banner looks like this when deceptive design is detected.

Reporting Feature

You can also view whether the website you're on has been previously reported by other users for having used deceptive design.

You can submit your own report by clicking the report button at the bottom or pressing the thumbs up or thumbs down at the banner. These reports can be viewed on Ariadne's dashboard, Olympus.

At the banner, you can confirm or correct Ariadne's readings by clicking the thumbs up or thumbs down button.

At the bottom, you can click the "Report deceptive design on this page" button to report deceptive patterns in the website you currently have opened.

For User-Developers

Installation

The latest builds of Ariadne are published on the Releases page.

Firefox

• Download the ariadne-mv2 ZIP file.
• Go to about:debugging#/runtime/this-firefox in Firefox.
• Click on Load Temporary Add-on... and select the ZIP file.

Google Chrome, Chromium

You can install it the browser extension manually:

• Download the ariadne-mv3 ZIP file.
• Go to chrome://extensions in Chrome.
• Enable Developer mode in the top right corner.
• Drag and drop the ZIP file into the browser window.

The process should be similar for other Chromium-based browsers (Edge, Opera, Brave, etc.), just make sure to enable the developer mode in the extensions page before installing the extension.

Ariadne should now be installed. You can now visit any website and click on the extension icon to see stats for the current page.

For Developers

Ariadne

Ariadne is compliant with Manifest V3, the new extension API for Google Chrome and Chromium-based browsers. It is also compatible with Firefox, for which it uses the older Manifest V2 API, since the V3 API is not yet fully supported as of the time of writing.

Prerequisites

You will need Node.js (v16 or higher). We recommend installing the latest LTS version.

Install the dependencies:

npm install
        

Building

To build the extension in development mode, run:

# Firefox
        npm run dev
        # Chrome
        npm run dev:v3
        

Vite will automatically rebuild the extension when you make changes to the source code. You will need to reload the extension in your browser to see the changes.

In development mode, the extension will attempt to contact Dionysus at http://localhost:5000 for the data. Make sure to run Dionysus locally before running the extension in this mode. You can change this by setting the VITE_API_URL environment variable in the .env.development file.

To build the extension in production mode, run:

# Firefox
        npm run build
        # Chrome
        npm run build:v3
        

In production mode, the extension will attempt to contact Dionysus at https://ariadne.dantis.me. You can change this by setting the VITE_API_URL environment variable in the .env.production file.

Installing

The built extension files will be stored in dist/ for Firefox and dist-v3/ for Chrome. You can load the extension in your browser by following the instructions in the Installation section, but instead of loading the ZIP file,

• load the manifest.json file in dist/ for Firefox, or
• click Load unpacked and select the dist-v3/ directory for Chrome.

Calliope

📜 Calliope is the language clarity model for Ariadne.

Janus is a Naive-Bayes classifier that is meant to process the text from a cookie banner and classify it into the following classes:

1. GOOD indicating that the language used in the extract is likely to be clear, descriptive, and provides options to provide or deny cookie consent
2. BAD indicating that the language used in the extract is likely to be confusing, vague, and assuming that cookie consent will be provided

This classifier allows Ariadne to determine whether a website uses deceptive design in the form of unclear language on its cookie banner.

Janus

⚖️ Janus is the option weight model for Ariadne.

Janus is an image classifier based on the VGG-19 model that classifies images into the following classes:

1. absent indicating that the option to refuse cookies is not on the interface at all
2. weighted indicating that the option to refuse cookies is made less obvious, less visible, or more tedious to select than the option to accept it
3. even indicating that the options to accept and refuse cookies appear on the cookie banner and are equally obvious.

This classifier allows Ariadne to determine whether a website uses deceptive design in the form of weighted options on its cookie banner.

Dionysus

📚 Dionysus is the backend for the Ariadne project. It is made up of three parts:

1. An instance of the Calliope model, which classifies cookie banner text as ‘good’ (i.e., clear enough, likely not deceptive) or ‘bad’ (i.e., intent is not clear, likely deceptive).
2. An instance of the Janus model, which classifies options or checkboxes in a cookie banner screencapture as ‘absent’ (no options detected), ‘even’ (evenly-weighted options detected), or ‘weighted’ (unevenly-weighted options detected).
3. A connection to a PostgreSQL database that stores user-generated reports of deceptive design in webpages, along with a REST API that allows for report management and model usage.

Olympus

🌋 Olympus is the web-based dashboard for the Ariadne project. It works with Dionysus to display summary statistics of all the user-submitted reports of deceptive design, along with a preview of the most recent reports. It is powered by Nuxt v3 and Tailwind CSS.

Olympus also makes use of the Auth0 SDK, which allows for login functionality. At the moment Olympus does not include functionality that necessitates login, but in the future this could allow administrators to delete reports on user request, allow registered users to verify, dispute, and comment on reports, etc., although this is not currently planned and is beyond the current scope of the Ariadne research project.

About Ariadne

Ariadne (v.0.1.2) is part of an ongoing research project on the automated detection of deceptive design in cookie banners. This research project is conducted in fulfillment of the requirements for CS 199 in the academic year 2022-2023 under the Web Science Group.

The Team

Ariadne's developers are Juris Adorna and Jared Dantis who are computer science undergraduate students from the University of the Philippines - Diliman.

Feel free to reach out to the team through ariadne@dantis.me for any feedback, queries, or concerns regarding Ariadne.

Licensing

This browser extension is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, at version 3 of the License here.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

Except where noted, the work, content, and related documentation created by the developers of Ariadne are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

          @misc{Ariadne2023,
            author = {Adorna, J.H. and Dantis, A.J.},
            title = {Ariadne v 0.1.2},
            year = {2023},
            publisher = {GitHub},
            journal = {GitHub repository},
            howpublished = {\url{https://github.com/wsg-ariadne/}}
          }