Salta al contenuto principale

Come rendere compliant un sito web ai sensi del GDPR

Profile picture for user luca77king

Recentemente, alcuni garanti della privacy europei (tra cui quello italiano) si sono espressi in modo negativo nei confronti di Google Analytics. Il motivo è molto semplice: i dati degli utenti raccolti dai siti web europei vengono trasferiti negli Stati Uniti, dove la regolamentazione relativa alla privacy non offre adeguate garanzie per i cittadini della UE.

Il nostro garante della privacy ha sottolineato che non basta anonimizzare gli IP, in quanto Google dispone di una grande quantità di dati e può identificare con facilità qualsiasi utente.

In rete stanno circolando diverse scuole di pensiero. C’è chi dice che con l’avvento di Google Analytics 4 tutti i problemi saranno risolti. Altri invece sono più scettici e consigliano di passare ad un altro servizio similare.

Io mi sono schierato con il secondo gruppo e sto migrando verso Matomo, un servizio molto valido che lo stesso Garante consiglia. Anche la Pubblica Amministrazione utilizza Matomo, una versione che gestisce l’AGID, denominata Web Analytics Italia.

In questo articolo cercheremo di metterci a norma, per dormire sonni tranquilli e anche per tutelare i nostri utenti.

Capire le basi del GDPR

Il Regolamento generale sulla protezione dei dati (GDPR) è una legge dell'UE sulla protezione dei dati entrata in vigore il 25 maggio 2018. Il GDPR sostituisce la Direttiva UE sulla protezione dei dati del 1995, rafforzando le norme dell'UE sulla tutela della privacy e dando alle persone un maggiore controllo sui loro dati personali

Il GDPR ha posto in essere nuovi obblighi per le aziende e le organizzazioni che trattano dati personali. Il GDPR si applica a tutte le aziende che trattano i dati personali dei cittadini dell'UE, indipendentemente dalla loro sede. Ciò include anche le aziende con sede al di fuori dell'UE che trattano i dati personali dei cittadini europei.

Il Regolamento impone alle aziende di ottenere il consenso esplicito delle persone prima di raccogliere, utilizzare o condividere i loro dati personali. Le aziende devono inoltre fornire alle persone informazioni chiare e concise sui loro diritti ai sensi del GDPR e garantire che tali diritti possano essere facilmente esplicati. 

Il GDPR richiede inoltre alle aziende di adottare misure per proteggere i dati personali che raccolgono ed elaborano. Ciò include la garanzia che i dati personali siano accurati e aggiornati e la possibilità di accedere a questi dati quando gli utenti ne richiedeno la correzione e/o la rimozione.

Infine, il GDPR impone nuovi requisiti rigorosi alle aziende che subiscono una violazione dei dati: Le aziende devono notificare alle persone la violazione dei dati entro 72 ore, a meno che la violazione non comporti alcun problema.

L'informativa sulla privacy

Un'informativa sulla privacy è un documento in cui si indica il tipo di dati personali raccolti, si indicano le ragioni e le condizioni di tale raccolta e si spiega come si intende mantenere tali dati riservati.

In sostanza, l'obiettivo dell'informativa sulla privacy è quello di informare gli utenti del sito web sulle modalità di trattamento dei loro dati e di richiamare la loro attenzione su alcuni punti che vedremo in seguito.

Oggi la maggior parte dei Paesi ha leggi sulla protezione dei dati che richiedono che qualsiasi sito web che raccolga dati personali, siano essi commerciali o meno, abbia un'adeguata informativa sulla privacy. Questa informativa deve essere facilmente accessibile agli utenti di Internet e presentata con un linguaggio e una formulazione chiari.

La mancata osservanza di queste nuove regole può comportare multe e persino azioni legali.

Identificare i dati personali che il nostro sito web raccoglie

Il nostro sito web raccoglie una serie di dati personali dagli utenti. Questi possono essere informazioni quali nome, indirizzo, e-mail, numero di telefono e dati della carta di credito. Raccogliamo i dati degli utenti quando essi interagiscono con il nostro sito web, ad esempio quando effettuano un acquisto, si iscrivono a un account o compilano un modulo. 

Per dati personali si intende qualsiasi tipo di informazione che possa essere utilizzata per identificare una persona, come ad esempio nome, indirizzo e-mail, indirizzo postale, indirizzo IP, foto, numero di telefono, ecc.

