@ecomconsult/consentkit 0.3.5 → 0.5.0

package/src/ck-debug.js

@@ -137,7 +137,16 @@
         ttlDays: d.ttlDays == null ? null : Number(d.ttlDays)
       },
       blocked: (d.blocked || []).map(function (b) {
-        return { host: b.host, path: b.path, kind: b.kind, category: b.category, origin: b.origin };
+        // `strict` marks an entry the engine held back only because strict mode
+        // is on and the host is an unknown third party — not because the
+        // tracker database recognised it.
+        return {
+          host: b.host, path: b.path, kind: b.kind,
+          category: b.category, origin: b.origin, strict: b.strict === true,
+          // false when the visitor granted the category but the element never
+          // loaded — usually a script that was created and never appended.
+          revived: b.revived !== false
+        };
       }),
       requests: buildRequests(d.entries, d.consentAtMs, d.classify),
       consentMode: (d.consentMode || []).slice(),
@@ -180,6 +189,8 @@
       secBlocked: 'Заблокировано до согласия',
       noBlocked: 'ничего не перехвачено',
       markup: ' (разметка)',
+      strict: 'strict',
+      notRevived: ' — не ожил после согласия',
       secRequests: 'Запросы к трекерам',
       noRequests: 'запросов к известным трекерам не было',
       after: 'после согласия',
@@ -188,6 +199,28 @@
       note: NOTE_RU,
       secConsentMode: 'Consent Mode / dataLayer',
       noEvents: 'событий не было',
+      secTheme: 'Оформление',
+      themeMode: 'тема',
+      themeModeLight: 'светлая',
+      themeModeDark: 'тёмная',
+      themeFont: 'шрифт',
+      themeFontInherit: 'как на сайте',
+      themeFontSystem: 'системный',
+      themeRadius: 'скругления',
+      themeCard: 'карточка',
+      themeBtn: 'кнопки',
+      themeLink: 'Ссылки',
+      btnAccept: 'Принять всё',
+      btnReject: 'Отклонить всё',
+      btnSettings: 'Настроить',
+      btnFilled: 'залитая',
+      btnOutline: 'обводка',
+      btnText: 'текст',
+      btnBorder: 'обводка',
+      btnOn: 'на',
+      btnAdjusted: 'исправлено автоматически',
+      btnOk: 'AA',
+      btnFail: 'ниже AA',
       secActions: 'Действия',
       reset: 'Сбросить согласие',
       showPrefs: 'Показать настройки',
@@ -215,6 +248,8 @@
       secBlocked: 'Blocked until consent',
       noBlocked: 'nothing intercepted',
       markup: ' (markup)',
+      strict: 'strict',
+      notRevived: ' — did not come back after consent',
       secRequests: 'Tracker requests',
       noRequests: 'no requests to known trackers',
       after: 'after consent',
@@ -223,6 +258,28 @@
       note: NOTE_EN,
       secConsentMode: 'Consent Mode / dataLayer',
       noEvents: 'no events',
+      secTheme: 'Appearance',
+      themeMode: 'theme',
+      themeModeLight: 'light',
+      themeModeDark: 'dark',
+      themeFont: 'font',
+      themeFontInherit: 'site font',
+      themeFontSystem: 'system',
+      themeRadius: 'radii',
+      themeCard: 'card',
+      themeBtn: 'buttons',
+      themeLink: 'Links',
+      btnAccept: 'Accept all',
+      btnReject: 'Reject all',
+      btnSettings: 'Customize',
+      btnFilled: 'filled',
+      btnOutline: 'outline',
+      btnText: 'text',
+      btnBorder: 'border',
+      btnOn: 'on',
+      btnAdjusted: 'adjusted automatically',
+      btnOk: 'AA',
+      btnFail: 'below AA',
       secActions: 'Actions',
       reset: 'Reset consent',
       showPrefs: 'Show preferences',
@@ -534,6 +591,13 @@
 
   function tag(text, cls) { return el('span', { class: 't' + (cls ? ' ' + cls : '') }, text); }
 
