astro-cookies

v0.1.6

Published

2 days ago

Enkel, GDPR-tilpasset cookie-consent-løsning. Astro-integrasjon + frittstående plugin som virker på hvilken som helst Astro- eller Emdash-side.

0High
0Medium
0Low

montageas

astro astro-integration astro-component cookie-consent gdpr emdash

Astro Cookies 🍪

Enkel, rammeverksuavhengig cookie-samtykke-løsning. Bygget som en Astro-integrasjon, men kjerne-motoren er ren vanilla JavaScript uten avhengigheter — derfor kan den også installeres som en plugin på Emdash-baserte sider, eller på hvilken som helst annen nettside, uten Astro eller noe byggesteg.

Målet er å dekke de tekniske kravene i GDPR/ePersonvernforordningen og norsk ekomlov (§ 2-7b) uten å bli en tung, komplisert løsning å installere eller bruke.

Ikke juridisk rådgivning. Verktøyet implementerer det som i dag regnes som beste praksis (se sjekkliste nederst), men om nettsiden din faktisk er 100 % compliant avhenger også av hvordan du konfigurerer den — hvilke scripts/embeds du faktisk merker som "gated", og at personvernerklæringen din er korrekt og fullstendig. Ingen automatisk plugin kan garantere det uavhengig av bruk.

Hvorfor to installasjonsmåter?

Astro-integrasjonen og Emdash/standalone-scriptet er samme kjerne-fil (src/runtime.js). Astro-integrasjonen injiserer den automatisk på alle sider. På Emdash (eller enhver annen side) limer du inn samme fil som en vanlig <script>-tag. Ingen kompilering, ingen rammeverk-krav.

Installasjon — Astro

npm install astro-cookies

Nye versjoner hentes med vanlig npm update (semver-styrt).

// astro.config.mjs
import { defineConfig } from 'astro/config';
import astroCookies from 'astro-cookies';

export default defineConfig({
  integrations: [
    astroCookies({
      privacyUrl: '/personvern',
      googleConsentMode: true // valgfritt, se under
    })
  ]
});

Det er alt — banneret vises automatisk på alle sider. Vil du legge en "Endre samtykke"-lenke i footeren:

---
import CookieConsent from 'astro-cookies/component';
---
<CookieConsent text="Informasjonskapsler" />

Installasjon — Emdash (eller enhver annen side)

Hotlink kjerne-scriptet fra jsDelivr. Med flytende versjon @0 får sidene automatisk alle nye 0.x-versjoner (compliance- og feilrettinger) uten at noen må røre dem — det er anbefalt oppsett:

<script>
  window.astroCookiesConfig = {
    privacyUrl: '/personvern',
    googleConsentMode: true
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/astro-cookies@0/src/runtime.js" defer></script>

Vil du heller ha full kontroll, pinn eksakt versjon (@0.1.0) — da skjer ingen oppdatering før du endrer tallet selv. (jsDelivr cacher flytende versjoner i inntil ca. 12 timer, så utrulling av nye versjoner er ikke øyeblikkelig.)

Alternativt, uten CDN: kopier src/runtime.js til Emdash-sidens statiske filer og last den derfra — helst tidlig i <head>, før andre tredjeparts-scripts. Da må filen oppdateres manuelt.

<script>
  window.astroCookiesConfig = {
    privacyUrl: '/personvern',
    googleConsentMode: true
  };
</script>
<script src="/astro-cookies/runtime.js" defer></script>

Det er alt som skal til for at pluginen fungerer på en Emdash-side — den er ikke avhengig av Astro i det hele tatt, kun av at scriptet lastes.

Blokkere scripts til samtykke er gitt

Dette er selve kjernen i GDPR/ePrivacy-kravet: tredjeparts-scripts skal ikke kjøre før bruker har samtykket til riktig kategori. Merk scriptet slik i stedet for vanlig <script src="...">:

<script type="text/plain" data-cookie-category="statistics" src="https://analytics.example.com/script.js"></script>

Inline-scripts fungerer på samme måte:

<script type="text/plain" data-cookie-category="marketing">
  console.log('kjører først etter samtykke til markedsføring');
</script>

Tredjeparts-embeds (YouTube, Google Maps, sosiale widgets)

Iframer setter ofte cookies helt uavhengig av siden for øvrig — et vanlig hull i enklere løsninger. Gate dem på samme måte:

<iframe
  data-cookie-category="marketing"
  data-cookie-src="https://www.youtube.com/embed/xxxxx"
></iframe>

src settes først når riktig kategori er godtatt.

Konfigurasjon

astroCookies({
  language: 'nb',                // settes som lang-attributt på banner/knapp (skjermlesere)
  position: 'bottom-left',      // bottom-left | bottom-right | bottom | top
  theme: 'auto',                 // auto (følger prefers-color-scheme) | light | dark
  privacyUrl: '/personvern',
  consentDurationDays: 180,      // hvor lenge et samtykke er gyldig før ny spørring
  googleConsentMode: false,      // se under
  excludePaths: ['/_emdash'],    // sti-prefikser uten samtykke-UI (admin, innlogging);
                                 // gitt samtykke håndheves fortsatt der
  settingsButton: 'label',       // 'label' (🍪 + tekst) | 'icon' (🍪 i rund knapp)
                                 // | 'emoji' (bare 🍪; flate og ramme tones inn
                                 // ved hover/fokus) | 'none'.
                                 // GDPR krever ikke tekst — men velger du 'none', MÅ
                                 // siden ha egen gjenåpne-mulighet (footer-lenke via
                                 // komponenten eller astroCookies.open())
  categories: [ /* se DEFAULT_CATEGORIES i src/runtime.js for format */ ],
  texts: { /* overstyr enkelttekster, se DEFAULT_TEXTS i src/runtime.js */ }
})

Google Consent Mode v2

Bruker du Google Analytics/Ads/GTM, sett googleConsentMode: true. Da settes alle signaler til denied som standard (før noe lastes), og oppdateres automatisk når brukeren tar et valg — i tråd med Googles krav for EØS-trafikk fra mars 2024.

Viktig om rekkefølge: denied-standarden må registreres før gtag.js/GTM lastes for at Google skal respektere den. Med Astro-integrasjonen er dette automatisk så lenge GTM-scriptet ditt er gated med data-cookie-category (anbefalt). Laster du GTM ugated som <script async> i <head>, må runtime-scriptet ligge før det i dokumentet.

Merk: Consent Mode-oppdateringene er koblet til standard-kategori-id-ene statistics (→ analytics_storage), marketing (→ ad_storage m.fl.) og functional (→ functionality_storage m.fl.). Definerer du egne categories med andre id-er, må du beholde disse tre id-ene for at Consent Mode skal virke.

JavaScript-API og hendelser

window.astroCookies.open();        // åpner innstillingspanelet
window.astroCookies.getConsent();  // { necessary: true, statistics: false, ... } eller null

// Reager på samtykke-endringer (fyres også ved sidelasting med lagret samtykke):
window.addEventListener('astro-cookies:consent', (e) => {
  if (e.detail.statistics) { /* ... */ }
});

Tilbaketrekking: Hvis brukeren skrur av en kategori som allerede har fått scripts aktivert i inneværende sidevisning, lastes siden automatisk på nytt. Et script som alt kjører kan ikke stoppes med JS — reload er eneste måten å faktisk etterleve tilbaketrekkingen på (GDPR art. 7 nr. 3).

Universell utforming

Banneret er bygget for å oppfylle WCAG-kravene i den norske uu-forskriften: alle kontroller er tastaturtilgjengelige, kategori-brytere har tilgjengelige navn, panelet får fokus når det åpnes, Escape lukker innstillingene (når et gyldig samtykke finnes), og fargekontrastene oppfyller AA i både lys og mørk modus.

Sjekkliste — hva løses automatisk vs. hva er ditt ansvar

Håndteres automatisk av Astro Cookies:

Ingen ikke-nødvendige scripts/embeds kjører før eksplisitt samtykke (opt-in, ikke opt-out)
Granulære kategorier — ikke alt-eller-ingenting
Ingen forhåndsavkryssede valg
"Avvis alle" og "Godta alle" er like store og like lette å velge, ett klikk, på første lag (ikke gjemt i undermeny — dette er nøyaktig mønsteret Datatilsynet/CNIL/EDPB har slått ned på)
Ingen implisitt samtykke via skrolling eller fortsatt bruk — krever aktiv handling
Klar, lagdelt informasjon + lenke til personvernerklæring
Samtykke tidsstemples og lagres med metode (godta alle/avvis alle/tilpasset), og spørres på nytt automatisk etter utløpt frist (standard 6 måneder)
Like lett å trekke tilbake som å gi — vedvarende knapp for å endre valg når som helst

Ditt ansvar (kan ikke løses generisk av et verktøy):

En oppdatert og korrekt oversikt over hvilke cookies som faktisk settes, av hvem, formål og varighet — og at de er merket med riktig data-cookie-category
En publisert personvernerklæring: behandlingsansvarlig, rettslig grunnlag, lagringstid, brukerrettigheter, og ev. overføring til tredjeland (f.eks. amerikanske tjenester) med gyldig overføringsgrunnlag (SCC)
Faktisk å merke alle ikke-nødvendige scripts og embeds — pluginen kan ikke oppdage scripts den ikke vet om
Ikke laste sporingspiksler (Meta Pixel, TikTok Pixel osv.) utenfor det gatede mønsteret
Om siden retter seg mot barn, gjelder strengere regler (GDPR art. 8) som ikke er dekket her
Server-side bevis for samtykke om du trenger det ved tilsyn — dette lagrer kun klient-side (localStorage), som er vanlig praksis for de fleste nettsider, men ikke verifiserbart av en tredjepart i ettertid

Utvikling

npm install
npm run dev   # starter demo-siten i demo/ på http://localhost:4321