Oltre a queste informazioni cosiddette "dirette", sono considerati dati personali anche tutti i dati relativi alla religione, al profilo socio-culturale, al reddito o alla salute.

Ma non è tutto. Anche tutti i dati che possono fornire informazioni sul comportamento degli utenti, i cosiddetti cookies, sono nel mirino del GDPR. I cookie sono piccoli files di testo installati dalla pagine web, in grado di tracciare e registrare determinate attività di navigazione degli utenti di Internet e di rendere noto al relativo gestore, ad esempio, dove gli utenti hanno cliccato o quali pagine hanno visitato maggiormente.

L'informativa sulla privacy deve rendere noto al visitatore tutte queste attività. Il documento può essere una pagina web a sé stante, accessibile come link in cima o in fondo alla vostra home page, oppure disponibile nella pagina "Informazioni" del vostro sito web.

L'importante è che le persone possano trovarlo facilmente.

L'informativa sulla privacy è un documento legale, e per questo motivo è sempre meglio consultare un avvocato o un esperto legale nella stesura del testo, soprattutto se il vostro sito web è il vostro strumento di lavoro, in modo che la vostra informativa sulla privacy sia conforme a tutte le leggi vigenti e applicabili e sia irreprensibile.

Questo può sembrare un costo stravagante, soprattutto per una piccola azienda o un blog modesto. Fortunatamente, esistono generatori e modelli di informativa sulla privacy GDPR.

In Internet sono disponibili diversi strumenti, sia gratuiti che a pagamento, che rendono abbastanza semplice la creazione di politiche sulla privacy. Ad esempio possiamo usare questo sito che genera un’informativa in inglese che possiamo facilmente tradurre con Google Translate.

Rivedere l'informativa sulla privacy del tuo sito e apportare le modifiche necessarie

Chiaramente dobbiamo rivedere cosa ha generato il tool, adattando l’informativa alla natura del nostro sito web.
Innanzitutto, assicuriamoci di capire quali sono le informazioni personali che raccogliamo dai nostri utenti. Dovremmo anche essere a conoscenza di eventuali servizi di terze parti che stiamo utilizzando e che potrebbero raccogliere dati per nostro conto.

Poi, decidiamo come utilizzare queste informazioni. Le condivideremo con altre aziende o organizzazioni? Le utilizzeremo per scopi di marketing? Una volta deciso come utilizzeremo i dati, assicuriamoci che tutte queste informazioni siano incluse nella nostra informativa sulla privacy.

Aggiorna i tuoi moduli di contatto per richiedere il consenso degli utenti

I moduli elettronici raccolgono dati, questo è chiaro. Quindi dobbiamo assicurarci che gli utenti, prima di inoltrarci i loro dati, abbiano letto e sottoscritto l’informativa relativa alla privacy. L’implementazione tecnica non è complicata. 

Iniziamo inserendo un input di tipo checkbox in tutti i moduli di contatto, con l’attributo require e nella relativa label inseriamo il link all’informativa. In questo modo il modulo non sarà inviato fino a quando l’utente non metterà la spunta sulla checkbox.

<form action="index.html" method="post">
    <div class="form-group">
     <label>Nome</label>
        <input type="text" class="form-control" name="nome" placeholder="Nome">
    </div>
    <div class="form-group">
        <label>Ho letto e sottoscritto la <a href="/privacy-policy">privacy policy</a></label>
        <input required type="checkbox" name="privacy" value="1">
    </div>
    <button type="submit" class="btn btn-primary">Invia</button>
</form>

Purtroppo non finisce qui. Infatti a carico del gestore del sito web è stata rimesso il cosiddetto "onere della prova". In sostanza, in caso di controversia, dobbiamo dimostrare che l'utente ha effettivamente fornito il consenso. Come si fa? Salvando nel database tale consenso. La tabella deve essere così composta:

Nome campo Tipo campo Descrizione
ip_user int Indirizzo IP dell'utente
url_consent varchar Indirizzo della pagina web dove la raccolta è stata effettuata
server_status_code int Codice http relativo alla transazione
data_volume int Volume del pacchetto dati trasferito (bytes)
browser_user varchar Informazioni sul browser
form_data mediumtext Il codice della form che ha raccolto i dati in quel momento
privacy_policy mediumtext Il riferimento all’informativa privacy di quel momento
created_at timestamp Data e ora della raccolta