+  // A contrast ratio the way WCAG tools quote it. null when the colour could
+  // not be measured (a colour name, an rgb() string) — shown as "?" rather
+  // than a made-up number.
+  function fmtRatio(r) {
+    return typeof r === 'number' && isFinite(r) ? (Math.round(r * 100) / 100) + ':1' : '?';
+  }
+
   // Resolved lazily, not at parse time: this file runs before ConsentKit.init()
   // has merged the site's config, so asking for the language now would always
   // read the built-in default. Re-resolved on every render so a page that
@@ -594,8 +658,10 @@
         var li = doc.createElement('li');
         li.appendChild(tag(b.kind));
         li.appendChild(tag(b.category || '?'));
+        if (b.strict) { li.appendChild(tag(T.strict, 'off')); }
         li.appendChild(doc.createTextNode(b.host + b.path +
-          (b.origin === 'markup' ? T.markup : '')));
+          (b.origin === 'markup' ? T.markup : '') +
+          (b.revived === false ? T.notRevived : '')));
         u3.appendChild(li);
       });
       s3.appendChild(u3);
@@ -648,7 +714,75 @@
     }
     body.appendChild(s5);
 
-    // 6. Buttons
+    // 6. Appearance (SPEC V1.6 §1) — the three buttons' RESOLVED colours and
+    // their contrast ratios, read straight off ConsentKit._contrast rather than
+    // recomputed here: the banner, this panel and the cabinet's theme editor
+    // must all quote the same numbers. The mode is named explicitly because
+    // light and dark resolve differently and only one of them is on screen.
+    var contrast = CK && CK._contrast;
+    if (contrast && typeof contrast.buildThemeCss === 'function') {
+      var sT = section(T.secTheme);
+      try {
+        var built = contrast.buildThemeCss((CK && CK.config) || {});
+        // Which palette the visitor is actually looking at right now.
+        var dark = built.mode === 'dark';
+        if (built.mode === 'auto') {
+          try {
+            dark = !!(global.matchMedia && global.matchMedia('(prefers-color-scheme: dark)').matches);
+          } catch (e) { dark = false; }
+        }
+        var resolved = dark ? built.dark : built.light;
+
+        // Fourth row: --ck-link, the accent as TEXT on the card. It is a
+        // separate number from every button's, because it is measured against
+        // the card rather than against a button fill — a brand accent can pass
+        // as a filled button's background and still be unreadable as a link.
+        var lk = resolved.link;
+        var lkTxt = '—';
+        if (lk) {
+          lkTxt = lk.color + ' ' + T.btnOn + ' ' + lk.against +
+            ' · ' + fmtRatio(lk.ratio) +
+            ' ' + ((typeof lk.ratio === 'number' && lk.ratio >= 4.5) ? T.btnOk : T.btnFail) +
+            (lk.adjusted ? ' · ' + T.btnAdjusted : '');
+        }
+
+        sT.appendChild(defs([
+          [T.themeMode, (dark ? T.themeModeDark : T.themeModeLight) +
+            (built.mode === 'auto' ? ' (auto)' : '')],
+          [T.themeFont, built.font === 'inherit' ? T.themeFontInherit : T.themeFontSystem],
+          [T.themeRadius, T.themeCard + ' ' + built.radius.card + 'px · ' +
+            T.themeBtn + ' ' + built.radius.button + 'px'],
+          [T.themeLink, lkTxt]
+        ]));
+
+        var labels = { accept: T.btnAccept, reject: T.btnReject, settings: T.btnSettings };
+        var uT = doc.createElement('ul');
+        ['accept', 'reject', 'settings'].forEach(function (role) {
+          var b = resolved.buttons[role];
+          if (!b) { return; }
+          var li = doc.createElement('li');
+          li.appendChild(tag(b.variant === 'filled' ? T.btnFilled : T.btnOutline));
+          var ok = typeof b.ratio === 'number' && b.ratio >= 4.5;
+          li.appendChild(tag(fmtRatio(b.ratio) + ' ' + (ok ? T.btnOk : T.btnFail),
+            ok ? 'on' : 'off'));
+          li.appendChild(doc.createTextNode(labels[role] + ' — ' +
+            T.btnText + ' ' + b.fg + ' ' + T.btnOn + ' ' + b.against +
+            (b.variant === 'outline'
+              ? ' · ' + T.btnBorder + ' ' + b.border + ' (' + fmtRatio(b.borderRatio) + ')'
+              : '')));
+          if (b.adjusted) {
+            li.appendChild(el('span', { class: 'mut' }, ' · ' + T.btnAdjusted));
+          }
+          uT.appendChild(li);
+        });
+        sT.appendChild(uT);
+      } catch (e) {
+        sT.appendChild(el('div', { class: 'mut' }, '—'));
+      }
+      body.appendChild(sT);
+    }
+
+    // 7. Buttons
     var s6 = section(T.secActions);
     var row = el('div', { class: 'row' });
     var bReset = el('button', { type: 'button' }, T.reset);

