Bloccare l'esecuzione di un file JavaScript

Gli scripts sono piccoli pezzi di codice che vengono caricati su una pagina web per aggiungere funzionalità o interattività. Javascript è uno dei linguaggi di scripting più comunemente utilizzati e molti siti web lo utilizzano per fornire un'esperienza utente fluida.

Tuttavia, il javascript può essere utilizzato anche per tracciare le attività dell'utente o per caricare pubblicità su una pagina. Di conseguenza, per essere a norma con il GDPR, dovremmo essere in carico di bloccare l’esecuzione di questi scripts, prima che l’utente ci abbia fornito il consenso. 

Esistono diversi modi per farlo, io vi mostrerò come ho risolto questo problema su Drupal, ma il procedimento è lo stesso per tutte le piattaforme.

Il metodo che ho utilizzato io è cambiare il valore dell’attributo type, se presente. In caso non fosse presente, lo aggiungiamo. Questo attributo indica il tipo di script rappresentato e può avere uno dei seguenti valori:

• Omesso o un tipo MIME JavaScript: Indica che lo script è JavaScript. Le specifiche HTML5 invitano gli sviluppatori a omettere l'attributo piuttosto che fornire un tipo MIME ridondante. Nei browser precedenti, questo attributo identificava il linguaggio di scripting del codice incorporato o importato (tramite l'attributo src). Vi linko i tipi MIME di JavaScript.
• module: Fa sì che il codice venga trattato come un modulo JavaScript. L'elaborazione del contenuto dello script viene differita e gli attributi charset e defer non hanno effetto.  A differenza degli script classici, gli script modulo richiedono l'uso del protocollo CORS per il fetching cross-origin.
• Qualsiasi altro valore: Il contenuto incorporato viene trattato come un blocco di dati che non verrà elaborato dal browser. Gli sviluppatori devono usare un tipo MIME valido che non sia un tipo MIME JavaScript per effettuare il blocco dei dati. L'attributo src sarà ignorato.

Quindi ci basterà valorizzare con un MIMETYPE valido questo attributo, che non sia riconducibile a JavaScript. Ad esempio va benissimo application/json

<script type="application/json" src="script.js"></script>

Ora occupiamoci del problema della riattivazione di questo script. In primo luogo dobbiamo intercettarlo all'interno del DOM e poi ripristinare il MIMETYPE corretto.

  let script = document.querySelector('script[src="script.js"]');
  script.setAttribute('type', 'text/javascript');

Ma questo non è sufficiente per attivarne le funzionalità, in quanto il DOM è già stato elaborato quando il nostro codice entra in azione. Un piccolo trucco per far si che lo script si riattivi completamente, consiste nel rimuovere il suo attributo src, per poi inserirlo nuovamente, aggiungendo un parametro alla fine. 

  let old_src = script.getAttribute('src');
  script.setAttribute('src', '');
  setTimeout(function(){
    script.setAttribute('src', old_src + '?'+new Date().getTime());
  }, 250);

Fatemi sapere nei commenti se questo sistema funziona su tutti i browser, avendolo testato solo su Chrome e Firefox.