cavi-au/consent-o-maticEstensione del browser che compila automaticamente i popup dei cookie in base alle tue preferenze
|
|
La maggior parte dei siti web oggi vuole elaborare i tuoi dati e chiede il consenso tramite banner dei cookie. Sebbene questi banner siano progettati per darti il controllo, in pratica spesso richiedono clic ripetitivi e che fanno perdere tempo, specialmente se il tuo browser cancella i cookie quando lo chiudi. Lo stesso banner riappare e ti ritrovi a fare le stesse scelte ancora e ancora.
Consent-O-Matic è un'estensione del browser progettata per risolvere questo problema. Sviluppato dal Centre for Advanced Visualization and Interaction (CAVI) dell'Università di Aarhus, lo strumento gestisce automaticamente i banner di consenso per conto tuo. Dopo aver impostato le tue preferenze durante l'installazione, Consent-O-Matic riconoscerà molti banner comuni delle piattaforme di gestione del consenso (CMP), applicherà le tue scelte e confermerà con un piccolo segno di spunta accanto all'icona dell'estensione.
Poiché Consent-O-Matic è un progetto open source, chiunque può contribuire al suo miglioramento aggiungendo nuove regole, aggiornando quelle vecchie o aggiornando la documentazione. Questo approccio collaborativo garantisce che l'estensione tenga il passo con il panorama in continua evoluzione dei banner di consenso online e renda più facile per tutti proteggere i propri dati con meno fastidi.
Consent-O-Matic funziona attualmente con più di 200 CMP (vedi l'elenco completo qui), incluse piattaforme importanti come UserCentrics, CookieBot, OneTrust, nonché banner dei cookie per siti web specifici.
Consent-O-Matic utilizza il seguente insieme di autorizzazioni nel browser quando è installato:
L'estensione comunica con il web solo in due situazioni:
L'URL del sito web segnalato tramite l'icona dell'estensione viene inviato a un sito web ospitato dall'Università di Aarhus sotto forma di stringa di query codificata URI (ad esempio, LinkedIn verrà segnalato come https://gdprconsent.projects.cavi.au.dk/report.php?url=www.linkedin.com).
Raccomandiamo vivamente di installare direttamente dal negozio ufficiale di estensioni del tuo browser (menzionato all'inizio). Installare tramite i canali ufficiali ti manterrà automaticamente aggiornato con le nuove versioni quando vengono rilasciate.
È anche possibile ottenere l'estensione con altri mezzi.
In alternativa ai negozi di estensioni, puoi scaricare manualmente ed estrarre una delle versioni pubblicate dalla pagina Releases su Github.
Se lo fai, devi utilizzare la funzione sviluppatore del browser per Carica estensione non pacchettizzata (Chrome) o Carica componente aggiuntivo temporaneo (Firefox) e puntarla al manifest.json nella directory zip decompressa.
Infine, se intendi esaminare o apportare modifiche al codice, puoi compilare e installare direttamente dal codice sorgente:``` 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```
Per Firefox o Chromium ora puoi procedere come sopra per installare gli archivi di rilascio, ma puntando il browser alla cartella `build` o a una cartella in cui hai estratto lo zip da build/dist/. Safari richiede il caricamento del progetto XCode per creare ulteriormente un'app.
Non consigliamo l'installazione dal sorgente.
## Estendere Consent-O-Matic
Se il tuo CMP preferito è assente dall'elenco attuale, sentiti libero di creare una lista personalizzata che puoi aggiungere (clicca sull'icona dell'estensione nel tuo browser, clicca su "More add-on settings", clicca su "Rule lists" e inserisci l'URL della tua lista personalizzata). Se **davvero** vuoi contribuire, sentiti libero di creare una Pull Request mentre ci sei.
Gli utenti possono inviare segnalazioni quando le regole per siti web specifici non funzionano. L'elenco completo degli URL segnalati è disponibile [qui](https://gdprconsent.projects.cavi.au.dk/reports.php). Il numero indica quante volte l'URL è stato segnalato. Questo elenco attualmente non mostra se/quando le regole per un URL sono state controllate/adattate, quindi verifica sempre se la regola è ancora rotta/mancante prima di iniziare a lavorarci.
### Elementi delle regole
* [Struttura di base](#basic-structure)
* [Rilevatori](#detectors)
* [Metodi](#methods)
* [Selezione DOM](#dom-selection)
* [Azioni](#actions)
* [Clic](#click)
* [Elenco](#list)
* [Consenso](#consent)
* [Scorrimento](#slide)
* [Se CSS](#if-css)
* [Attendi CSS](#wait-for-css)
* [Per ciascuno](#for-each)
* [Attendi](#wait)
* [Nascondi](#hide)
* [Chiudi](#close)
* [Corrispondenze](#matchers)
* [CSS](#css)
* [Checkbox](#checkbox)
* [Consenso](#consent-1)
* [Categorie di consenso](#consent-categories)
* [Esempio completo](#full-example)
### Struttura di base
Una lista di regole per Consent-O-Matic è una struttura JSON che contiene le regole per rilevare un CMP (Consent Management Provider) e
gestire il popup del CMP quando viene rilevato.
Ogni CMP è una voce nominata e contiene 2 parti, `detectors` e `methods`. Il nome dovrebbe idealmente essere il nome effettivo del CMP sottostante (correttamente capitalizzato e con spazi) o del sito web se è unico per quel dominio. Il nome verrà mostrato nella sezione Informazioni delle impostazioni dell'estensione, quindi rendilo user-friendly.```json
{
"MyCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
"AnotherCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
}
Se viene aggiunto più di 1 detector a un CMP, il CMP viene considerato come rilevato se uno qualsiasi dei detector si attiva.
I Detectors sono la parte che rileva se un determinato insieme di regole deve essere applicato. In pratica, se un detector si attiva, i metodi verranno applicati.
Struttura del detector:```json { "presentMatcher": [{ ... }], "showingMatcher": [{ ... }] }
Il matcher "present" viene utilizzato per rilevare se il CMP è presente nella pagina.
Alcuni CMP inseriscono comunque l'HTML del popup nel DOM anche quando si rivisita una pagina in cui hai già dato il consenso in precedenza. Vogliamo gestire il modulo di consenso solo se è effettivamente visibile sulla pagina. Questo è lo scopo del matcher "showing".
Sia il matcher "present" che "showing" seguono la struttura comune dei [`Matchers`](#matchers).
Sia il matcher "present" che "showing" possono essere composti da più matcher e attivano il detector solo se tutti i matcher (rispettivamente per "present" e "showing") sono soddisfatti.
#### Metodi
I metodi sono raccolte di azioni. Consent-O-Matic supporta 4 metodi: `OPEN_OPTIONS`, `DO_CONSENT`, `SAVE_CONSENT`, `HIDE_CMP`.
Tutti i metodi sono opzionali e, se presenti, vengono eseguiti nell'ordine indicato di seguito quando il detector viene attivato.```
HIDE_CMP
OPEN_OPTIONS
HIDE_CMP
DO_CONSENT
SAVE_CONSENT
I metodi assumono la forma:```json { "name": " ... ", "action": { ... } }
where the name is one of the 4 supported methods and action is the [action](#actions) to execute.
---
### Selezione DOM
La maggior parte delle azioni e dei matcher hanno un target a cui si applicano. Per questo motivo, Consent-O-Matic dispone di un meccanismo di selezione DOM che può facilmente aiutare a selezionare l'elemento DOM corretto.```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": {}
}
Ci sono 2 parti, parent e target. Il parent è opzionale ma se esiste verrà risolto per primo, e utilizzato come punto di partenza per target. Questo permette di costruire selezioni molto complicate di elementi che altrimenti non sarebbero possibili con un singolo selettore CSS semplice. Un esempio è la selezione all'interno dello shadow DOM - dove utilizzare parent per selezionare l'elemento con lo shadow consente di interrogare i suoi figli con il selettore.
Tutti i parametri per parent e target tranne selector sono opzionali.
Il metodo di selezione funziona utilizzando il selettore CSS da selector e poi filtrando i nodi DOM risultanti tramite i vari filtri disponibili:
textFilter filtra tutti i nodi che non includono il testo specificato. Può anche essere fornito come array "textFilter":["filter1", "filter2"], e in quel caso filtra tutti i nodi che non includono uno dei filtri di testo specificati.
styleFilter filtra in base a computedStyles. option è l'opzione di stile da confrontare, ad esempio position; value è il valore da confrontare e negated stabilisce se il valore dell'opzione deve corrispondere o meno al valore dato.
displayFilter può essere utilizzato per filtrare i nodi in base al fatto che siano nascosti o meno.
iframeFilter filtra i nodi in base al fatto che siano all'interno di un iframe o meno.
childFilter è una selezione DOM completamente nuova, che poi filtra sulla selezione originale, in base al fatto che una selezione sia stata fatta da childFilter o meno.
Ecco un esempio di selezione DOM:```json "parent": { "selector": ".myParent", "iframeFilter": true, "childFilter": { "target": { "selector": ".myChild", "textFilter": "Gregor" } } }, "target": { "selector": ".myTarget" }
Questo selettore cerca innanzitutto di trovare il `parent` che è un elemento DOM con la classe `myParent` all'interno di un iframe e che ha un elemento DOM figlio con la classe `myChild` contenente il testo "Gregor".
Poi, utilizzando questo genitore come "radice", cerca di trovare un elemento DOM con la classe `myTarget`.
Questo potrebbe quindi essere il bersaglio di un'azione o di un matcher.
---
### Azioni
Le azioni sono la parte di Consent-O-Matic che effettivamente compie delle operazioni. Alcune azioni eseguono qualcosa su una selezione target, altre riguardano il flusso di controllo.
#### Click
Questa azione simula un clic del mouse sul suo target.
Esempio:```json
{
"type": "click",
"target": {
"selector": ".myButton",
"textFilter": "Save settings"
},
"openInTab": false
}
openInTab se impostato a true, attiverà un ctrl+maiusc+click invece di un click, che dovrebbe far sì che il link, se presente, si apra in una nuova scheda e ne prenda il focus.
In questo esempio usiamo solo un semplice target con un textFilter, ma è supportato l'intero meccanismo di selezione DOM.
Questa azione esegue una lista di azioni in ordine.
Esempio:```json { "type": "list", "actions": [] }
`actions` è un array di azioni che verranno tutte eseguite in ordine.
#### Consenso
L'azione di consenso richiede un array di consensi e cerca di applicare le selezioni di consenso dell'utente.
Esempio:```json
{
"type": "consent",
"consents": []
}
consents is an array of Consent types
Some consent forms use a slider to set a consent level, this action supports simulating sliding with such a slider.
Esempio:```json { "type": "slide", "target": { "selector": ".mySliderKnob" }, "dragTarget": { "target": { "selector": ".myChoosenOption" } }, "axis": "y" }
`target` è l'elemento DOM di destinazione su cui simulare il movimento di scorrimento.
`dragTarget` è l'elemento DOM da utilizzare per la distanza di scorrimento.
`axis` seleziona se lo slider deve andare orizzontale "x" o verticale "y".
L'evento di scorrimento simulerà che il mouse abbia trascinato `target` per la distanza da `target` a `dragTarget` sull'`axis` specificato.
#### If CSS
Questa azione è usata come controllo di flusso, eseguendo un'altra azione a seconda che una selezione DOM trovi o meno un elemento.
Example:```json
{
"type": "ifcss",
"target": {
"selector": "",
},
"trueAction": {
"type": "click",
"target": {
"selector": ".myTrueButton"
}
},
"falseAction": {
"type": "click",
"target": {
"selector": ".myFalseButton"
}
}
}
trueAction è un'azione che verrà eseguita se la selezione DOM trova un elemento.
falseAction verrà eseguita quando la selezione DOM non trova un elemento.
Questa azione attende finché il selettore DOM non trova un elemento DOM corrispondente. Viene utilizzata principalmente se qualcosa nel modulo di consenso si carica lentamente e deve essere atteso.
Esempio:```json { "type": "waitcss", "target": { "selector": ".myWaitTarget" }, "retries": 10, "waitTime": 200, "negated": false }
`retries` è il numero di volte da controllare per l'elemento DOM target. Il valore predefinito è 10.
`waitTime` determina il tempo tra i tentativi di retry. Il valore predefinito è 250.
`negated` fa sì che "Wait For CSS" attenda fino a quando il target NON viene trovato.
#### For Each
Se un certo insieme di azioni deve essere eseguito più volte, ma con nodi DOM diversi come radice, è possibile utilizzare l'azione for each. Esegue la sua azione 1 volta per ogni elemento DOM selezionato dalla sua selezione DOM; tutte le azioni eseguite all'interno del ciclo for each vedranno il DOM a partire dal nodo attualmente selezionato.
Esempio:```json
{
"type": "foreach",
"target": {
"selector": ".loopElement"
},
"action": {}
}
action è l'azione da eseguire per ogni elemento DOM trovato.
Questa azione attende il numero di millisecondi specificato prima di continuare.
Esempio:```json { "type": "wait", "waitTime": 250 }
#### Hide
Questa azione imposta la classe CSS 'ConsentOMatic-CMP-Hider' sulla selezione DOM. Le regole CSS predefinite imposteranno quindi l'opacità a 0 sull'elemento.
Esempio:```json
{
"type": "hide",
"target": {
"selector": ".myHiddenClass"
}
}
Questa azione chiude la scheda corrente, utile per provider di consenso come Evidon, che tende ad aprire nuove schede con il dashboard del consenso all'interno.
Example:```json { "type": "close" }
### Matcher
I Matcher sono utilizzati per verificare la presenza di una selezione DOM, o lo stato di una selezione DOM.
#### CSS
Questo matcher verifica la presenza di una selezione DOM e restituisce una corrispondenza se esiste.
Esempio:```json
{
"type": "css",
"target": {
"selector": ".myMatchingClass"
}
}
Questo matcher verifica lo stato di un <input type='checkbox' /> e restituisce che corrisponde se il checkbox è selezionato.
Esempio:```json { "type": "checkbox", "target": { "selector": ".myInputCheckbox" } }
### Consenso
Questo è ciò che viene utilizzato all'interno delle [Azioni di Consenso](#consent) e definisce il consenso effettivo che l'utente dovrebbe dare o non dare.
Ogni consenso ha un tipo, che corrisponde alle categorie di consenso all'interno di Consent-O-Matic, quindi se un utente ha attivato la prima categoria di consenso su ON, (Tipo A) e il consenso è di tipo "A", allora il consenso sarà abilitato.
Di solito il consenso viene dato tramite un interruttore (toggle) o un insieme di pulsanti on/off. Pertanto `consent` ha un meccanismo per ciascuno di questi casi.
Esempio:```json
{
"type": "A",
"toggleAction": {},
"matcher": {},
"trueAction": {},
"falseAction": {}
}
type è il tipo di categoria di consenso che questa regola definisce e determina se questo consenso deve essere attivo o disattivo in base alla selezione dell'utente per quel tipo di categoria.
toggleAction questa azione viene utilizzata per selezionare il consenso se il popup utilizza un interruttore o uno switch per comunicare il consenso. L'azione verrà eseguita se il matcher indica che il consenso è in uno stato diverso da quello richiesto dall'utente, altrimenti non verrà eseguita.
matcher è il matcher utilizzato per verificare in quale stato si trova il consenso. Per un matcher checkbox, il consenso è dato se la casella è selezionata. Per un matcher CSS, il consenso è dato se il matcher trova una selezione DOM.
trueAction e falseAction sono azioni utilizzate se il consenso deve essere dato premendo uno dei due pulsanti, invece di essere attivato/disattivato. Queste verranno eseguite in base alla selezione del consenso da parte dell'utente. Se l'utente ha dato il consenso per questo tipo di categoria, verrà eseguito trueAction, mentre falseAction verrà eseguito se l'utente non ha dato il consenso a questo tipo di categoria.
Se toggleAction e matcher sono presenti nella configurazione del contenuto, verrà utilizzato toggleAction; se uno di essi manca, verranno utilizzati trueAction/falseAction.
Come visto nelle impostazioni del componente aggiuntivo, nello stesso ordine:
Mettendo tutto insieme, ecco un esempio completo di un CMP "MyCMP" che ha 2 categorie di consenso da attivare/disattivare.```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" } } } ] } }