package/src/ck-saas.js

@@ -122,15 +122,43 @@
   // ---------------------------------------------------------------------------
   // Boot
   // ---------------------------------------------------------------------------
+  // The service's tracker overrides (§1.3). Applied through the core's
+  // _extendHostDb so the classification the scanner used server-side is the
+  // classification the browser uses on the same page.
+  //
+  // ORDER MATTERS: this must run BEFORE CK.init(), because init() performs the
+  // initial scan and the first applyConsentToDom() pass. A host merged after
+  // that pass would not be recognised on the scripts already in the markup.
+  function applyHostDb(config) {
+    try {
+      var map = config && config.hostdb;
+      if (!map || typeof map !== 'object') { return 0; }
+      if (typeof CK._extendHostDb !== 'function') {
+        // An older core on the page (config contract is newer than the client).
+        warn('this core does not support config.hostdb — update ck-core.js to 0.4.0 or later.');
+        return 0;
+      }
+      return CK._extendHostDb(map);
+    } catch (e) { return 0; }
+  }
+
   function initWith(config, why) {
     activeConfig = config;
+    applyHostDb(config);
     try { CK.init(config); } catch (e) { error('init() failed: ' + (e && e.message)); }
     if (why) { /* reserved for diagnostics */ }
   }
 
-  // Strict mode: banner shows, every opt-in category stays off, no journal.
+  // Strict FALLBACK: banner shows, every opt-in category stays off, no journal.
   // policyVersion 'strict-fallback' deliberately mismatches any stored consent,
   // so a previous decision is not silently reused when the server is unreachable.
+  //
+  // Not to be confused with `blocking.mode: 'strict'` (SPEC §2), which is a
+  // different thing that happens to share the word: this path deliberately does
+  // NOT set it. When the config server is unreachable we know nothing about the
+  // site, and turning on the mode that blocks every third-party script would
+  // break a page precisely when its owner has no way to configure an allowlist.
+  // Known trackers are still blocked, as always.
   function initStrict(reason) {
     warn('config unavailable (' + reason + ') — strict fallback: banner shown, all opt-in categories denied, journal disabled.');
     initWith({ policyVersion: 'strict-fallback' });
@@ -194,6 +222,13 @@
       // re-initialising would swap ConsentKit.config identity mid-session.
       // It takes effect on the next page load.
       writeCache(r.etag, r.config);
+      // `hostdb` is the deliberate exception. Extending the map has exactly the
+      // semantics _extendHostDb documents for a call after init(): nothing
+      // already inserted is re-evaluated, but everything inserted from now on
+      // is classified against the new overrides. Waiting a whole page load to
+      // start blocking a newly classified tracker would be worse, and unlike
+      // the rest of the config this cannot change ConsentKit.config identity.
+      applyHostDb(r.config);
     }, function (reason) {
       warn('background revalidation failed (' + reason + '); continuing with cached config.');
     });