Adesso che abbiamo definito la tabella, vediamo come salvarci dentro il consenso dell'utente. Visto che siamo partiti dai moduli, definiamo il sistema per inviare i dati richiesti al database. Nel file dove è presente il modulo inseriamo questo codice javascript:

const forms = document.getElementsByTagName('FORM');
Object.keys(forms).forEach(key => {
    forms[key].addEventListener('submit', function (e) {
        e.preventDefault();
        const data = {form_data: e.target.outerHTML};
        fetch('/proof.php', {
            method: 'POST', // or 'PUT'
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data),
        }).then(async response => {
            const isJson = response.headers.get('content-type')?.includes('application/json');
            const data = isJson ? await response.json() : null;
            if (!response.ok) {
                const error = (data && data.message) || response.status;
                return Promise.reject(error);
            }
            return data
        })
            .then(data => {
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    });
});

Il codice è abbastanza semplice: Intercettiamo tutti i forms presenti nel documento e li cicliamo. Per ogni iterazione associamo un listener in ascolto sull'evento submit. Nella relativa callback inviamo al nostro endpoint il codice completo del modulo.

Attenzione: La mia è un'interpretazione personale! Si chiede di salvare una copia del modulo ed essendo un modulo elettronico non mi è venuta altra idea che salvare tutto il codice HTML che lo compone.

Adesso vediamo il codice PHP che inserisce i dati nel db. Non sto usando alcun framework, quindi parliamo di PHP nativo

<?php
// replace data with your real data
$dsn = "mysql:host=db_host;dbname=db_name";
$user = "db_user";
$passwd = "db_password";
$json_str = file_get_contents('php://input');
// Get as an object
$json_obj = json_decode($json_str, true);
if (!empty($json_obj)) {
    $size = strlen(json_encode($json_str, JSON_NUMERIC_CHECK));
    $pdo = new PDO($dsn, $user, $passwd);
    $pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
    $sql = 'INSERT INTO consents(ip_user, url_consent, server_status_code, data_volume, browser_user, form_data, privacy_policy, created_at) 
            VALUES(INET_ATON(:ip_user), :url_consent, :server_status_code, :data_volume, :browser_user, :form_data, :privacy_policy, :created_at)';
    $statement = $pdo->prepare($sql);
    try {
        $statement->execute([
            ':ip_user' => $_SERVER['REMOTE_ADDR'],
            ':url_consent' => $_SERVER['HTTP_REFERER'],
            ':server_status_code' => 200,
            ':data_volume' => $size,
            ':browser_user' => $_SERVER['HTTP_USER_AGENT'],
            ':form_data' => $json_obj['form_data'] ?? $json_obj,
            ':privacy_policy' => '',
            ':created_at' => date('Y-m-d H:i:s')
        ]);
        http_response_code(200);
        header('Content-Type: application/json; charset=utf-8');
        echo json_encode(['status' => 'success']);
    } catch (\PDOException $e) {
        http_response_code(306);
        header('Content-Type: application/json; charset=utf-8');
        echo json_encode(['status' => 'fail', 'message' => $e->getMessage()]);
    }
    catch (\Exception $e) {
        http_response_code(306);
        header('Content-Type: application/json; charset=utf-8');
        echo json_encode(['status' => 'fail', 'message' => $e->getMessage()]);
    }
}

Qui non c'è molto da spiegare, tranne che PHP non supporta nativamente le FETCH API nei suoi array globali, quindi dobbiamo ottenere il flusso di input dello script e convertirlo in JSON. Per quanto riguarda il valore del campo 'privacy_policy', io l'ho lasciato vuoto in quanto per questo tutorial non avevo predisposto alcuna informativa. Sarà vostra cura recuperare il testo e salvarlo nel database.

Banner informativa e blocco preventivo dei cookies

Altro capitolo spinoso: I cookies. Innanzitutto dobbiamo capire quali tipologie di cookies utilizza il nostro sito web. Per capirlo utilizzeremo un'altro tool, Cookiebot

Image
Cookiebot

Il tool ci manderà il report dopo qualche minuto via email. Sulla base di questo documento potremo intervenire sul nostro sito per ottenere il consenso per l'installazione dei cookies selettiva e con relativo blocco preventivo.

Ma prima di tutto scarichiamo una fantastica libreria da GitHub. La libreria è Cookies JSR e la utilizzo anche io su questo sito.

Installazione libreria Cookies JSR

Scompattiamo l'archivio all'interno del nostro progetto, nel tutorial la collocheremo all'interno della cartella root/vendor/cookiesjsr

I passaggi successivi sono i seguenti

  1. Creare il file cookiesjsr-config.json in cui si definiscono i gruppi e i servizi.
  2. Creare il file cookies_consent.js in cui inizializzare i servizi.
  3. Strutturare il codice HTML della pagina in questo modo
<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" media="screen" href="/vendor/cookiesjsr/dist/cookiesjsr.min.css">
</head>
<body>
<div id="cookiesjsr"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"></script>
<script src="/js/cookies_consent.js"></script>
<script src="/vendor/cookiesjsr/dist/cookiesjsr.min.js"></script>
</body>
</html>

Esempio del file di configurazione

Quello che segue è il JSON di configurazione della libreria. Salvatevelo dove vi pare, facendo poi attenzione ai passaggi successivi quando dovremo richiamarlo dallo script d'inizializzazione. Ma adesso concentriamoci sulla configurazione!

Nel blocco cookie abbiamo definito i parametri del nostro cookie, che ricordo salverà le preferenze dell'utente circa l'uso dei cookies. Importante: ai sensi del GDRP l'utente può modificare le proprie impostazioni in qualsiasi momento. Per fortuna questa libreria ci da questa opzione, l'opzione è definita nel blocco interface alla chiave openSettingsHash.

Sempre in riferimento al blocco cookie, io ho definito l'opzione secure su false perchè in locale non ho impostato il protocollo HTTPS. Sempre per lo stesso motivo è settato il valore di sameSite su Lax, altrimenti non funzionerebbe. In un ambiente con HTTPS, le opzioni andrebbero rispettivamente su true e Strict. Vi lascio un bel articolo di approfondimento sull'argomento: https://it.javascript.info/cookie

{
  "config": {
    "cookie": {
      "name": "cookiesjsr",
      "expires": 31536000000,
      "secure": false,
      "sameSite": "Lax"
    },
    "callback": {
      "url": "/proof.php",
      "method": "POST",
      "headers": {
        "Content-Type": "application/json"
      }
    },
    "interface": {
      "openSettingsHash": "#editCookieSettings",
      "translationQuery": "/vendor/cookiesjsr/lang/%lang_id/translation.json",
      "availableLangs": [
        "en",
        "de",
        "es",
        "fr",
        "it",
        "nl",
        "pl",
        "ru"
      ],
      "defaultLang": "it"
    }
  },
  "services": {
    "default": {
      "id": "default",
      "services": [
      ]
    },
    "analytic": {
      "id": "analytic",
      "services": [
        {
          "key": "gtag",
          "type": "analytic",
          "name": "Google Analytics",
          "uri": "https://support.google.com/analytics/answer/6004245",
          "needConsent": true
        },
        {
          "key": "matomo",
          "type": "analytic",
          "name": "Matomo",
          "uri": "https://matomo.org/docs/privacy/",
          "needConsent": true
        }
      ]
    },
    "video": {
      "id": "video",
      "services": [
        {
          "key": "youtube",
          "type": "video",
          "name": "Youtube",
          "uri": "https://www.youtube.com/intl/ALL_it/howyoutubeworks/user-settings/privacy/",
          "needConsent": true
        }
      ]
    }
  }
}

Nel blocco callback abbiamo definito l'endpoint che salva nel database il consenso dell'utente, mentre nel blocco interface dobbiamo settare il percorso dei files di traduzione e impostare il linguaggio predefinito.

Ora veniamo al blocco dei servizi, oltre al servizio base di default, io ho impostato tre servizi divisi in due blocchi:

  1. Matomo - Cookies Analitici
  2. Google Analytics - Cookies Analitici
  3. Youtube - Cookies video

Ho anche linkato le rispettive informative, ma siccome sono cookies di terze parti e sinceramente non sappiamo le finalità di utilizzo, li bloccheremo tutti preventivamente. E li sbloccheremo solo quando avremo ottenuto il consenso dell'utente.

Inizializzazione libreria Cookies JSR

Creiamo il file /js/cookies_consent.js e strutturiamolo nel modo seguente:

document.cookiesjsr = {
    apiUrl: '',
    configQuery: '/vendor/cookiesjsr/cookiesjsr-config.json'
}

const dispatcher = {
    gtag : {
        activate: function () {

        },
        fallback: function () {

        }
    },
    matomo: {
        activate: function () {

        },
        fallback: function () {

        }
    },
    youtube: {
        activate: function () {

        },
        fallback: function () {

        }
    }
}

document.addEventListener('cookiesjsrUserConsent', function (event) {
    var services = (typeof event.detail.services === 'object') ? event.detail.services : {};
    for (var sid in services) {
        if (typeof dispatcher[sid] === 'object') {
            if (services[sid] === true && typeof dispatcher[sid].activate === 'function') {
                dispatcher[sid].activate();
            } else if (typeof dispatcher[sid].fallback === 'function') {
                dispatcher[sid].fallback();
            }
        }
    }
});

La configurazione di base indica alla libreria dove trovare la configurazione. Se la configurazione viene caricata da un altro dominio, è necessario fornire un apiUrl (in caso contrario, lasciare vuoto).

  • apiUrl:  L'URL di base in cui è possibile raggiungere l'API. Lasciare vuoto se il sito web ha la stessa origine. 
  • configQuery: (obbligatorio) Percorso del file di configurazione (cookiesjsr-config.json)

Nel codice abbiamo intercettato l'evento cookiesjsrUserConsent che viene lanciato sia al load della pagina e sia quando l'utente interagisce con i bottoni del banner. Nella callback abbiamo impostato il flusso per gestire i consensi degli utenti circa l'attivazione dei singoli servizi.

E finalmente vediamo Il contenuto delle funzioni fornite nell'evento dispatcher (activate e fallback).

Per bloccare efficacemente i cookie di terze parti, le risorse devono essere già disattivate nel codice sorgente. Vale a dire che i tag di script o gli iframe corrispondenti (questi sono i casi d'uso più comuni) devono essere manipolati in modo da non funzionare. Matomo e Google Analytics ci vengono incontro, fornendoci indicazioni chiare su come bloccare i cookies prima del consenso, per Youtube andremo a rimuovere l'attributo src dell'iframe. 

La funzione activate() deve riattivare il servizio.

La funzione fallback() deve riparare le lacune nel layout, informare l'utente che manca qualcosa o chiedergli di nuovo se vuole attivare il servizio.

Blocco preventivo dei cookies di Google Analytics

Sebbene vi abbia consigliato di dismettere Google Analytics, vediamo comunque come bloccarne i relativi cookies prima di aver ottenuto il consenso dell’utente.

Di default,  Analytics ci fornisce questo codice da inserire all’interno del tag head

<script async src="https://www.googletagmanager.com/gtag/js?id=PROPERTY-ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'PROPERTY-ID');
</script>

Così facendo vengono installati tutti i cookies al caricamento della pagina. Ma Google ci fornisce anche la documentazione per bloccare l'installazione, facilmente consultabile a questo link. Di seguito il codice che previene l'installazione dei cookies e ci permettere di anonimizzare gli indirizzi IP.

<script async src="https://www.googletagmanager.com/gtag/js?id=PROPERTY-ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('consent', 'default', {
        'ad_storage': 'denied',
        'analytics_storage': 'denied',
        'functionality_storage' : 'denied',
        'personalization_storage' : 'denied',
        'security_storage' : 'denied'
    });
    gtag('js', new Date());
    gtag('config', 'PROPERTY-ID', { 'anonymize_ip': true });
