Kolmansien osapuolten skriptien estäminen suostumukseen asti

Kun haluat estää kolmansien osapuolten skriptit suostumukseen asti, toimita ne muodossa, jota selain ei suorita, kuten <script>-tagina, jonka tyyppi on type="text/plain", ja aktivoi ne vasta, kun kävijä on hyväksynyt vastaavan kategorian. Sovella samaa sääntöä inline-koodinpätkiin, iframeihin, seurantapikseleihin ja tagienhallinnan tageihin, ja varmista toimivuus puhtaassa selaimessa ennen kuin klikkaat mitään.

Miksi kolmansien osapuolten skriptien on odotettava suostumusta?

Koska useimmat niistä tallentavat tai lukevat tietoja kävijän laitteelta heti suorituessaan, ja EU:ssa se edellyttää ennakkosuostumusta. ePrivacy-direktiivin 5 artiklan 3 kohta edellyttää suostumusta tietojen tallentamiseen laitteelle tai niihin pääsyyn, ellei se ole ehdottoman välttämätöntä käyttäjän nimenomaisesti pyytämän palvelun kannalta.

Analytiikka-, mainos-, some- ja monet upotusskriptit asettavat evästeitä, lukevat selaimen tallennustilaa tai keräävät laitteen ominaisuuksia heti suorituessaan. Planet49-tapauksessa (C-673/17) EU:n tuomioistuin vahvisti, että sääntöä sovelletaan riippumatta siitä, ovatko tiedot henkilötietoja, ja että valmiiksi rastitetut ruudut eivät ole pätevä suostumus. Banneri, joka ilmestyy seurantatyökalujen ollessa jo käynnissä, ei täytä tätä vaatimusta.

Palvelun kannalta aidosti tarpeelliset skriptit, kuten maksu, petostentorjunta tai itse suostumustyökalu, voivat latautua normaalisti; katso mikä lasketaan välttämättömäksi evästeeksi.

Miten skriptit estetään ennen suostumusta?

Vaihda niiden type. Selaimet lataavat ja suorittavat vain skriptit, joiden type on JavaScript-tyyppi tai module; text/plain-merkittyä skriptiä käsitellään passiivisena datana. Säilytä alkuperäiset määritteet ja lisää kategoria, jotta suostumuskoodisi tietää, mitä aktivoida.

<!-- Passiivisia: selain ei lataa eikä suorita näitä -->
<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>

<!-- Upotukset: pidä todellinen URL data-src-määritteessä suostumukseen asti -->
<iframe data-consent="marketing"
        data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        title="Tuote-esittely" width="560" height="315"></iframe>

Poista <noscript>-kuvavarakeinot, jotka sisältyvät moniin toimittajien koodinpätkiin. Ne lähettävät pyynnön, kun JavaScript on poistettu käytöstä, eli juuri silloin, kun bannerisi ei voi näkyä, joten niitä ei voi mitenkään pidätellä.

Miten estetyt skriptit aktivoidaan suostumuksen jälkeen?

Korvaa jokainen passiivinen skripti uudella <script>-elementillä. Olemassa olevan elementin type-määritteen muuttaminen ei saa selainta suorittamaan sitä, eikä innerHTML-ominaisuuden kautta lisättyjä skriptejä koskaan suoriteta, joten tarvitset document.createElement-kutsulla luodun uuden elementin.

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; // säilytä lisäysjärjestys
      live.text = inert.text; // mahdollinen inline-koodi
      inert.replaceWith(live);
    });

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

// Sovella tallennettu valinta latauksen yhteydessä; kutsu activate() uudelleen bannerisi käsittelijöistä.
for (const [category, granted] of Object.entries(readStoredConsent())) {
  if (granted) activate(category);
}

Kolme yksityiskohtaa saa monet kompastumaan:

• Järjestys. JavaScriptillä lisätyt ulkoiset skriptit suoritetaan oletuksena asynkronisesti siinä järjestyksessä, jossa niiden lataus valmistuu. Asetus async = false saa ne suorittumaan lisäysjärjestyksessä, millä on merkitystä, kun kirjasto riippuu toisesta.
• Inline-koodinpätkät suoritetaan heti. Inline-skripti suoritetaan heti, kun se lisätään, odottamatta ulkoisia skriptejä. Useimmat toimittajien koodinpätkät asettavat kutsunsa jonoon, kunnes kirjasto latautuu, mutta tarkista kaikki omat koodisi, jotka olettavat kirjaston olevan jo paikalla.
• document.write(). Sitä kutsuvat vanhat koodinpätkät eivät toimi, kun sivu on jo latautunut. Korvaa ne toimittajan asynkronisella koodinpätkällä.

