Come bloccare gli script di terze parti fino al consenso

Per bloccare gli script di terze parti fino al consenso, pubblicali in una forma che il browser non esegue, ad esempio un tag <script> con type="text/plain", e attivali solo dopo che il visitatore ha acconsentito alla categoria corrispondente. Applica la stessa regola a snippet inline, iframe, pixel di tracciamento e tag dei tag manager, poi verificala in un browser pulito prima di fare clic su qualsiasi cosa.

Perché gli script di terze parti devono attendere il consenso?

Perché la maggior parte di essi archivia o legge informazioni sul dispositivo del visitatore nel momento stesso in cui viene eseguita, e nell’UE questo richiede un consenso preventivo. L’articolo 5, paragrafo 3, della direttiva ePrivacy richiede il consenso per archiviare informazioni su un dispositivo o accedervi, salvo che ciò sia strettamente necessario per un servizio esplicitamente richiesto dall’utente.

Gli script di analisi, pubblicitari, social e molti script di embed impostano cookie, leggono lo storage del browser o raccolgono caratteristiche del dispositivo non appena vengono eseguiti. Nella sentenza Planet49 (C-673/17), la Corte di giustizia dell’UE ha confermato che la regola si applica indipendentemente dal fatto che le informazioni siano dati personali e che le caselle preselezionate non costituiscono un consenso valido. Un banner che compare quando i tracker sono già in esecuzione non rispetta questo standard.

Gli script davvero necessari per il servizio, come quelli per i pagamenti, la prevenzione delle frodi o lo strumento di consenso stesso, possono essere caricati normalmente; leggi che cosa si intende per cookie strettamente necessario.

Come blocco gli script prima del consenso?

Cambia il loro type. I browser scaricano ed eseguono solo gli script il cui type è un tipo JavaScript o module; uno script contrassegnato come text/plain viene trattato come dati inerti. Mantieni gli attributi originali e aggiungi una categoria, così il tuo codice di consenso sa che cosa attivare.

<!-- Inerti: il browser non li scarica né li esegue -->
<script type="text/plain" data-consent="analytics"
        src="https://analytics.example.com/script.js"></script>

<script type="text/plain" data-consent="marketing">
  window.adPixel = window.adPixel || [];
  window.adPixel.push(['init', 'PIXEL_ID']);
</script>

<!-- Embed: tieni l'URL reale in data-src fino al consenso -->
<iframe data-consent="marketing"
        data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        title="Demo del prodotto" width="560" height="315"></iframe>

Rimuovi i fallback con immagine in <noscript> inclusi in molti snippet dei fornitori. Inviano una richiesta quando JavaScript è disattivato, cioè proprio quando il tuo banner non può comparire, quindi non c’è modo di bloccarli.

Come attivo gli script bloccati dopo il consenso?

Sostituisci ogni script inerte con un nuovo elemento <script>. Modificare l’attributo type di un elemento esistente non fa sì che il browser lo esegua, e gli script aggiunti tramite innerHTML non vengono mai eseguiti, quindi ti serve un nuovo elemento creato con document.createElement.

function activate(category) {
  document
    .querySelectorAll(`script[type="text/plain"][data-consent="${category}"]`)
    .forEach((inert) => {
      const live = document.createElement('script');
      for (const { name, value } of inert.attributes) {
        if (name !== 'type') live.setAttribute(name, value);
      }
      if (!inert.hasAttribute('async')) live.async = false; // mantiene l'ordine di inserimento
      live.text = inert.text; // codice inline, se presente
      inert.replaceWith(live);
    });

  document
    .querySelectorAll(`iframe[data-consent="${category}"][data-src]`)
    .forEach((frame) => { frame.src = frame.dataset.src; });
}

// Applica la scelta memorizzata al caricamento; richiama activate() dagli handler del banner.
for (const [category, granted] of Object.entries(readStoredConsent())) {
  if (granted) activate(category);
}

Tre dettagli mettono spesso in difficoltà:

• Ordine. Gli script esterni inseriti tramite JavaScript vengono eseguiti in modo asincrono per impostazione predefinita, nell’ordine in cui terminano il download. Impostare async = false li fa eseguire nell’ordine di inserimento, il che conta quando una libreria dipende da un’altra.
• Gli snippet inline vengono eseguiti subito. Uno script inline viene eseguito non appena viene inserito, senza attendere gli script esterni. La maggior parte degli snippet dei fornitori mette in coda le chiamate finché la libreria non è caricata, ma controlla qualsiasi codice personalizzato che dia per scontata la presenza di una libreria.
• document.write(). I vecchi snippet che lo chiamano non funzionano una volta caricata la pagina. Sostituiscili con lo snippet asincrono del fornitore.

Quale metodo di blocco devo usare?

La maggior parte dei siti combina più metodi, scelti in base a dove si trova ciascun tag.

Metodo	Ideale per	Attenzione a
Tag text/plain inerti	Tag inseriti direttamente nei template	Ogni tag va modificato; ordine di esecuzione
Loader che tiene conto del consenso nel tuo codice	SPA e SDK installati da npm	SDK che si inizializzano non appena vengono importati
Impostazioni di consenso del tag manager	Team che gestiscono i tag in un tag manager	Ogni tag richiede il corretto requisito di consenso
Blocco automatico	Grandi siti legacy con molti tag inseriti direttamente	Deve caricarsi per primo in modo sincrono; può non intercettare o danneggiare alcuni script
Placeholder per iframe	Video, mappe ed embed social	Il placeholder deve spiegare che cosa comporta il caricamento

Le librerie installate da npm non compaiono mai come tag script, quindi il blocco spetta al tuo codice. Chiama init() dell’SDK solo dopo il consenso e caricalo con un import() dinamico, così non viene nemmeno scaricato prima. Questo modello, insieme alla gestione delle scelte che cambiano durante la sessione, è illustrato in gestire il consenso nelle single-page app.

I tag Google hanno un’opzione in più. Con Google Consent Mode, i tag possono caricarsi prima del consenso e adattare il loro comportamento ai segnali di consenso invece di essere bloccati. Se questa configurazione sia compatibile con la tua propensione al rischio è una decisione separata; leggi Consent Mode di base e avanzato a confronto.

Come verifico che il blocco funzioni?

Testa come un visitatore alla prima visita e controlla che cosa accade realmente sulla rete e nello storage:

1. Apri il sito in una nuova finestra privata, da un’area geografica in cui il tuo banner viene mostrato.
2. Prima di fare clic su qualsiasi cosa, apri DevTools e controlla il pannello Network. Non dovrebbero esserci richieste verso domini di analisi o pubblicitari, a meno che tu non abbia scelto deliberatamente una configurazione che le invia.
3. Nel pannello Application, controlla cookie, local storage e session storage. Dovrebbero esserci solo voci strettamente necessarie.
4. Fai clic su “Rifiuta tutto” e verifica che non venga caricato né memorizzato nulla di nuovo.
5. In una nuova sessione, accetta una categoria alla volta e verifica che vengano caricati solo i relativi script ed embed.
6. Ripeti il test a ogni rilascio che aggiunge un tag ed esegui periodicamente un audit dei cookie per individuare i tag aggiunti al di fuori del processo di rilascio.

In sintesi

Bloccare significa impedire l’esecuzione, non solo i cookie: una volta in esecuzione, uno script non essenziale può archiviare o leggere dati prima che qualcuno abbia acconsentito. Pubblica i tag in forma inerte, attivali per categoria dopo un opt-in, blocca allo stesso modo embed e SDK e testa in un browser pulito. Strumenti come Cookiesh possono automatizzare la fase di attivazione, eseguendo gli script contrassegnati con type="text/plain" data-cookiesh="analytics" solo dopo che il visitatore ha acconsentito a quella categoria.

Questo articolo ha carattere puramente informativo e non costituisce consulenza legale. Per decisioni relative alla tua situazione specifica, rivolgiti a un professionista qualificato in materia di privacy.