cavi-au/consent-o-maticExtension de navigateur qui remplit automatiquement les fenêtres contextuelles de cookies en fonction de vos préférences
|
|
Aujourd'hui, la plupart des sites web souhaitent traiter vos données et vous demandent votre consentement à l'aide de bannières de cookies. Bien que ces bannières aient pour objectif de vous donner le contrôle, dans la pratique, elles entraînent souvent des clics répétitifs et chronophages, surtout si votre navigateur efface les cookies lorsque vous le fermez. La même bannière réapparaît et vous devez renouveler les mêmes choix encore et encore.
Consent-O-Matic est une extension de navigateur conçue pour résoudre ce problème. Développé par le Centre pour la visualisation avancée et l'interaction (CAVI) de l'Université d'Aarhus, cet outil gère automatiquement les bannières de consentement à votre place. Après avoir défini vos préférences lors de l'installation, Consent-O-Matic reconnaîtra de nombreuses bannières courantes des plateformes de gestion de consentement (CMP), appliquera vos choix et confirmera avec une petite coche à côté de l'icône de l'extension.
Comme Consent-O-Matic est un projet open-source, tout le monde peut contribuer à son amélioration en ajoutant de nouvelles règles, en mettant à jour les règles existantes ou en actualisant la documentation. Cette approche collaborative garantit que l'extension suit le paysage en constante évolution des bannières de consentement en ligne, et facilite la protection de vos données avec moins de tracas.
Consent-O-Matic fonctionne actuellement avec plus de 200 CMP (voir la liste complète ici), y compris les grandes plateformes comme UserCentrics, CookieBot, OneTrust, ainsi que les bannières de cookies pour des sites web spécifiques.
Consent-O-Matic utilise l'ensemble d'autorisations suivant dans le navigateur lors de l'installation :
L'extension ne communique avec le web que dans deux situations :
L'URL du site web signalé via l'icône de l'extension est envoyée à un site web hébergé par l'Université d'Aarhus sous la forme d'une chaîne de requête encodée en URI (par exemple, LinkedIn sera signalé comme https://gdprconsent.projects.cavi.au.dk/report.php?url=www.linkedin.com).
Nous recommandons vivement d'installer directement via la boutique d'extensions officielle de votre navigateur (mentionnée en haut). L'installation par les canaux officiels vous permettra de rester automatiquement à jour avec les nouvelles versions lorsqu'elles sont publiées.
Il est également possible d'obtenir l'extension par d'autres moyens.
Comme alternative aux boutiques d'extensions, vous pouvez télécharger et extraire manuellement l'une des versions publiées depuis la page Releases sur Github.
Si vous faites cela, vous devez utiliser la fonctionnalité développeur du navigateur pour Charger l'extension non empaquetée (Chrome) ou Charger un module temporaire (Firefox) et pointer vers le fichier manifest.json dans le répertoire décompressé.
Enfin, si vous avez l'intention d'examiner ou de modifier le code, vous pouvez construire et installer directement à partir du code source :``` git clone https://github.com/cavi-au/Consent-O-Matic.git cd Consent-O-Matic npm install
and then run one of ```npm run build-firefox``` or ```npm run build-chromium``` or ```npm run build-safari```
Pour Firefox ou Chromium, vous pouvez maintenant procéder comme ci-dessus pour installer les archives de version, mais pointer le navigateur vers le dossier `build` ou un dossier où vous avez extrait le zip depuis build/dist/. Safari nécessite de charger le projet XCode pour construire une application.
Nous ne recommandons pas l'installation à partir du code source.
## Étendre Consent-O-Matic
Si votre CMP préférée manque dans la liste actuelle, n'hésitez pas à créer une liste personnalisée que vous pouvez ajouter (cliquez sur l'icône de l'extension dans votre navigateur, cliquez sur "Plus de paramètres de l'extension", cliquez sur "Listes de règles", et entrez l'URL de votre liste personnalisée.). Si vous **voulez vraiment** contribuer, n'hésitez pas à créer une Pull Request tant que vous y êtes.
Les utilisateurs peuvent envoyer des rapports lorsque les règles pour des sites web spécifiques ne fonctionnent pas. La liste complète des URL signalées est disponible [ici](https://gdprconsent.projects.cavi.au.dk/reports.php). Le nombre indique combien de fois l'URL a été signalée. Cette liste n'indique actuellement pas si/quand les règles pour une URL ont été vérifiées/ajustées, donc vérifiez toujours si la règle est toujours cassée/manquante avant de commencer à travailler dessus.
### Éléments de la règle
* [Structure de base](#basic-structure)
* [Détecteurs](#detectors)
* [Méthodes](#methods)
* [Sélection DOM](#dom-selection)
* [Actions](#actions)
* [Click](#click)
* [List](#list)
* [Consent](#consent)
* [Slide](#slide)
* [If CSS](#if-css)
* [Wait For CSS](#wait-for-css)
* [For Each](#for-each)
* [Wait](#wait)
* [Hide](#hide)
* [Close](#close)
* [Matchers](#matchers)
* [CSS](#css)
* [Checkbox](#checkbox)
* [Consentement](#consent-1)
* [Catégories de consentement](#consent-categories)
### Structure de base
Une liste de règles pour Consent-O-Matic est une structure JSON qui contient les règles pour détecter un CMP (Consent Management Provider), et gérer la popup CMP lorsqu'elle est détectée.
Chaque CMP est une entrée nommée et contient 2 parties, `detectors` et `methods`. Le nom devrait idéalement être le vrai nom du CMP sous-jacent (correctement capitalisé et espacé) ou du site web s'il est unique à ce domaine. Le nom sera affiché dans la section À propos des paramètres de l'extension, alors rendez-le convivial.```json
{
"MyCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
"AnotherCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
}
Si plus d'un détecteur est ajouté à un CMP, le CMP est considéré comme détecté si l'un des détecteurs se déclenche.
Les détecteurs sont la partie qui détecte si un certain ensemble de règles doit être appliqué. En gros, si un détecteur se déclenche, les méthodes seront appliquées.
Structure du détecteur :```json { "presentMatcher": [{ ... }], "showingMatcher": [{ ... }] }
Le matcher de présence est utilisé pour détecter si la CMP est présente sur la page.
Certaines CMP insèrent encore le HTML de la popup dans le DOM même lors d'une nouvelle visite d'une page où vous avez déjà donné votre consentement. Nous voulons gérer le formulaire de consentement uniquement s'il est effectivement affiché sur la page. C'est à cela que sert le matcher d'affichage.
Le matcher de présence et le matcher d'affichage suivent tous deux la structure commune des [`Matchers`](#matchers).
Le matcher de présence et le matcher d'affichage peuvent tous deux être des matchers multiples, ne déclenchant le détecteur que si tous les matchers (respectivement pour la présence et l'affichage) s'appliquent.
#### Méthodes
Les méthodes sont des collections d'actions. Consent-O-Matic prend en charge 4 méthodes. `OPEN_OPTIONS`, `DO_CONSENT`, `SAVE_CONSENT`, `HIDE_CMP`
Toutes les méthodes sont facultatives et, si elles sont présentes, elles seront exécutées dans l'ordre donné ci-dessous lorsqu'un détecteur sera déclenché.```
HIDE_CMP
OPEN_OPTIONS
HIDE_CMP
DO_CONSENT
SAVE_CONSENT
Les méthodes prennent la forme :```json { "name": " ... ", "action": { ... } }
où le nom est l'une des 4 méthodes prises en charge et l'action est l'[action](#actions) à exécuter.
---
### Sélection du DOM
La plupart des actions et des matchers ont une cible à laquelle ils s'appliquent. Pour cette raison, Consent-O-Matic dispose d'un mécanisme de sélection du DOM qui peut facilement aider à sélectionner le bon élément du DOM.```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": {}
}
Il y a 2 parties, parent et target. Le parent est facultatif mais s'il existe, il sera résolu en premier et utilisé comme point de départ pour target. Cela permet de construire des sélections très complexes d'éléments qui ne seraient pas possibles autrement avec un seul sélecteur CSS simple. Un exemple typique est la sélection dans le shadow DOM – où l'utilisation de parent pour cibler l'élément avec l'ombre permet d'interroger ses enfants avec le sélecteur.
Tous les paramètres de parent et target sauf selector sont facultatifs.
La méthode de sélection fonctionne en utilisant le sélecteur CSS de selector, puis en filtrant les nœuds DOM résultants via les différents filtres disponibles :
textFilter filtre tous les nœuds qui ne contiennent pas le texte donné. Il peut aussi être fourni sous forme de tableau "textFilter":["filter1", "filter2"] et dans ce cas, il filtre tous les nœuds qui ne contiennent aucun des filtres de texte donnés.
styleFilter filtre en fonction des styles calculés. option est l'option de style à comparer, par exemple position, value est la valeur à comparer et negated détermine si la valeur de l'option doit correspondre ou non à la valeur donnée.
displayFilter peut être utilisé pour filtrer les nœuds selon qu'ils sont cachés (display hidden) ou non.
iframeFilter filtre les nœuds selon qu'ils se trouvent ou non dans une iframe.
childFilter est une toute nouvelle sélection DOM, qui filtre ensuite la sélection originale, selon qu'une sélection a été faite par childFilter ou non.
Voici un exemple de sélection DOM :```json "parent": { "selector": ".myParent", "iframeFilter": true, "childFilter": { "target": { "selector": ".myChild", "textFilter": "Gregor" } } }, "target": { "selector": ".myTarget" }
Ce sélecteur cherche d'abord à trouver le `parent`, qui est un élément DOM avec la classe `myParent` se trouvant dans une iframe et ayant un élément DOM enfant avec la classe `myChild` contenant le texte "Gregor".
Ensuite, en utilisant ce parent comme « racine », il cherche à trouver un élément DOM avec la classe `myTarget`.
Cela pourrait alors être la cible d'une action ou d'un matcher.
---
### Actions
Les actions sont la partie de Consent-O-Matic qui fait réellement les choses. Certaines actions font quelque chose sur une sélection cible, d'autres sont liées au flux de contrôle.
#### Click
Cette action simule un clic de souris sur sa cible.
Exemple :```json
{
"type": "click",
"target": {
"selector": ".myButton",
"textFilter": "Save settings"
},
"openInTab": false
}
openInTab si défini sur true, déclenchera un ctrl+shift+click au lieu d'un simple clic, ce qui devrait faire ouvrir le lien, le cas échéant, dans un nouvel onglet, et y placer le focus.
Dans cet exemple, nous utilisons seulement un simple target avec un textFilter mais la sélection complète du DOM est prise en charge.
Cette action exécute une liste d'actions dans l'ordre.
Exemple :```json { "type": "list", "actions": [] }
`actions` est un tableau d'actions qui seront toutes exécutées dans l'ordre.
#### Consentement
L'action consentement prend un tableau de consentements et tente d'appliquer les sélections de consentement de l'utilisateur.
Exemple:```json
{
"type": "consent",
"consents": []
}
consents est un tableau de types Consent
Certains formulaires de consentement utilisent un curseur pour définir un niveau de consentement. Cette action permet de simuler un glissement avec un tel curseur.
Exemple :```json { "type": "slide", "target": { "selector": ".mySliderKnob" }, "dragTarget": { "target": { "selector": ".myChoosenOption" } }, "axis": "y" }
`target` est l'élément DOM cible sur lequel simuler le mouvement de glissement.
`dragTarget` est l'élément DOM à utiliser pour la distance de glissement.
`axis` sélectionne si le curseur doit aller horizontalement "x" ou verticalement "y".
L'événement de glissement simulera que la souris a fait glisser `target` de la distance de `target` à `dragTarget` sur l'`axis` donné.
#### If CSS
Cette action est utilisée comme flux de contrôle, exécutant une autre action selon qu'une sélection DOM trouve un élément ou non.
Exemple :```json
{
"type": "ifcss",
"target": {
"selector": "",
},
"trueAction": {
"type": "click",
"target": {
"selector": ".myTrueButton"
}
},
"falseAction": {
"type": "click",
"target": {
"selector": ".myFalseButton"
}
}
}
trueAction est une action qui sera exécutée si la sélection DOM trouve un élément.
falseAction sera exécutée lorsque la sélection DOM ne trouve pas d'élément.
Cette action attend que le sélecteur DOM trouve un élément DOM correspondant. Elle est principalement utilisée si quelque chose dans le formulaire de consentement se charge lentement et doit être attendu.
Exemple :```json { "type": "waitcss", "target": { "selector": ".myWaitTarget" }, "retries": 10, "waitTime": 200, "negated": false }
`retries` est le nombre de fois pour vérifier l'élément DOM cible. Par défaut : 10.
`waitTime` détermine le temps entre les tentatives. Par défaut : 250.
`negated` fait en sorte que "Wait For CSS" attende jusqu'à ce que la cible ne soit PAS trouvée.
#### For Each
Si un ensemble d'actions doit être exécuté plusieurs fois, mais avec différents nœuds DOM comme racine, l'action 'for each' peut être utilisée. Elle exécute son action 1 fois pour chaque élément DOM sélectionné par sa sélection DOM ; toutes les actions exécutées à l'intérieur de la boucle 'for each' verront le DOM comme commençant à partir du nœud actuellement sélectionné.
Exemple :```json
{
"type": "foreach",
"target": {
"selector": ".loopElement"
},
"action": {}
}
action est l'action à exécuter pour chaque élément DOM trouvé.
Cette action attend le nombre de millisecondes donné avant de continuer.
Exemple :```json { "type": "wait", "waitTime": 250 }
#### Masquer
Cette action définit la classe CSS 'ConsentOMatic-CMP-Hider' sur la sélection DOM. Les règles CSS par défaut définiront alors l'opacité à 0 sur l'élément.
Exemple:```json
{
"type": "hide",
"target": {
"selector": ".myHiddenClass"
}
}
Cette action ferme l'onglet actuel, utile pour les fournisseurs de consentement comme Evidon, qui aime ouvrir de nouveaux onglets avec le tableau de bord de consentement à l'intérieur.
Exemple:```json { "type": "close" }
### Correspondances
Les correspondances sont utilisées pour vérifier la présence d'une sélection DOM, ou l'état d'une sélection DOM.
#### CSS
Ce correspondant vérifie la présence d'une sélection DOM et indique une correspondance si elle existe.
Exemple :```json
{
"type": "css",
"target": {
"selector": ".myMatchingClass"
}
}
Ce matcher vérifie l'état d'un <input type='checkbox' /> et renvoie une correspondance si la case est cochée.
Exemple :```json { "type": "checkbox", "target": { "selector": ".myInputCheckbox" } }
---
### Consentement
C'est ce qui est utilisé dans [Actions de consentement](#consent) et définit le consentement réel que l'utilisateur doit donner ou ne pas donner.
Chaque consentement a un type, qui correspond aux catégories de consentement dans Consent-O-Matic, donc si un utilisateur a activé la première catégorie de consentement (Type A) et que le consentement est de type "A", alors le consentement sera activé.
Habituellement, le consentement est donné soit sous forme de bouton à bascule, soit d'un ensemble de boutons on/off. Par conséquent, `consent` dispose d'un mécanisme pour chacun de ces cas.
Exemple:```json
{
"type": "A",
"toggleAction": {},
"matcher": {},
"trueAction": {},
"falseAction": {}
}
type est le type de catégorie de consentement que cette règle définit et détermine si ce consentement doit être activé ou désactivé en fonction de la sélection de l'utilisateur pour ce type de catégorie.
toggleAction cette action est utilisée pour sélectionner le consentement si la popup utilise un interrupteur ou un bouton à bascule pour communiquer le consentement. L'action sera exécutée si le matcher indique que le consentement est dans un état différent de celui demandé par l'utilisateur, sinon elle ne sera pas exécutée.
matcher est le matcher utilisé pour vérifier dans quel état se trouve le consentement. Pour un matcher de case à cocher, le consentement est donné si la case est cochée. Pour un matcher CSS, le consentement est donné si le matcher trouve une sélection DOM.
trueAction et falseAction sont des actions utilisées si le consentement doit être donné en appuyant sur l'un des deux boutons, plutôt que d'être basculé. Celles-ci seront exécutées en fonction de la sélection de consentement de l'utilisateur. Si l'utilisateur a donné son consentement pour ce type de catégorie, trueAction sera exécutée, et falseAction sera exécutée si l'utilisateur n'a pas donné son consentement à ce type de catégorie.
Si toggleAction et matcher sont présents dans la configuration de contenu, toggleAction sera utilisée. Si l'un d'eux est manquant, trueAction/falseAction seront utilisées à la place.
Comme vu dans les paramètres du module complémentaire, dans le même ordre :
En rassemblant tout cela, voici un exemple complet d'un CMP "MyCMP" qui a 2 catégories de consentement à basculer.```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" } } } ] } }