</script>

Perfetto, ora modifichiamo il servizio gtag all'interno del dispatcher nel file cookies-consent.js e gestiamo il metodo activate del servizio, aggiornando le impostazioni di Google Analytics.

gtag : {
    activate: function () {
        gtag('consent', 'update', {
            'ad_storage': 'granted',
            'analytics_storage': 'granted',
            'functionality_storage' : 'granted',
            'personalization_storage' : 'granted',
            'security_storage' : 'granted'
        });
    },
    fallback: function () {

    }
}

Blocco preventivo dei cookies di Matomo

Discorso identico per Matomo. La documentazione relativa al consenso è disponibile qui. Il codice di seguito è già impostato per impedire l'installazione preventiva dei cookies.

<script>
    var _paq = window._paq = window._paq || [];
    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
    _paq.push(['requireCookieConsent']);
    _paq.push(['trackPageView']);
    _paq.push(['enableLinkTracking']);
    (function() {
        var u="//MATOMO-URL/";
        _paq.push(['setTrackerUrl', u+'matomo.php']);
        _paq.push(['setSiteId', '1']);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
    })();
</script>

E nel dispatcher, il servizio si attiva in questo modo.

matomo: {
    activate: function () {
        _paq.push(['rememberCookieConsentGiven']);
    },
    fallback: function () {

    }
}