Mitä estomenetelmää kannattaa käyttää?

Useimmat sivustot yhdistävät useita menetelmiä sen mukaan, missä kukin tagi sijaitsee.

Menetelmä	Sopii parhaiten	Huomioitavaa
Passiiviset text/plain-tagit	Pohjiin kovakoodatut tagit	Jokaista tagia on muokattava; suoritusjärjestys
Suostumuksen huomioiva lataaja omassa koodissa	SPA:t ja npm:stä asennetut SDK:t	SDK:t, jotka alustuvat heti tuonnin yhteydessä
Tagienhallinnan suostumusasetukset	Tiimit, jotka hallitsevat tageja tagienhallintajärjestelmässä	Jokainen tagi tarvitsee oikean suostumusvaatimuksen
Automaattinen esto	Suuret vanhat sivustot, joilla on paljon kovakoodattuja tageja	Ladattava ensimmäisenä synkronisesti; voi ohittaa tai rikkoa skriptejä
Iframe-paikkamerkit	Video-, kartta- ja someupotukset	Paikkamerkin on kerrottava, mitä lataaminen tarkoittaa

npm:stä asennetut kirjastot eivät koskaan näy script-tageina, joten portinvartijana toimii oma koodisi. Kutsu SDK:n init()-funktiota vasta suostumuksen jälkeen ja lataa se dynaamisella import()-kutsulla, jotta sitä ei edes ladata etukäteen. Tätä mallia ja kesken istunnon muuttuvien valintojen käsittelyä käsitellään artikkelissa evästesuostumuksen käsittely yhden sivun sovelluksissa.

Google-tageille on lisävaihtoehto. Google Consent Moden avulla tagit voivat latautua ennen suostumusta ja mukauttaa toimintaansa suostumussignaalien mukaan sen sijaan, että ne estettäisiin. Sopiiko tämä riskinottohalukkuuteesi, on erillinen päätös; katso Consent Moden perustila vs. edistynyt tila.

Miten varmistan, että esto toimii?

Testaa kuin ensikertalainen kävijä ja tarkista, mitä verkossa ja tallennustilassa todella tapahtuu:

1. Avaa sivusto uudessa yksityisessä ikkunassa alueelta, jolla bannerisi näytetään.
2. Avaa DevTools ennen kuin klikkaat mitään ja tarkista Network-paneeli. Analytiikka- tai mainosverkkotunnuksiin ei pitäisi lähteä pyyntöjä, ellet ole tietoisesti valinnut ratkaisua, joka lähettää niitä.
3. Tarkista Application-paneelista evästeet, local storage ja session storage. Vain ehdottoman välttämättömiä merkintöjä pitäisi olla.
4. Klikkaa ”Hylkää kaikki” ja varmista, ettei mitään uutta ladata tai tallenneta.
5. Hyväksy uudessa istunnossa yksi kategoria kerrallaan ja varmista, että vain sen skriptit ja upotukset latautuvat.
6. Toista jokaisen tagin lisäävän julkaisun jälkeen ja tee säännöllisesti evästekartoitus, jotta löydät julkaisuprosessin ulkopuolella lisätyt tagit.

Yhteenveto

Estämisessä on kyse suorittamisesta, ei vain evästeistä: heti kun muu kuin välttämätön skripti suoritetaan, se voi tallentaa tai lukea tietoja ennen kuin kukaan on antanut lupaa. Toimita tagit passiivisina, aktivoi ne kategorioittain hyväksynnän jälkeen, pidättele upotuksia ja SDK:ita samalla tavalla ja testaa puhtaassa selaimessa. Cookieshin kaltaiset työkalut voivat automatisoida aktivointivaiheen ja suorittaa merkinnällä type="text/plain" data-cookiesh="analytics" varustetut skriptit vasta, kun kävijä on hyväksynyt kyseisen kategorian.

Tämä artikkeli on yleistä tietoa eikä oikeudellista neuvontaa. Kun teet omaa tilannettasi koskevia päätöksiä, käänny pätevän tietosuoja-asiantuntijan puoleen.