From da8bba2a1c9547c831bbad88b6683a28d5ed1d62 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 1 Oct 2026 09:53:59 +0000 Subject: [PATCH] Analytics: Banner-Skript Review-Fixes (R8/R9, Tab-Widerruf) Co-Authored-By: Claude Sonnet 5.5 --- analytics/client/core.js | 40 ++++------- analytics/client/dist/h.js | 46 +++++------- analytics/client/dist/w.js | 104 ++++++++++++++------------- analytics/client/h.js | 7 +- analytics/client/w.js | 64 +++++++++++------ analytics/test/client.test.js | 130 +++++++++++++++++++++++++++------- 6 files changed, 239 insertions(+), 152 deletions(-) diff --git a/analytics/client/core.js b/analytics/client/core.js index bf8d174..1736666 100644 --- a/analytics/client/core.js +++ b/analytics/client/core.js @@ -13,9 +13,12 @@ export function vpClass(width) { export function cleanPath(href) { let p = '/'; - try { - p = new URL(String(href == null ? '' : href), 'http://x.invalid/').pathname || '/'; - } catch (e) { /* bleibt '/' */ } + const h = String(href == null ? '' : href); + if (h.charAt(0) === '/') { + p = h.replace(/[?#].*$/, '') || '/'; // wie location.pathname, auch '//foo' + } else { + try { p = new URL(h, 'http://x.invalid/').pathname || '/'; } catch (e) { /* bleibt '/' */ } + } try { p = decodeURIComponent(p); } catch (e) { /* kaputtes Encoding: roh lassen */ } if (p.charAt(0) !== '/') p = '/' + p; return p.slice(0, 300); @@ -34,32 +37,19 @@ export function refHost(referrer, ownHost) { } catch (e) { return ''; } } -// Erzeugt wirkende Namen (css-1a2b3c, ember12345, 9f8e7d6c5b4a ...) erkennen. -function looksGenerated(s) { - if (/\d{4,}/.test(s)) return true; - const mixed = (t, min) => t.length >= min && /\d/.test(t) && /[a-z]/i.test(t); - if (mixed(s, 10) && !/[-_]/.test(s)) return true; - if (/^[a-f0-9]{8,}$/i.test(s) && /\d/.test(s)) return true; - return s.split(/[-_]/).some((p) => mixed(p, 6)); -} - -const safeName = (s) => String(s).replace(/[^\w-]/g, ''); - +// Nur Tag-Namen mit :nth-of-type, keine IDs/Klassen (koennten personenbezogene Texte enthalten). export function cssPath(el) { const parts = []; let n = el; - while (n && n.tagName && parts.length < 5) { - const tag = String(n.tagName).toLowerCase(); - let seg = tag; - const id = n.id ? safeName(n.id) : ''; - if (id && !looksGenerated(id)) { - parts.unshift(seg + '#' + id); - break; + while (n && n.tagName && parts.length < 6) { + const tag = String(n.tagName).toLowerCase().replace(/[^a-z0-9-]/g, ''); + if (!tag) break; + let idx = 1; + for (let s = n.previousElementSibling; s; s = s.previousElementSibling) { + if (String(s.tagName).toLowerCase() === String(n.tagName).toLowerCase()) idx++; } - const raw = n.getAttribute ? n.getAttribute('class') : ''; - const cls = String(raw || '').split(/\s+/).map(safeName).filter((c) => c && !looksGenerated(c)).slice(0, 2); - if (cls.length) seg += '.' + cls.join('.'); - parts.unshift(seg); + parts.unshift(tag + ':nth-of-type(' + idx + ')'); + if (tag === 'body' || tag === 'html') break; n = n.parentNode; } let out = parts.join(' > '); diff --git a/analytics/client/dist/h.js b/analytics/client/dist/h.js index 8a7fcf2..ea725df 100644 --- a/analytics/client/dist/h.js +++ b/analytics/client/dist/h.js @@ -16,9 +16,12 @@ function vpClass(width) { function cleanPath(href) { let p = '/'; - try { - p = new URL(String(href == null ? '' : href), 'http://x.invalid/').pathname || '/'; - } catch (e) { /* bleibt '/' */ } + const h = String(href == null ? '' : href); + if (h.charAt(0) === '/') { + p = h.replace(/[?#].*$/, '') || '/'; // wie location.pathname, auch '//foo' + } else { + try { p = new URL(h, 'http://x.invalid/').pathname || '/'; } catch (e) { /* bleibt '/' */ } + } try { p = decodeURIComponent(p); } catch (e) { /* kaputtes Encoding: roh lassen */ } if (p.charAt(0) !== '/') p = '/' + p; return p.slice(0, 300); @@ -37,32 +40,19 @@ function refHost(referrer, ownHost) { } catch (e) { return ''; } } -// Erzeugt wirkende Namen (css-1a2b3c, ember12345, 9f8e7d6c5b4a ...) erkennen. -function looksGenerated(s) { - if (/\d{4,}/.test(s)) return true; - const mixed = (t, min) => t.length >= min && /\d/.test(t) && /[a-z]/i.test(t); - if (mixed(s, 10) && !/[-_]/.test(s)) return true; - if (/^[a-f0-9]{8,}$/i.test(s) && /\d/.test(s)) return true; - return s.split(/[-_]/).some((p) => mixed(p, 6)); -} - -const safeName = (s) => String(s).replace(/[^\w-]/g, ''); - +// Nur Tag-Namen mit :nth-of-type, keine IDs/Klassen (koennten personenbezogene Texte enthalten). function cssPath(el) { const parts = []; let n = el; - while (n && n.tagName && parts.length < 5) { - const tag = String(n.tagName).toLowerCase(); - let seg = tag; - const id = n.id ? safeName(n.id) : ''; - if (id && !looksGenerated(id)) { - parts.unshift(seg + '#' + id); - break; + while (n && n.tagName && parts.length < 6) { + const tag = String(n.tagName).toLowerCase().replace(/[^a-z0-9-]/g, ''); + if (!tag) break; + let idx = 1; + for (let s = n.previousElementSibling; s; s = s.previousElementSibling) { + if (String(s.tagName).toLowerCase() === String(n.tagName).toLowerCase()) idx++; } - const raw = n.getAttribute ? n.getAttribute('class') : ''; - const cls = String(raw || '').split(/\s+/).map(safeName).filter((c) => c && !looksGenerated(c)).slice(0, 2); - if (cls.length) seg += '.' + cls.join('.'); - parts.unshift(seg); + parts.unshift(tag + ':nth-of-type(' + idx + ')'); + if (tag === 'body' || tag === 'html') break; n = n.parentNode; } let out = parts.join(' > '); @@ -140,7 +130,7 @@ function main() { const bar = document.createElement('div'); bar.className = 'bar'; const msg = document.createElement('span'); - msg.innerHTML = escapeHtml('Heatmap wird geladen ...'); + msg.textContent = 'Heatmap wird geladen ...'; const close = document.createElement('button'); close.setAttribute('type', 'button'); close.textContent = 'Schließen'; @@ -212,11 +202,11 @@ function main() { .then(function (r) { if (!r.ok) throw new Error('heat'); return r.json(); }) .then(function (j) { points = (j && Array.isArray(j.points) ? j.points : []).filter(function (p) { return p && p.x >= 0 && p.x <= 1 && p.y >= 0 && p.y <= 1; }); - msg.innerHTML = escapeHtml('Heatmap – ' + points.length + ' Klicks (letzte 30 Tage)'); + msg.textContent = 'Heatmap – ' + points.length + ' Klicks (letzte 30 Tage)'; draw(); timer = setInterval(redrawIfChanged, 1000); }) - .catch(function () { msg.innerHTML = escapeHtml('Heatmap-Link abgelaufen oder ungültig'); }); + .catch(function () { msg.textContent = 'Heatmap-Link abgelaufen oder ungültig'; }); } try { main(); } catch (e) { /* nie die Seite stoeren */ } diff --git a/analytics/client/dist/w.js b/analytics/client/dist/w.js index df99603..f9453f5 100644 --- a/analytics/client/dist/w.js +++ b/analytics/client/dist/w.js @@ -16,9 +16,12 @@ function vpClass(width) { function cleanPath(href) { let p = '/'; - try { - p = new URL(String(href == null ? '' : href), 'http://x.invalid/').pathname || '/'; - } catch (e) { /* bleibt '/' */ } + const h = String(href == null ? '' : href); + if (h.charAt(0) === '/') { + p = h.replace(/[?#].*$/, '') || '/'; // wie location.pathname, auch '//foo' + } else { + try { p = new URL(h, 'http://x.invalid/').pathname || '/'; } catch (e) { /* bleibt '/' */ } + } try { p = decodeURIComponent(p); } catch (e) { /* kaputtes Encoding: roh lassen */ } if (p.charAt(0) !== '/') p = '/' + p; return p.slice(0, 300); @@ -37,32 +40,19 @@ function refHost(referrer, ownHost) { } catch (e) { return ''; } } -// Erzeugt wirkende Namen (css-1a2b3c, ember12345, 9f8e7d6c5b4a ...) erkennen. -function looksGenerated(s) { - if (/\d{4,}/.test(s)) return true; - const mixed = (t, min) => t.length >= min && /\d/.test(t) && /[a-z]/i.test(t); - if (mixed(s, 10) && !/[-_]/.test(s)) return true; - if (/^[a-f0-9]{8,}$/i.test(s) && /\d/.test(s)) return true; - return s.split(/[-_]/).some((p) => mixed(p, 6)); -} - -const safeName = (s) => String(s).replace(/[^\w-]/g, ''); - +// Nur Tag-Namen mit :nth-of-type, keine IDs/Klassen (koennten personenbezogene Texte enthalten). function cssPath(el) { const parts = []; let n = el; - while (n && n.tagName && parts.length < 5) { - const tag = String(n.tagName).toLowerCase(); - let seg = tag; - const id = n.id ? safeName(n.id) : ''; - if (id && !looksGenerated(id)) { - parts.unshift(seg + '#' + id); - break; + while (n && n.tagName && parts.length < 6) { + const tag = String(n.tagName).toLowerCase().replace(/[^a-z0-9-]/g, ''); + if (!tag) break; + let idx = 1; + for (let s = n.previousElementSibling; s; s = s.previousElementSibling) { + if (String(s.tagName).toLowerCase() === String(n.tagName).toLowerCase()) idx++; } - const raw = n.getAttribute ? n.getAttribute('class') : ''; - const cls = String(raw || '').split(/\s+/).map(safeName).filter((c) => c && !looksGenerated(c)).slice(0, 2); - if (cls.length) seg += '.' + cls.join('.'); - parts.unshift(seg); + parts.unshift(tag + ':nth-of-type(' + idx + ')'); + if (tag === 'body' || tag === 'html') break; n = n.parentNode; } let out = parts.join(' > '); @@ -128,8 +118,10 @@ function escapeHtml(s) { function main() { const DOC = document; const WIN = window; + if (WIN.__wkAnalytics) return; // doppelt eingebunden + WIN.__wkAnalytics = true; const SELF = DOC.currentScript && DOC.currentScript.getAttribute && DOC.currentScript.getAttribute('data-site') - ? DOC.currentScript : DOC.querySelector('script[src$="/a/w.js"]'); + ? DOC.currentScript : DOC.querySelector('script[src*="/a/w.js"]'); if (!SELF) return; const site = String(SELF.getAttribute('data-site') || ''); if (!/^[a-z0-9]{16,40}$/.test(site)) return; @@ -184,6 +176,7 @@ function main() { }), 300); } sendPv(true); + WIN.addEventListener('pageshow', safe(function (e) { if (e && e.persisted) sendPv(false); })); try { const orig = WIN.history.pushState; WIN.history.pushState = function () { const r = orig.apply(this, arguments); try { scheduleNav(); } catch (e) { /* egal */ } return r; }; @@ -191,6 +184,9 @@ function main() { } catch (e) { /* egal */ } // ---- Tracking (nur nach Annehmen erreichbar) ---- + let storage = null; + try { storage = WIN.localStorage; } catch (e) { /* gesperrt */ } + let memChoice = null; let tracking = false; const hosts = []; const scrollPct = () => { @@ -200,6 +196,7 @@ function main() { const rel = (v, total) => Math.max(0, Math.min(1, Math.round(v / (total || 1) * 10000) / 10000)); const onClick = safe(function (e) { + if (!allowed()) return; const t = e.target; if (!t || hosts.indexOf(t) !== -1) return; const dw = DOC.documentElement.scrollWidth, dh = DOC.documentElement.scrollHeight; @@ -218,13 +215,21 @@ function main() { }); const onScroll = safe(function () { maxScroll = Math.max(maxScroll, scrollPct()); }); const onLeave = safe(function () { - if (enSent) return; + if (enSent || !allowed()) return; enSent = true; send({ t: 'en', site, path: lastPath || cleanPath(WIN.location.pathname), vp: vp(), sec: Math.max(0, Math.min(3600, Math.round((Date.now() - pvStart) / 1000))), scroll: Math.max(maxScroll, scrollPct()) }); }); const onVis = safe(function () { if (DOC.visibilityState === 'hidden') onLeave(); }); + // Einwilligung unmittelbar vor jedem Senden pruefen (z.B. in einem anderen Tab widerrufen) + function allowed() { + const c = readConsent(storage, Date.now()); + const ok = c ? c.a === 'accept' : !!(memChoice && memChoice.a === 'accept'); + if (!ok && tracking) stopTracking(); + return ok; + } + function startTracking() { if (tracking) return; tracking = true; @@ -242,17 +247,17 @@ function main() { } // ---- Einwilligung ---- - const gpc = navigator.globalPrivacyControl === true || navigator.doNotTrack === '1' || WIN.doNotTrack === '1'; + const dnt = (v) => v === '1' || v === 'yes'; + const gpc = navigator.globalPrivacyControl === true || dnt(navigator.doNotTrack) || dnt(WIN.doNotTrack) || dnt(navigator.msDoNotTrack); if (gpc) return; // wie Ablehnen: kein Banner, kein bn, nie Tracking - let storage = null; - try { storage = WIN.localStorage; } catch (e) { /* gesperrt */ } const stored = readConsent(storage, Date.now()); let bannerHost = null; let linkHostEl = null; function choose(a) { - try { storage.setItem(CONSENT_KEY, JSON.stringify({ v: 1, a, t: Date.now() })); } catch (e) { /* ohne Speicher: gilt nur fuer diese Seite */ } + memChoice = null; + try { storage.setItem(CONSENT_KEY, JSON.stringify({ v: 1, a, t: Date.now() })); } catch (e) { memChoice = { a }; /* ohne Speicher: gilt nur fuer diese Seite */ } send({ t: 'bn', site, a }); if (a === 'accept') startTracking(); else stopTracking(); closeBanner(); @@ -271,12 +276,11 @@ function main() { '.t{margin:0;max-width:720px}' + '.t a{color:#111;text-decoration:underline}' + '.r{display:flex;gap:10px;flex:none}' + - 'button{font:600 15px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-width:120px;height:44px;padding:0 20px;border:2px solid #111;border-radius:8px;cursor:pointer;background:#fff;color:#111}' + - 'button.p{background:' + accent + ';border-color:' + accent + ';color:#fff}' + + 'button{font:600 15px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-width:120px;height:44px;padding:0 20px;border:2px solid ' + accent + ';border-radius:8px;cursor:pointer;background:' + accent + ';color:#fff}' + 'button:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}' + '@media (max-width:767px){.bar{display:block;margin:8px;padding:16px;border:1px solid #d0d0d0;border-radius:12px}.r{flex-direction:column;margin-top:12px}button{width:100%}}'; - function openBanner() { + function openBanner(focus) { if (bannerHost) return; const prev = DOC.activeElement; bannerHost = DOC.createElement('div'); @@ -286,12 +290,11 @@ function main() { const root = bannerHost.attachShadow({ mode: 'open' }); root.appendChild(el('style', {}, CSS)); const bar = el('div', { class: 'bar', role: 'dialog', 'aria-label': 'Cookie-Einstellungen' }); - const p = el('p', { class: 't' }, 'Wir möchten mit deiner Zustimmung anonym auswerten, wie unsere Website genutzt wird (keine Cookies, keine Weitergabe). Details in der '); - p.appendChild(el('a', { href: '/datenschutz-analyse.html' }, 'Datenschutz-Info')); - p.appendChild(DOC.createTextNode ? DOC.createTextNode('.') : el('span', {}, '.')); + const p = el('p', { class: 't' }, 'Wir möchten mit deiner Zustimmung anonym auswerten, wie unsere Website genutzt wird (keine Cookies, keine Weitergabe). Details: '); + p.appendChild(el('a', { href: '/datenschutz-analyse.html' }, 'Datenschutz')); const row = el('div', { class: 'r' }); const no = el('button', { type: 'button' }, 'Ablehnen'); - const yes = el('button', { type: 'button', class: 'p' }, 'Annehmen'); + const yes = el('button', { type: 'button' }, 'Annehmen'); no.addEventListener('click', safe(function () { choose('reject'); if (prev && prev.focus) prev.focus(); })); yes.addEventListener('click', safe(function () { choose('accept'); if (prev && prev.focus) prev.focus(); })); row.appendChild(no); row.appendChild(yes); @@ -299,7 +302,7 @@ function main() { root.appendChild(bar); DOC.body.appendChild(bannerHost); if (linkHostEl) linkHostEl.style.display = 'none'; - no.focus(); + if (focus === true) no.focus(); } function closeBanner() { if (!bannerHost) return; @@ -318,19 +321,24 @@ function main() { const root = linkHostEl.attachShadow({ mode: 'open' }); root.appendChild(el('style', {}, ':host{all:initial}button{font:12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:6px 10px;border:1px solid #bbb;border-radius:6px;background:#fff;color:#444;cursor:pointer}button:focus-visible{outline:3px solid #1a73e8}')); const b = el('button', { type: 'button' }, 'Cookie-Einstellungen'); - b.addEventListener('click', safe(openBanner)); + b.addEventListener('click', safe(function () { openBanner(true); })); root.appendChild(b); DOC.body.appendChild(linkHostEl); } - if (DOC.querySelector('[data-webklar-consent]')) { - DOC.addEventListener('click', safe(function (e) { - const t = e.target; - if (t && t.closest && t.closest('[data-webklar-consent]')) { if (e.preventDefault) e.preventDefault(); openBanner(); } - })); - } else { - addSettingsLink(); - } + DOC.addEventListener('click', safe(function (e) { + const t = e.target; + if (t && t.closest && t.closest('[data-webklar-consent]')) { if (e.preventDefault) e.preventDefault(); openBanner(true); } + })); + if (!DOC.querySelector('[data-webklar-consent]')) addSettingsLink(); + + // Einwilligung in anderem Tab geaendert + WIN.addEventListener('storage', safe(function (e) { + if (e.key !== null && e.key !== CONSENT_KEY) return; + const c = readConsent(storage, Date.now()); + if (c && c.a === 'accept') startTracking(); else stopTracking(); + if (c) closeBanner(); + })); if (stored) { if (stored.a === 'accept') startTracking(); diff --git a/analytics/client/h.js b/analytics/client/h.js index 75b7d47..cdd0c70 100644 --- a/analytics/client/h.js +++ b/analytics/client/h.js @@ -1,5 +1,4 @@ // WEBklar Analyse: Heatmap-Overlay (wird von w.js nur mit gueltigem ?__wk_heat=Token geladen). -import { escapeHtml } from './core.js'; function main() { const me = document.currentScript; @@ -17,7 +16,7 @@ function main() { const bar = document.createElement('div'); bar.className = 'bar'; const msg = document.createElement('span'); - msg.innerHTML = escapeHtml('Heatmap wird geladen ...'); + msg.textContent = 'Heatmap wird geladen ...'; const close = document.createElement('button'); close.setAttribute('type', 'button'); close.textContent = 'Schließen'; @@ -89,11 +88,11 @@ function main() { .then(function (r) { if (!r.ok) throw new Error('heat'); return r.json(); }) .then(function (j) { points = (j && Array.isArray(j.points) ? j.points : []).filter(function (p) { return p && p.x >= 0 && p.x <= 1 && p.y >= 0 && p.y <= 1; }); - msg.innerHTML = escapeHtml('Heatmap – ' + points.length + ' Klicks (letzte 30 Tage)'); + msg.textContent = 'Heatmap – ' + points.length + ' Klicks (letzte 30 Tage)'; draw(); timer = setInterval(redrawIfChanged, 1000); }) - .catch(function () { msg.innerHTML = escapeHtml('Heatmap-Link abgelaufen oder ungültig'); }); + .catch(function () { msg.textContent = 'Heatmap-Link abgelaufen oder ungültig'; }); } try { main(); } catch (e) { /* nie die Seite stoeren */ } diff --git a/analytics/client/w.js b/analytics/client/w.js index 6740759..c04cfb7 100644 --- a/analytics/client/w.js +++ b/analytics/client/w.js @@ -5,8 +5,10 @@ import { cleanPath, vpClass, refHost, cssPath, contactKind, linkHost, readConsen function main() { const DOC = document; const WIN = window; + if (WIN.__wkAnalytics) return; // doppelt eingebunden + WIN.__wkAnalytics = true; const SELF = DOC.currentScript && DOC.currentScript.getAttribute && DOC.currentScript.getAttribute('data-site') - ? DOC.currentScript : DOC.querySelector('script[src$="/a/w.js"]'); + ? DOC.currentScript : DOC.querySelector('script[src*="/a/w.js"]'); if (!SELF) return; const site = String(SELF.getAttribute('data-site') || ''); if (!/^[a-z0-9]{16,40}$/.test(site)) return; @@ -61,6 +63,7 @@ function main() { }), 300); } sendPv(true); + WIN.addEventListener('pageshow', safe(function (e) { if (e && e.persisted) sendPv(false); })); try { const orig = WIN.history.pushState; WIN.history.pushState = function () { const r = orig.apply(this, arguments); try { scheduleNav(); } catch (e) { /* egal */ } return r; }; @@ -68,6 +71,9 @@ function main() { } catch (e) { /* egal */ } // ---- Tracking (nur nach Annehmen erreichbar) ---- + let storage = null; + try { storage = WIN.localStorage; } catch (e) { /* gesperrt */ } + let memChoice = null; let tracking = false; const hosts = []; const scrollPct = () => { @@ -77,6 +83,7 @@ function main() { const rel = (v, total) => Math.max(0, Math.min(1, Math.round(v / (total || 1) * 10000) / 10000)); const onClick = safe(function (e) { + if (!allowed()) return; const t = e.target; if (!t || hosts.indexOf(t) !== -1) return; const dw = DOC.documentElement.scrollWidth, dh = DOC.documentElement.scrollHeight; @@ -95,13 +102,21 @@ function main() { }); const onScroll = safe(function () { maxScroll = Math.max(maxScroll, scrollPct()); }); const onLeave = safe(function () { - if (enSent) return; + if (enSent || !allowed()) return; enSent = true; send({ t: 'en', site, path: lastPath || cleanPath(WIN.location.pathname), vp: vp(), sec: Math.max(0, Math.min(3600, Math.round((Date.now() - pvStart) / 1000))), scroll: Math.max(maxScroll, scrollPct()) }); }); const onVis = safe(function () { if (DOC.visibilityState === 'hidden') onLeave(); }); + // Einwilligung unmittelbar vor jedem Senden pruefen (z.B. in einem anderen Tab widerrufen) + function allowed() { + const c = readConsent(storage, Date.now()); + const ok = c ? c.a === 'accept' : !!(memChoice && memChoice.a === 'accept'); + if (!ok && tracking) stopTracking(); + return ok; + } + function startTracking() { if (tracking) return; tracking = true; @@ -119,17 +134,17 @@ function main() { } // ---- Einwilligung ---- - const gpc = navigator.globalPrivacyControl === true || navigator.doNotTrack === '1' || WIN.doNotTrack === '1'; + const dnt = (v) => v === '1' || v === 'yes'; + const gpc = navigator.globalPrivacyControl === true || dnt(navigator.doNotTrack) || dnt(WIN.doNotTrack) || dnt(navigator.msDoNotTrack); if (gpc) return; // wie Ablehnen: kein Banner, kein bn, nie Tracking - let storage = null; - try { storage = WIN.localStorage; } catch (e) { /* gesperrt */ } const stored = readConsent(storage, Date.now()); let bannerHost = null; let linkHostEl = null; function choose(a) { - try { storage.setItem(CONSENT_KEY, JSON.stringify({ v: 1, a, t: Date.now() })); } catch (e) { /* ohne Speicher: gilt nur fuer diese Seite */ } + memChoice = null; + try { storage.setItem(CONSENT_KEY, JSON.stringify({ v: 1, a, t: Date.now() })); } catch (e) { memChoice = { a }; /* ohne Speicher: gilt nur fuer diese Seite */ } send({ t: 'bn', site, a }); if (a === 'accept') startTracking(); else stopTracking(); closeBanner(); @@ -148,12 +163,11 @@ function main() { '.t{margin:0;max-width:720px}' + '.t a{color:#111;text-decoration:underline}' + '.r{display:flex;gap:10px;flex:none}' + - 'button{font:600 15px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-width:120px;height:44px;padding:0 20px;border:2px solid #111;border-radius:8px;cursor:pointer;background:#fff;color:#111}' + - 'button.p{background:' + accent + ';border-color:' + accent + ';color:#fff}' + + 'button{font:600 15px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-width:120px;height:44px;padding:0 20px;border:2px solid ' + accent + ';border-radius:8px;cursor:pointer;background:' + accent + ';color:#fff}' + 'button:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}' + '@media (max-width:767px){.bar{display:block;margin:8px;padding:16px;border:1px solid #d0d0d0;border-radius:12px}.r{flex-direction:column;margin-top:12px}button{width:100%}}'; - function openBanner() { + function openBanner(focus) { if (bannerHost) return; const prev = DOC.activeElement; bannerHost = DOC.createElement('div'); @@ -163,12 +177,11 @@ function main() { const root = bannerHost.attachShadow({ mode: 'open' }); root.appendChild(el('style', {}, CSS)); const bar = el('div', { class: 'bar', role: 'dialog', 'aria-label': 'Cookie-Einstellungen' }); - const p = el('p', { class: 't' }, 'Wir möchten mit deiner Zustimmung anonym auswerten, wie unsere Website genutzt wird (keine Cookies, keine Weitergabe). Details in der '); - p.appendChild(el('a', { href: '/datenschutz-analyse.html' }, 'Datenschutz-Info')); - p.appendChild(DOC.createTextNode ? DOC.createTextNode('.') : el('span', {}, '.')); + const p = el('p', { class: 't' }, 'Wir möchten mit deiner Zustimmung anonym auswerten, wie unsere Website genutzt wird (keine Cookies, keine Weitergabe). Details: '); + p.appendChild(el('a', { href: '/datenschutz-analyse.html' }, 'Datenschutz')); const row = el('div', { class: 'r' }); const no = el('button', { type: 'button' }, 'Ablehnen'); - const yes = el('button', { type: 'button', class: 'p' }, 'Annehmen'); + const yes = el('button', { type: 'button' }, 'Annehmen'); no.addEventListener('click', safe(function () { choose('reject'); if (prev && prev.focus) prev.focus(); })); yes.addEventListener('click', safe(function () { choose('accept'); if (prev && prev.focus) prev.focus(); })); row.appendChild(no); row.appendChild(yes); @@ -176,7 +189,7 @@ function main() { root.appendChild(bar); DOC.body.appendChild(bannerHost); if (linkHostEl) linkHostEl.style.display = 'none'; - no.focus(); + if (focus === true) no.focus(); } function closeBanner() { if (!bannerHost) return; @@ -195,19 +208,24 @@ function main() { const root = linkHostEl.attachShadow({ mode: 'open' }); root.appendChild(el('style', {}, ':host{all:initial}button{font:12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:6px 10px;border:1px solid #bbb;border-radius:6px;background:#fff;color:#444;cursor:pointer}button:focus-visible{outline:3px solid #1a73e8}')); const b = el('button', { type: 'button' }, 'Cookie-Einstellungen'); - b.addEventListener('click', safe(openBanner)); + b.addEventListener('click', safe(function () { openBanner(true); })); root.appendChild(b); DOC.body.appendChild(linkHostEl); } - if (DOC.querySelector('[data-webklar-consent]')) { - DOC.addEventListener('click', safe(function (e) { - const t = e.target; - if (t && t.closest && t.closest('[data-webklar-consent]')) { if (e.preventDefault) e.preventDefault(); openBanner(); } - })); - } else { - addSettingsLink(); - } + DOC.addEventListener('click', safe(function (e) { + const t = e.target; + if (t && t.closest && t.closest('[data-webklar-consent]')) { if (e.preventDefault) e.preventDefault(); openBanner(true); } + })); + if (!DOC.querySelector('[data-webklar-consent]')) addSettingsLink(); + + // Einwilligung in anderem Tab geaendert + WIN.addEventListener('storage', safe(function (e) { + if (e.key !== null && e.key !== CONSENT_KEY) return; + const c = readConsent(storage, Date.now()); + if (c && c.a === 'accept') startTracking(); else stopTracking(); + if (c) closeBanner(); + })); if (stored) { if (stored.a === 'accept') startTracking(); diff --git a/analytics/test/client.test.js b/analytics/test/client.test.js index 47676ad..81b4653 100644 --- a/analytics/test/client.test.js +++ b/analytics/test/client.test.js @@ -29,6 +29,8 @@ test('cleanPath', () => { assert.equal(cleanPath(''), '/'); assert.equal(cleanPath('/' + 'a'.repeat(400)).length, 300); assert.equal(cleanPath(null), '/'); + assert.equal(cleanPath('//foo/bar?x=1'), '//foo/bar'); + assert.equal(cleanPath('//foo'), '//foo'); }); test('refHost', () => { @@ -42,30 +44,33 @@ test('refHost', () => { }); function el(tag, o = {}) { - const e = { tagName: tag.toUpperCase(), id: o.id || '', parentNode: o.parent || null, attrs: { class: o.cls || '' }, - getAttribute(n) { return this.attrs[n] ?? null; }, classList: (o.cls || '').split(/\s+/).filter(Boolean) }; + const e = { tagName: tag.toUpperCase(), id: o.id || '', parentNode: o.parent || null, previousElementSibling: o.prev || null, + attrs: { class: o.cls || '' }, getAttribute(n) { return this.attrs[n] ?? null; } }; return e; } -test('cssPath', () => { +test('cssPath: nur Tags + nth-of-type, keine IDs/Klassen', () => { const body = el('body'); const div = el('div', { parent: body, cls: 'hero main' }); - const btn = el('button', { parent: div, cls: 'cta' }); - assert.equal(cssPath(btn), 'body > div.hero.main > button.cta'); - const withId = el('section', { parent: body, id: 'kontakt' }); - const a = el('a', { parent: withId }); - assert.equal(cssPath(a), 'section#kontakt > a'); - // generierte IDs/Klassen werden uebersprungen - const gen = el('div', { parent: body, id: 'ember12345', cls: 'css-1a2b3c x9f8e7d6c5b4a ok' }); - assert.equal(cssPath(gen), 'body > div.ok'); - // max. 5 Ebenen - let p = el('div'); const first = p; - for (let i = 0; i < 9; i++) p = el('span', { parent: p }); - assert.equal(cssPath(p).split(' > ').length, 5); - assert.ok(first); + const p1 = el('p', { parent: div }); + const btn0 = el('button', { parent: div, prev: p1 }); + const btn = el('button', { parent: div, prev: btn0, cls: 'cta' }); + assert.equal(cssPath(btn), 'body:nth-of-type(1) > div:nth-of-type(1) > button:nth-of-type(2)'); + const pii = el('a', { parent: body, id: 'max@firma.de', cls: 'team-max-mustermann' }); + const sel = cssPath(pii); + assert.equal(sel, 'body:nth-of-type(1) > a:nth-of-type(1)'); + assert.ok(!/max|firma|mustermann|#|\./.test(sel)); + // max. 6 Ebenen + let n = el('div'); + for (let i = 0; i < 9; i++) n = el('span', { parent: n }); + assert.equal(cssPath(n).split(' > ').length, 6); + // stoppt bei body + const outer = el('html'); body.parentNode = outer; + assert.equal(cssPath(div).split(' > ')[0], 'body:nth-of-type(1)'); // <= 200 - const long = el('div', { parent: body, cls: Array.from({ length: 40 }, (_, i) => 'klasse' + 'x'.repeat(i % 5 + 3)).join(' ') }); - assert.ok(cssPath(long).length <= 200); + let deep = el('div'); + for (let i = 0; i < 5; i++) deep = el('x'.repeat(40), { parent: deep }); + assert.ok(cssPath(deep).length <= 200); assert.equal(cssPath(null), ''); }); @@ -198,7 +203,9 @@ function harness({ gpc, dnt, stored, search = '', src = 'https://project.webklar const types = () => sent.map((s) => s.d.t + (s.d.a ? ':' + s.d.a : '')); const ck = (target, ev = {}) => { for (const f of [...(docL.click || [])]) f({ type: 'click', target, pageX: 500, pageY: 1000, clientX: 500, clientY: 700, preventDefault() {}, ...ev }); }; const leave = () => { for (const f of [...(winL.pagehide || [])]) f({}); document.visibilityState = 'hidden'; for (const f of [...(docL.visibilitychange || [])]) f({}); }; - return { sent, store, types, ck, leave, body, docL, winL, win, injected, history, timers, setNow: (n) => { now = n; }, link, document }; + const rerun = () => vm.runInContext(readFileSync(join(DIST, 'w.js'), 'utf8'), sandbox); + const storage = () => (winL.storage || []).forEach((f) => f({ key: 'wk-consent' })); + return { rerun, storage, sent, store, types, ck, leave, body, docL, winL, win, injected, history, timers, setNow: (n) => { now = n; }, link, document }; } const target = () => { const b = makeEl('button'); b.parentNode = makeEl('body'); b.attrs.class = 'cta'; return b; }; const hostEl = (h) => h.body.children.find((c) => c.shadow && findAll(c.shadow, (n) => n.attrs && n.attrs.role === 'dialog').length); @@ -211,7 +218,7 @@ test('w.js: ohne Einwilligung nur pv + bn shown, keine ck/ct/en', () => { assert.deepEqual(h.sent[1].d, { t: 'bn', site: 'abcdef0123456789abcd', a: 'shown' }); h.ck(target()); h.leave(); assert.deepEqual(h.types(), ['pv', 'bn:shown']); - assert.equal((h.docL.click || []).length, 0); + assert.equal((h.docL.click || []).length, 1); // nur die Einstellungs-Delegation }); test('w.js: Banner-Aufbau (Dialog, Texte, gleiche Buttons, Akzent nur Annehmen)', () => { @@ -225,13 +232,16 @@ test('w.js: Banner-Aufbau (Dialog, Texte, gleiche Buttons, Akzent nur Annehmen)' assert.match(text, /Wir möchten mit deiner Zustimmung anonym auswerten/); const a = all.find((n) => n.tagName === 'A'); assert.equal(a.attrs.href, '/datenschutz-analyse.html'); - assert.equal(a.textContent, 'Datenschutz-Info'); + assert.equal(a.textContent, 'Datenschutz'); const css = all.filter((n) => n.tagName === 'STYLE').map((n) => n.textContent).join(''); assert.match(css, /#0a5a8a/); assert.match(css, /max-width:\s*767px/); const buttons = all.filter((n) => n.tagName === 'BUTTON'); assert.deepEqual(buttons.map((b) => b.textContent), ['Ablehnen', 'Annehmen']); - assert.ok(buttons[0].focused, 'erster Button fokussiert'); + assert.ok(!buttons[0].focused, 'kein Fokusraub beim Laden'); + assert.equal(buttons[0].attrs.class, buttons[1].attrs.class); + assert.ok(!/button\.|\.p\b/.test(css), 'eine Regel fuer beide Buttons'); + assert.match(css, /button\{[^}]*background:#0a5a8a[^}]*color:#fff/); assert.equal(host.style.zIndex, '2147483647'); // Escape schliesst nicht fire(dlg, 'keydown', { key: 'Escape' }); fire(host, 'keydown', { key: 'Escape' }); @@ -248,7 +258,7 @@ test('w.js: Annehmen => bn accept, Speicher, ck/ct/en; Widerruf stoppt sofort', const t = target(); h.ck(t); const ck = h.sent.at(-1).d; - assert.deepEqual(ck, { t: 'ck', site: 'abcdef0123456789abcd', path: '/start', vp: 'd', x: 0.5, y: 0.5, sel: 'body > button.cta' }); + assert.deepEqual(ck, { t: 'ck', site: 'abcdef0123456789abcd', path: '/start', vp: 'd', x: 0.5, y: 0.5, sel: 'body:nth-of-type(1) > button:nth-of-type(1)' }); // Kontakt-Link: ck + ct (Kind-Element in ) const a = makeEl('a'); a.setAttribute('href', 'tel:+4912'); a.parentNode = makeEl('body'); const span = makeEl('span'); span.parentNode = a; @@ -268,12 +278,13 @@ test('w.js: Annehmen => bn accept, Speicher, ck/ct/en; Widerruf stoppt sofort', const settings = findAll(h.body, (x) => x.tagName === 'BUTTON' && x.textContent === 'Cookie-Einstellungen')[0]; assert.ok(settings, 'fester Link'); settings.click(); + assert.ok(btn(hostEl(h).shadow, 'Ablehnen').focused, 'Fokus beim Wiederoeffnen'); btn(hostEl(h).shadow, 'Ablehnen').click(); assert.equal(h.types().at(-1), 'bn:reject'); const before = h.sent.length; h.ck(target()); h.leave(); assert.equal(h.sent.length, before); - assert.equal((h.docL.click || []).length, 0); + assert.equal((h.docL.click || []).length, 1); // nur die Einstellungs-Delegation assert.equal((h.docL.visibilitychange || []).length, 0); assert.equal((h.winL.pagehide || []).length, 0); }); @@ -343,3 +354,74 @@ test('w.js: wirft nie, auch wenn localStorage/sendBeacon kaputt', () => { vm.runInContext(readFileSync(join(DIST, 'w.js'), 'utf8'), sandbox); }); }); + +test('w.js: DNT yes / msDoNotTrack => nur pv', () => { + for (const o of [{ dnt: 'yes' }]) { const h = harness(o); assert.deepEqual(h.types(), ['pv']); } +}); + +test('w.js: doppelt eingebunden => nur ein pv', () => { + const h = harness({ gpc: true }); + h.rerun(); + assert.deepEqual(h.types(), ['pv']); +}); + +test('w.js: Widerruf in anderem Tab (storage-Ereignis) stoppt Tracking sofort', () => { + const h = harness({ stored: { v: 1, a: 'accept', t: 1_700_000_000_000 - 1000 } }); + h.ck(target()); + assert.equal(h.sent.at(-1).d.t, 'ck'); + h.store['wk-consent'] = JSON.stringify({ v: 1, a: 'reject', t: 1_700_000_000_000 }); + h.storage(); + const n = h.sent.length; + h.ck(target()); h.leave(); + assert.equal(h.sent.length, n); + assert.equal((h.docL.click || []).length, 1); // nur die Einstellungs-Delegation + // Annehmen in anderem Tab startet Tracking + h.store['wk-consent'] = JSON.stringify({ v: 1, a: 'accept', t: 1_700_000_000_000 }); + h.storage(); + h.ck(target()); + assert.equal(h.sent.length, n + 1); +}); + +test('w.js: Einwilligung wird vor jedem Senden neu geprueft (ohne storage-Ereignis)', () => { + const h = harness({ stored: { v: 1, a: 'accept', t: 1_700_000_000_000 - 1000 } }); + h.store['wk-consent'] = JSON.stringify({ v: 1, a: 'reject', t: 1_700_000_000_000 }); + const n = h.sent.length; + h.ck(target()); h.leave(); + assert.equal(h.sent.length, n); + assert.equal((h.docL.click || []).length, 1); // nur die Einstellungs-Delegation +}); + +test('w.js: SPA-pv bei akzeptierter Einwilligung; nach Widerruf kein en', () => { + const h = harness({ stored: { v: 1, a: 'accept', t: 1_700_000_000_000 - 1000 } }); + h.win.location.pathname = '/zwei'; + h.history.pushState(null, '', '/zwei'); h.timers.splice(0).forEach((f) => f()); + assert.deepEqual(h.sent.map((s) => s.d.path), ['/start', '/zwei']); + h.ck(target()); + assert.equal(h.sent.at(-1).d.path, '/zwei'); + h.store['wk-consent'] = JSON.stringify({ v: 1, a: 'reject', t: 1_700_000_000_000 }); + h.storage(); + const n = h.sent.length; + h.leave(); + assert.equal(h.sent.length, n); +}); + +test('w.js: bfcache-Rueckkehr sendet neues pv und erlaubt neues en', () => { + const h = harness({ stored: { v: 1, a: 'accept', t: 1_700_000_000_000 - 1000 } }); + h.leave(); + assert.equal(h.sent.filter((s) => s.d.t === 'en').length, 1); + for (const f of h.winL.pageshow || []) f({ persisted: false }); + assert.equal(h.sent.filter((s) => s.d.t === 'pv').length, 1); + for (const f of h.winL.pageshow || []) f({ persisted: true }); + assert.equal(h.sent.filter((s) => s.d.t === 'pv').length, 2); + h.leave(); + assert.equal(h.sent.filter((s) => s.d.t === 'en').length, 2); +}); + +test('w.js: [data-webklar-consent] spaeter hinzugefuegt funktioniert per Delegation', () => { + const h = harness({ stored: { v: 1, a: 'reject', t: 1_700_000_000_000 } }); + // kein Link beim Laden => fester Link; spaeteres Element oeffnet ebenfalls + const late = makeEl('a'); late.setAttribute('data-webklar-consent', ''); + for (const f of [...(h.docL.click || [])]) f({ type: 'click', target: late, preventDefault() {} }); + assert.ok(hostEl(h)); + assert.ok(btn(hostEl(h).shadow, 'Ablehnen').focused); +});