Blocco preventivo dei cookies di YouTube

Per YouTube non esiste nessuna documentazione, quindi andiamo un pò di fantasia. La gran parte dei cookies di YouTube viene installata nel momento in cui parte la riproduzione del video, quindi in prima istanza avevo pensato di limitarmi ad aggiungere un attributo css che impedisse l'interazione con il player.

Questa soluzione impedisce l'installazione di diversi cookies ma un paio sfuggono al controllo e vengono comunque installati. Successivamente ho provato sempre tramite JavaScript a rimuovere l'attributo src degli iframes per poi ripristinarlo nell'activate del dispatcher.

In questo modo si bloccano tutti i cookies ma il risultato è spannometrico, in quanto una volta ogni tre lo script non fa in tempo ad eseguire l'operazione prima che venga eseguito il render dell'iframe.

Quindi l'unica strada percorribile è eseguire l'operazione sull'attributo src prima che l'ideale venga stampato a video.

Nell'esempio di seguito simuleremo il contenuto di un articolo dinamico come se provenisse dal database e tramite l'ausilio di un'espressione regolare faremo il replace.

$content = '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
<iframe height="463" src="https://www.youtube.com/embed/JvIhGSQeBC8?rel=0" style="position:absolute;top:0;left:0;width:100%;height:100%" width="832"></iframe>';
// Espressione regolare per intercettare i video di YouTube
$pattern_iframe = '#<iframe(?:\b|_).*?(?:\b|_)src=\"(https:)?\/\/www.youtube.com\/(?:\b|_).*?(?:\b|_)iframe>#mi';
preg_match_all($pattern_iframe, $model->content, $iframes, PREG_SET_ORDER);
foreach ($iframes as $iframe) {
        $new_iframe = str_replace('src', 'data-src', $iframe[0]);
        $content = str_replace($iframe[0], $new_iframe, $content);
}

