Bloker scripts fra tredjepart med nogle få linjer med Javascript

Sådan forhindres scripts fra tredjepart i at indsamle data, sende analyser og mere uden brugerens samtykke.

Ansvarsfraskrivelse: Denne artikel handler om at blokere scripts, der vides at være sikre, som analyser - hvilket betyder scripts fra tredjeparts tjenester, som du inkluderer på egen hånd. For at blokere ondsindede uønskede tredjeparts-scripts eller forhindre Cross Site Scripting-angreb, skal du altid overveje at bruge andre løsninger, f.eks. At tilføje en Content-Security-Policy-overskrift!
Beder om brugertilladelse - uden sporing forud for tiden.

Konteksten

Her på Snips tager vi privatliv meget alvorligt. Nu hvor GDPR er i kraft, har vi besluttet, at vores ejede websteder aldrig skulle indsamle analyser af besøgende brugere - medmindre de tilmelder sig frivilligt.

Desværre kan blokering af tredjepartsanalyse være en smule vanskeligt. Problemet er, at disse tjenester er bygget til at starte med det samme, og at de er afhængige af små, minificerede kodestykker og script-tags. Du kan selv prøve at ændre den minificerede kode, men den bliver lidt rodet og vanskelig at vedligeholde, især hvis du bruger flere biblioteker.

Så for at håndtere dette bedre - automatisk - oprettede vi et lille open source-bibliotek kaldet Yett (interessant betydning), der tager sig af at blokere udførelsen af ​​analytiske scripts. Biblioteket giver dig også mulighed for senere at fjerne blokering af disse scripts, når en bruger har tilmeldt sig.

At blokere scripts automatisk kan virke trivielt - men det er faktisk ikke så let at blokere inline script-tags!

Så mens vi grave ind i emnet, fandt vi nogle tekniske finesser, som vi syntes, det ville være rart at dele med samfundet .

Målet

Her er kravene:

  • Koden skal indlæses og udføres synkront før ethvert andet script;
  • På dette tidspunkt har du ingen anelse om, hvordan den endelige html vil se ud, da dokumentet endnu ikke er indlæst fuldt.
  • De blokerede scripts må ikke ændres på nogen måde (målet er at forhindre dem i at udføre uden at røre ved deres egen kode);
  • Vi skulle være i stand til (til sidst) at fjerne blokering af scripts programmatisk senere.

Nedenfor viser vi et par teknikker, der faktisk fungerer.

Grundarbejde - Brug af en MutationObserver til at observere indsættelse af scriptelementer

MutationObserver er praktisk i dette tilfælde, da du kan registrere observatøren på dokumentelementet på forhånd og blive underrettet, når DOM-noder indsættes, især script-noder.

Dette alene er selvfølgelig ikke tilstrækkeligt, men det vil være det første skridt mod vores mål.

Forhindrer, at et