cavi-au/consent-o-maticBrowser-Erweiterung, die Cookie-Popups automatisch basierend auf Ihren Präferenzen ausfüllt
|
|
Die meisten Websites möchten heute Ihre Daten verarbeiten und bitten mit Cookie-Bannern um Ihre Einwilligung. Obwohl diese Banner Ihnen Kontrolle geben sollen, führen sie in der Praxis oft zu wiederholten und zeitaufwändigen Klicks – besonders wenn Ihr Browser Cookies beim Schließen löscht. Derselbe Banner erscheint erneut, und Sie treffen immer wieder dieselben Entscheidungen.
Consent-O-Matic ist eine Browsererweiterung, die dieses Problem lösen soll. Entwickelt vom Centre for Advanced Visualization and Interaction (CAVI) der Universität Aarhus, übernimmt das Tool automatisch die Bearbeitung von Einwilligungsbannern für Sie. Nachdem Sie Ihre Einstellungen während der Installation festgelegt haben, erkennt Consent-O-Matic viele gängige CMP-Banner (Consent Management Platform), wendet Ihre Entscheidungen an und bestätigt dies mit einem kleinen Häkchen neben dem Erweiterungssymbol.
Da Consent-O-Matic ein Open-Source-Projekt ist, kann jeder zu seiner Verbesserung beitragen, indem er neue Regeln hinzufügt, alte Regeln aktualisiert oder die Dokumentation erweitert. Dieser kollaborative Ansatz stellt sicher, dass die Erweiterung mit der sich ständig ändernden Landschaft der Online-Einwilligungsbanner Schritt hält – und es für alle einfacher macht, ihre Daten mit weniger Aufwand zu schützen.
Consent-O-Matic funktioniert derzeit mit mehr als 200 CMPs (vollständige Liste hier), darunter große Plattformen wie UserCentrics, CookieBot, OneTrust sowie Cookie-Banner für bestimmte Websites.
Consent-O-Matic verwendet nach der Installation die folgenden Berechtigungen im Browser:
Die Erweiterung kommuniziert nur in zwei Fällen mit dem Web:
Die URL der über das Erweiterungssymbol gemeldeten Website wird gesendet an eine von der Universität Aarhus gehostete Website in Form einer URI-kodierten Abfragezeichenfolge (z. B. wird LinkedIn gemeldet als https://gdprconsent.projects.cavi.au.dk/report.php?url=www.linkedin.com).
Wir empfehlen dringend, die Erweiterung direkt über den offiziellen Erweiterungsstore Ihres Browsers zu installieren (oben erwähnt). Die Installation über die offiziellen Kanäle hält Sie automatisch auf dem neuesten Stand, sobald neue Versionen veröffentlicht werden.
Es ist auch möglich, die Erweiterung auf anderen Wegen zu beziehen.
Alternativ zu den Erweiterungs-Stores können Sie eine der veröffentlichten Versionen manuell von der Releases-Seite auf Github herunterladen und entpacken.
Wenn Sie das tun, müssen Sie die Entwicklerfunktion des Browsers nutzen, um Load Unpacked (Chrome) oder Load Temporary Addon (Firefox) auszuführen und auf die manifest.json im entpackten Zip-Verzeichnis zu verweisen.
Wenn Sie schließlich den Code überprüfen oder Änderungen vornehmen möchten, können Sie die Erweiterung direkt aus dem Quellcode erstellen und installieren:``` git clone https://github.com/cavi-au/Consent-O-Matic.git cd Consent-O-Matic npm install
und führen Sie dann einen der folgenden aus: ```npm run build-firefox``` oder ```npm run build-chromium``` oder ```npm run build-safari```
Für Firefox oder Chromium können Sie nun wie oben für die Installation der Release-Archive vorgehen, aber zeigen Sie den Browser auf den `build`-Ordner oder einen Ordner, in den Sie das ZIP aus build/dist/ entpackt haben. Safari erfordert das Laden des XCode-Projekts, um eine App weiter zu erstellen.
Wir empfehlen nicht, aus dem Quellcode zu installieren.
## Consent-O-Matic erweitern
Wenn Ihr bevorzugter CMP nicht in der aktuellen Liste enthalten ist, können Sie entweder eine benutzerdefinierte Liste erstellen, die Sie hinzufügen können (klicken Sie auf das Erweiterungssymbol in Ihrem Browser, klicken Sie auf „Weitere Add-on-Einstellungen“, klicken Sie auf „Regellisten“ und geben Sie die URL Ihrer benutzerdefinierten Liste ein.). Wenn Sie **wirklich** einen Beitrag leisten möchten, erstellen Sie ruhig einen Pull Request, während Sie dabei sind.
Benutzer können Berichte senden, wenn Regeln für bestimmte Websites nicht funktionieren. Die vollständige Liste der gemeldeten URLs ist [hier](https://gdprconsent.projects.cavi.au.dk/reports.php) verfügbar. Die Zahl gibt an, wie oft die URL gemeldet wurde. Diese Liste zeigt derzeit nicht an, ob/wann die Regeln für eine URL überprüft/angepasst wurden, überprüfen Sie daher immer, ob die Regel noch defekt/fehlend ist, bevor Sie mit der Arbeit daran beginnen.
### Regel-Elemente
* [Grundstruktur](#basic-structure)
* [Detektoren](#detectors)
* [Methoden](#methods)
* [DOM-Auswahl](#dom-selection)
* [Aktionen](#actions)
* [Klicken](#click)
* [Liste](#list)
* [Zustimmung](#consent)
* [Schieben](#slide)
* [Falls CSS](#if-css)
* [Warte auf CSS](#wait-for-css)
* [Für jedes](#for-each)
* [Warte](#wait)
* [Verstecken](#hide)
* [Schließen](#close)
* [Matcher](#matchers)
* [CSS](#css)
* [Kontrollkästchen](#checkbox)
* [Zustimmung](#consent-1)
* [Zustimmungskategorien](#consent-categories)
* [Vollständiges Beispiel](#full-example)
### Grundstruktur
Eine Regelliste für Consent-O-Matic ist eine JSON-Struktur, die die Regeln zum Erkennen eines CMP (Consent Management Provider) und zum Umgang mit dem CMP-Popup, wenn es erkannt wird, enthält.
Jeder CMP ist ein benannter Eintrag und enthält 2 Teile, `detectors` und `methods`. Der Name sollte idealerweise der tatsächliche Name des zugrunde liegenden CMP (korrekt großgeschrieben und mit Leerzeichen) oder der Name der Website sein, wenn er für diese Domain eindeutig ist. Der Name wird im Bereich „Über“ der Erweiterungseinstellungen angezeigt, machen Sie ihn daher benutzerfreundlich.```json
{
"MyCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
"AnotherCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
}
Wenn mehr als ein Detektor zu einer CMP hinzugefügt wird, gilt die CMP als erkannt, sobald einer der Detektoren auslöst.
Detektoren sind der Teil, der erkennt, ob ein bestimmter Regelsatz angewendet werden soll. Im Grunde genommen werden die Methoden angewendet, wenn ein Detektor auslöst.
Aufbau des Detektors:```json { "presentMatcher": [{ ... }], "showingMatcher": [{ ... }] }
Der present matcher wird verwendet, um zu erkennen, ob das CMP auf der Seite vorhanden ist.
Manche CMPs fügen das Popup-HTML selbst dann in das DOM ein, wenn Sie eine Seite erneut besuchen, auf der Sie bereits zuvor Ihre Einwilligung gegeben haben. Wir möchten das Einwilligungsformular nur dann behandeln, wenn es tatsächlich auf der Seite angezeigt wird. Dafür wird der showing matcher verwendet.
Sowohl der present- als auch der showing-matcher folgen der gemeinsamen Struktur von [`Matchers`](#matchers).
Sowohl der present- als auch der showing-matcher können aus mehreren Matchern bestehen, die den Detektor nur dann auslösen, wenn alle Matcher (jeweils für present und showing) zutreffen.
#### Methoden
Methoden sind Sammlungen von Aktionen. Consent-O-Matic unterstützt 4 Methoden. `OPEN_OPTIONS`, `DO_CONSENT`, `SAVE_CONSENT`, `HIDE_CMP`
Alle Methoden sind optional, und falls vorhanden, werden die Methoden in der unten angegebenen Reihenfolge ausgeführt, wenn ein Detektor ausgelöst wird.```
HIDE_CMP
OPEN_OPTIONS
HIDE_CMP
DO_CONSENT
SAVE_CONSENT
Methoden nehmen die Form an:```json { "name": " ... ", "action": { ... } }
wobei name eine der 4 unterstützten Methoden ist und action die auszuführende [action](#actions) ist.
---
### DOM-Auswahl
Die meisten Aktionen und Matcher haben ein Ziel, auf das sie angewendet werden. Aus diesem Grund verfügt Consent-O-Matic über einen DOM-Auswahlmechanismus, der bei der Auswahl des richtigen DOM-Elements leicht helfen kann.```json
"parent": {
"selector": ".some.css.selector",
"textFilter": "someTextFilter",
"styleFilter": {
"option": "someStyleOption",
"value": "someStyleValue",
"negated": false
},
"displayFilter": true,
"iframeFilter": false,
"childFilter": {}
},
"target": {
"selector": ".some.css.selector",
"textFilter": "someTextFilter",
"styleFilter": {
"option": "someStyleOption",
"value": "someStyleValue",
"negated": false
},
"displayFilter": true,
"iframeFilter": false,
"childFilter": {}
}
Es gibt 2 Teile, parent und target. Der parent ist optional, aber falls vorhanden, wird er zuerst aufgelöst und als Ausgangspunkt für target verwendet. Dadurch können sehr komplexe Auswahlen von Elementen erstellt werden, die mit einem einzelnen einfachen CSS-Selektor sonst nicht möglich wären. Ein Beispiel hierfür ist die Selektion in Shadow DOM – wenn man parent verwendet, um das Element mit dem Shadow anzuvisieren, können dessen Kinder mit dem Selektor abgefragt werden.
Alle Parameter für parent und target außer selector sind optional.
Die Selektionsmethode funktioniert, indem der CSS-Selektor aus selector verwendet wird und die resultierenden DOM-Knoten anschließend über die verschiedenen verfügbaren Filter gefiltert werden:
textFilter filtert alle Knoten heraus, die den angegebenen Text nicht enthalten. Er kann auch als Array "textFilter":["filter1", "filter2"] angegeben werden; dann filtert er alle Knoten, die keinen der angegebenen Textfilter enthalten.
styleFilter filtert basierend auf berechneten Stilen (computedStyles). option ist die zu vergleichende Stiloption, z. B. position, value ist der zu vergleichende Wert und negated legt fest, ob der Optionswert mit dem angegebenen Wert übereinstimmen soll oder nicht.
displayFilter kann verwendet werden, um Knoten basierend darauf zu filtern, ob sie versteckt (display hidden) sind oder nicht.
iframeFilter filtert Knoten basierend darauf, ob sie sich in einem iframe befinden oder nicht.
childFilter ist eine vollständig neue DOM-Auswahl, die dann die ursprüngliche Auswahl danach filtert, ob eine Auswahl durch childFilter getroffen wurde oder nicht.
Hier ist ein Beispiel einer DOM-Auswahl:```json "parent": { "selector": ".myParent", "iframeFilter": true, "childFilter": { "target": { "selector": ".myChild", "textFilter": "Gregor" } } }, "target": { "selector": ".myTarget" }
Dieser Selektor versucht zunächst, das `parent` zu finden, bei dem es sich um ein DOM-Element mit der Klasse `myParent` handelt, das sich innerhalb eines Iframes befindet und ein untergeordnetes DOM-Element mit der Klasse `myChild` besitzt, das den Text "Gregor" enthält.
Anschließend wird unter Verwendung dieses `parent` als "root" versucht, ein DOM-Element mit der Klasse `myTarget` zu finden.
Dieses könnte dann das Ziel einer Aktion oder eines Matchers sein.
---
### Aktionen
Aktionen sind der Teil von Consent-O-Matic, der tatsächlich etwas tut. Manche Aktionen führen etwas mit einer Zielauswahl durch, andere haben mit dem Kontrollfluss zu tun.
#### Klicken
Diese Aktion simuliert einen Mausklick auf ihr Ziel.
Beispiel:```json
{
"type": "click",
"target": {
"selector": ".myButton",
"textFilter": "Save settings"
},
"openInTab": false
}
openInTab wenn auf true gesetzt, wird ein Strg+Umschalt+Klick anstelle eines Klicks auslösen, was den Link, falls vorhanden, in einem neuen Tab öffnen und diesen Tab fokussieren sollte.
In diesem Beispiel verwenden wir nur ein einfaches target mit einem textFilter, aber die vollständige DOM-Auswahl wird unterstützt.
Diese Aktion führt eine Liste von Aktionen der Reihe nach aus.
Example:```json { "type": "list", "actions": [] }
`actions` ist ein Array von Aktionen, die alle in Reihenfolge ausgeführt werden.
#### Zustimmung
Die Zustimmungsaktion nimmt ein Array von Einwilligungen entgegen und versucht, die Zustimmungsauswahlen des Benutzers anzuwenden.
Beispiel:```json
{
"type": "consent",
"consents": []
}
consents ist ein Array von Consent Typen
Einige Einwilligungsformulare verwenden einen Schieberegler, um einen Einwilligungsgrad festzulegen. Diese Aktion unterstützt das Simulieren des Schiebens mit einem solchen Schieberegler.
Beispiel:```json { "type": "slide", "target": { "selector": ".mySliderKnob" }, "dragTarget": { "target": { "selector": ".myChoosenOption" } }, "axis": "y" }
`target` ist das Ziel-DOM-Element, auf dem die Schiebebewegung simuliert werden soll.
`dragTarget` ist das DOM-Element, das für die Schiebentfernung verwendet wird.
`axis` wählt aus, ob der Schieberegler horizontal "x" oder vertikal "y" verlaufen soll.
Das slide-Ereignis simuliert, dass die Maus `target` um die Entfernung von `target` zu `dragTarget` auf der angegebenen `axis` gezogen hat.
#### If CSS
Diese Aktion wird als Steuerungsablauf verwendet, um eine andere Aktion auszuführen, je nachdem, ob eine DOM-Auswahl ein Element findet oder nicht.
Beispiel:```json
{
"type": "ifcss",
"target": {
"selector": "",
},
"trueAction": {
"type": "click",
"target": {
"selector": ".myTrueButton"
}
},
"falseAction": {
"type": "click",
"target": {
"selector": ".myFalseButton"
}
}
}
trueAction ist eine Aktion, die ausgeführt wird, wenn die DOM-Auswahl ein Element findet.
falseAction wird ausgeführt, wenn die DOM-Auswahl kein Element findet.
Diese Aktion wartet, bis der DOM-Selektor ein übereinstimmendes DOM-Element findet. Dies wird meist verwendet, wenn etwas im Einverständnisformular langsam lädt und darauf gewartet werden muss.
Beispiel:```json { "type": "waitcss", "target": { "selector": ".myWaitTarget" }, "retries": 10, "waitTime": 200, "negated": false }
`retries` ist die Anzahl der Versuche, um nach dem Ziel-DOM-Element zu suchen. Standardwert ist 10.
`waitTime` bestimmt die Zeit zwischen den Wiederholungsversuchen. Standardwert ist 250.
`negated` bewirkt, dass "Wait For CSS" wartet, bis das Ziel NICHT gefunden wird.
#### For Each
Wenn eine bestimmte Reihe von Aktionen mehrmals ausgeführt werden muss, jedoch mit verschiedenen DOM-Knoten als Wurzel, kann die For-Each-Aktion verwendet werden. Sie führt ihre Aktion 1 Mal für jedes DOM-Element aus, das durch ihre DOM-Auswahl ausgewählt wird; alle Aktionen, die innerhalb der For-Each-Schleife ausgeführt werden, sehen das DOM als von dem aktuell ausgewählten Knoten ausgehend.
Beispiel:```json
{
"type": "foreach",
"target": {
"selector": ".loopElement"
},
"action": {}
}
action ist die Aktion, die für jedes gefundene DOM-Element ausgeführt werden soll.
Diese Aktion wartet die angegebene Anzahl Millisekunden, bevor sie fortfährt.
Beispiel:```json { "type": "wait", "waitTime": 250 }
#### Ausblenden
Diese Aktion setzt die CSS-Klasse 'ConsentOMatic-CMP-Hider' auf die DOM-Auswahl. Die Standard-CSS-Regeln setzen dann die Deckkraft auf 0 für das Element.
Beispiel:```json
{
"type": "hide",
"target": {
"selector": ".myHiddenClass"
}
}
Diese Aktion schließt den aktuellen Tab, nützlich für Zustimmungsanbieter wie Evidon, die gerne neue Tabs mit dem Einwilligungs-Dashboard öffnen.
Beispiel:```json { "type": "close" }
### Matchers
Matcher werden verwendet, um das Vorhandensein einer DOM-Auswahl oder den Zustand einer DOM-Auswahl zu überprüfen.
#### CSS
Dieser Matcher prüft das Vorhandensein einer DOM-Auswahl und gibt zurück, dass er übereinstimmt, wenn sie existiert.
Example:```json
{
"type": "css",
"target": {
"selector": ".myMatchingClass"
}
}
Dieser Matcher prüft den Zustand eines <input type='checkbox' /> und gibt an, dass eine Übereinstimmung vorliegt, wenn das Kontrollkästchen aktiviert ist.
Beispiel:```json { "type": "checkbox", "target": { "selector": ".myInputCheckbox" } }
---
### Zustimmung
Dies wird innerhalb von [Consent Actions](#consent) verwendet und definiert die tatsächliche Zustimmung, die der Benutzer geben oder nicht geben soll.
Jede Zustimmung hat einen Typ, der den Zustimmungskategorien in Consent-O-Matic entspricht. Wenn ein Benutzer also die erste Zustimmungskategorie auf ON (Typ A) geschaltet hat und die Zustimmung vom Typ 'A' ist, wird die Zustimmung aktiviert.
Normalerweise wird die Zustimmung entweder als Kippschalter oder als eine Reihe von Ein/Aus-Buttons gegeben. Daher hat `consent` einen Mechanismus für jeden dieser Fälle.
Beispiel:```json
{
"type": "A",
"toggleAction": {},
"matcher": {},
"trueAction": {},
"falseAction": {}
}
type ist der Typ der Einwilligungskategorie, die diese Regel definiert, und bestimmt, ob diese Einwilligung je nach Auswahl des Benutzers für diesen Kategorietyp ein- oder ausgeschaltet sein soll.
toggleAction Diese Aktion wird verwendet, um die Einwilligung auszuwählen, wenn das Popup einen Kippschalter oder einen Schalter verwendet, um die Einwilligung zu kommunizieren. Die Aktion wird ausgeführt, wenn der Matcher angibt, dass die Einwilligung in einem anderen Zustand ist, als der Benutzer es verlangt hat, andernfalls wird sie nicht ausgeführt.
matcher ist der Matcher, der verwendet wird, um den Zustand der Einwilligung zu überprüfen. Bei einem checkbox matcher ist die Einwilligung gegeben, wenn die Checkbox aktiviert ist. Bei einem CSS matcher ist die Einwilligung gegeben, wenn der Matcher eine DOM-Auswahl findet.
trueAction und falseAction sind Aktionen, die verwendet werden, wenn die Einwilligung stattdessen durch Drücken einer von zwei Schaltflächen erteilt werden muss, anstatt ein-/ausgeschaltet zu werden. Diese werden abhängig von der Auswahl des Benutzers zur Einwilligung ausgeführt. Wenn der Benutzer für diesen Kategorietyp seine Einwilligung gegeben hat, wird trueAction ausgeführt, und falseAction wird ausgeführt, wenn der Benutzer für diesen Kategorietyp keine Einwilligung gegeben hat.
Wenn toggleAction und matcher in der Inhaltskonfiguration vorhanden sind, wird toggleAction verwendet. Fehlt einer von beiden, werden stattdessen trueAction/falseAction verwendet.
Wie in den Addon-Einstellungen zu sehen, in derselben Reihenfolge:
Alles zusammengefasst, hier ein vollständiges Beispiel eines CMP "MyCMP", das 2 Einwilligungskategorien zum Umschalten hat.```json { "MyCMP": { "detectors": [ { "presentMatcher": { "type": "css", "target": { "selector": "#theCMP" } }, "showingMatcher": { "target": { "selector": "#theCMP.isShowing" } } } ], "methods": [ { "name": "OPEN_OPTIONS", "action": { "type": "click", "target": { "selector": ".button", "textFilter": "Change settings" } } }, { "name": "DO_CONSENT", "action": { "type": "list", "actions": [ { "type": "click", "target": { "selector": ".menu-vendors" } }, { "type": "consent", "consents": [ { "type": "A", "matcher": { "type": "checkbox", "parent": { "selector": ".vendor-item", "textFilter": "Functional cookies" }, "target": { "selector": "input" } }, "toggleAction": { "type": "click", "parent": { "selector": ".vendor-item", "textFilter": "Functional cookies" }, "target": { "selector": "label" } } }, { "type": "F", "matcher": { "type": "checkbox", "parent": { "selector": ".vendor-item", "textFilter": "Advertisement cookies" }, "target": { "selector": "input" } }, "toggleAction": { "type": "click", "parent": { "selector": ".vendor-item", "textFilter": "Advertisement cookies" }, "target": { "selector": "label" } } } ] } ] } }, { "name": "SAVE_CONSENT", "action": { "type": "click", "target": { "selector": ".save-consent-btn" } } } ] } }