Benissimo, ora torniamo sul file cookies_consent.js e vediamo come impostare la gestione lato client. In primo luogo definiamo in una costante tutti gli iframes presenti nel DOM

const iframes = document.getElementsByTagName("IFRAME");

A questo punto possiamo gestire il dispatcher, impostando nel fallback una nuova classe che tramite CSS possiamo stilizzare come meglio crediamo. Nell'activate sostituiamo l'attributo custom data-src con il classico src e rimuoviamo la classe precedentemente creata.

youtube: {
    activate: function () {
        // Cicliamo tutti gli iframes
        Object.keys(iframes).forEach(key => {
            if(iframes[key].hasAttribute('data-src')) {
                let src = iframes[key].getAttribute('data-src');
                iframes[key].removeAttribute('data-src');
                iframes[key].setAttribute('src', src);
                iframes[key].classList.remove('fallback');
            }
        });
    },
    fallback: function () {
        Object.keys(iframes).forEach(key => {
            if(iframes[key].hasAttribute('data-src') && !iframes[key].classList.contains('fallback')) {
                iframes[key].classList.add('fallback');
            }});
    }
}

Cambiare le preferenze dei cookies

Uno dei punti fondamentali del GDPR è il passaggio in cui si dice che “l’utente deve poter cambiare preferenze con la stessa facilità con cui l’ha fatto la prima volta”. Molto bene, la libreria ci da la possibilità di riproporre il banner in qualsiasi momento.

Nel file cookiesjsr-config.json è presente il parametro openSettingsHash impostato di default su #editCookieSettings. Creando un collegamento nella pagina dell’informativa che punti a #editCookieSettings il banner verrà riproposto e l’utente potrà modificare le proprie preferenze.

Informativa sui cookies

È previsto che l’utente possa consultare le informazioni relative ai singoli cookies, prima di decidere se installarli o meno. Qui il lavoro da fare è tutto di analisi: dovremo reperire in rete le informazioni relative ad ogni singolo cookie che la nostra piattaforma può installare.

La libreria che stiamo utilizzando è già configurata per mostrare le informazioni. I parametri sono nel file di traduzione cookiesjsr/lang/it/translation.json alla voce cookieDocsUri impostata per default a /cookie-documentation.

Dobbiamo creare una rotta che punti a questa risorsa. Vi ho lasciato il link della mia per farvi un’idea di come dovrà essere strutturata la pagina.