@freshjuice/zest 1.0.0 → 2.0.0

package/src/index.js

@@ -1,145 +1,88 @@
 /**
  * Zest - Lightweight Cookie Consent Toolkit
- * Main entry point
+ * Main entry (full build: logic + UI).
+ *
+ * For a logic-only build without any CSS / Shadow DOM mounting, import
+ * from `@freshjuice/zest/headless` instead.
  */
 
-// Core
-import { interceptCookies, setConsentChecker as setCookieChecker, replayCookies, getOriginalCookieDescriptor } from './core/cookie-interceptor.js';
-import { interceptStorage, setConsentChecker as setStorageChecker, replayStorage } from './core/storage-interceptor.js';
-import { startScriptBlocking, setConsentChecker as setScriptChecker, replayScripts } from './core/script-blocker.js';
-import { setPatterns } from './core/pattern-matcher.js';
-import { getCategoryIds } from './core/categories.js';
-import { isDoNotTrackEnabled, getDNTDetails } from './core/dnt.js';
-
-// Integrations
-import { applyConsentSignals } from './integrations/consent-signals.js';
-
-// Config
-import { getConfig, setConfig, getCurrentConfig } from './config/parser.js';
-
-// Storage
+// Core lifecycle (UI-agnostic)
+import {
+  coreInit,
+  coreAcceptAll,
+  coreRejectAll,
+  coreUpdateConsent,
+  coreReset,
+  isInitialized,
+  getActiveConfig
+} from './core-lifecycle.js';
+
+// Consent store + events
 import {
-  loadConsent,
   getConsent,
   hasConsent,
-  updateConsent,
-  acceptAll as storeAcceptAll,
-  rejectAll as storeRejectAll,
-  resetConsent,
   hasConsentDecision,
   getConsentProof
 } from './storage/consent-store.js';
-import { emitReady, emitConsent, emitReject, emitChange, emitShow, emitHide, EVENTS } from './storage/events.js';
+import { emitShow, emitHide, EVENTS, on, once } from './storage/events.js';
+
+// DNT introspection
+import { isDoNotTrackEnabled, getDNTDetails } from './core/dnt.js';
+
+// Config getters
+import { getConfig, getCurrentConfig } from './config/parser.js';
 
 // UI
 import { showBanner, hideBanner, isBannerVisible } from './ui/banner.js';
 import { showModal, hideModal, isModalVisible } from './ui/modal.js';
 import { showWidget, hideWidget, removeWidget, isWidgetVisible } from './ui/widget.js';
 
-// State
-let initialized = false;
-let config = null;
-
-/**
- * Consent checker function shared across interceptors
- */
-function checkConsent(category) {
-  return hasConsent(category);
-}
-
-/**
- * Replay all queued items for newly allowed categories
- */
-function replayAll(allowedCategories) {
-  replayCookies(allowedCategories);
-  replayStorage(allowedCategories);
-  replayScripts(allowedCategories);
-}
-
 /**
- * Handle accept all
+ * Handle accept all — delegates consent logic to core, handles UI swap.
  */
 function handleAcceptAll() {
-  const result = storeAcceptAll(config.expiration);
-  const categories = getCategoryIds();
-
-  applyConsentSignals(result.current, config, false);
+  coreAcceptAll();
+  const config = getActiveConfig();
 
   hideBanner();
   hideModal();
 
-  replayAll(categories);
-
-  if (config.showWidget) {
+  if (config?.showWidget) {
     showWidget({ onClick: handleShowSettings });
   }
-
-  emitConsent(result.current, result.previous);
-  emitChange(result.current, result.previous);
-  config.callbacks?.onAccept?.(result.current);
-  config.callbacks?.onChange?.(result.current);
 }
 
 /**
- * Handle reject all
+ * Handle reject all.
  */
 function handleRejectAll() {
-  const result = storeRejectAll(config.expiration);
-
-  applyConsentSignals(result.current, config, false);
+  coreRejectAll();
+  const config = getActiveConfig();
 
   hideBanner();
   hideModal();
 
-  if (config.showWidget) {
+  if (config?.showWidget) {
     showWidget({ onClick: handleShowSettings });
   }
-
-  emitReject(result.current);
-  emitChange(result.current, result.previous);
-  config.callbacks?.onReject?.();
-  config.callbacks?.onChange?.(result.current);
 }
 
 /**
- * Handle save preferences from modal
+ * Handle save preferences from modal.
  */
 function handleSavePreferences(selections) {
-  const result = updateConsent(selections, config.expiration);
-
-  applyConsentSignals(result.current, config, false);
-
-  // Find newly allowed categories
-  const newlyAllowed = Object.keys(result.current).filter(
-    cat => result.current[cat] && !result.previous[cat]
-  );
-
-  if (newlyAllowed.length > 0) {
-    replayAll(newlyAllowed);
-  }
+  coreUpdateConsent(selections);
+  const config = getActiveConfig();
 
   hideModal();
 
-  if (config.showWidget) {
+  if (config?.showWidget) {
     showWidget({ onClick: handleShowSettings });
   }
-
-  // Determine if this was acceptance or rejection based on selections
-  const hasNonEssential = Object.entries(selections)
-    .some(([cat, val]) => cat !== 'essential' && val);
-
-  if (hasNonEssential) {
-    emitConsent(result.current, result.previous);
-  } else {
-    emitReject(result.current);
-  }
-
-  emitChange(result.current, result.previous);
-  config.callbacks?.onChange?.(result.current);
 }
 
 /**
- * Handle show settings
+ * Open the settings modal.
  */
 function handleShowSettings() {
   hideBanner();
@@ -156,17 +99,17 @@ function handleShowSettings() {
 }
 
 /**
- * Handle close modal
+ * Close the modal — either bring the widget back (decision made) or
+ * fall back to the banner (no decision yet).
  */
 function handleCloseModal() {
   hideModal();
   emitHide('modal');
 
-  // Show widget if consent was already given
-  if (hasConsentDecision() && config.showWidget) {
+  const config = getActiveConfig();
+  if (hasConsentDecision() && config?.showWidget) {
     showWidget({ onClick: handleShowSettings });
   } else {
-    // Show banner again if no decision made
     showBanner({
       onAcceptAll: handleAcceptAll,
       onRejectAll: handleRejectAll,
@@ -176,103 +119,37 @@ function handleCloseModal() {
 }
 
 /**
- * Initialize Zest
+ * Initialize Zest with UI.
  */
 function init(userConfig = {}) {
-  if (initialized) {
+  const { alreadyInitialized, consent, hasDecision, dntApplied } = coreInit(userConfig);
+  if (alreadyInitialized) {
     console.warn('[Zest] Already initialized');
     return Zest;
   }
 
-  // Merge config
-  config = setConfig(userConfig);
-
-  // Push default denied state to vendor consent mode APIs (must happen before scripts load)
-  applyConsentSignals(
-    { essential: true, functional: false, analytics: false, marketing: false },
-    config,
-    true
-  );
-
-  // Set patterns if provided
-  if (config.patterns) {
-    setPatterns(config.patterns);
-  }
-
-  // Set up consent checkers
-  setCookieChecker(checkConsent);
-  setStorageChecker(checkConsent);
-  setScriptChecker(checkConsent);
-
-  // Start interception
-  interceptCookies();
-  interceptStorage();
-  startScriptBlocking(config.mode, config.blockedDomains);
-
-  // Load saved consent
-  const consent = loadConsent();
-
-  initialized = true;
-
-  // Push update for returning visitors with saved consent
-  if (hasConsentDecision()) {
-    applyConsentSignals(consent, config, false);
-  }
-
-  // Check Do Not Track / Global Privacy Control
-  const dntEnabled = isDoNotTrackEnabled();
-  let dntApplied = false;
-
-  if (dntEnabled && config.respectDNT && config.dntBehavior !== 'ignore') {
-    if (config.dntBehavior === 'reject' && !hasConsentDecision()) {
-      // Auto-reject non-essential cookies silently
-      const result = storeRejectAll(config.expiration);
-      dntApplied = true;
+  const config = getActiveConfig();
 
-      applyConsentSignals(result.current, config, false);
-
-      // Emit events
-      emitReject(result.current);
-      emitChange(result.current, result.previous);
-      config.callbacks?.onReject?.();
-      config.callbacks?.onChange?.(result.current);
-    }
-    // 'preselect' behavior is handled by default (banner shows with defaults off)
-  }
-
-  // Emit ready event
-  emitReady(consent);
-  config.callbacks?.onReady?.(consent);
-
-  // Show UI based on consent state
-  if (!hasConsentDecision() && !dntApplied) {
-    // No consent decision yet - show banner
+  if (!hasDecision && !dntApplied) {
     showBanner({
       onAcceptAll: handleAcceptAll,
       onRejectAll: handleRejectAll,
       onSettings: handleShowSettings
     });
     emitShow('banner');
-  } else {
-    // Consent already given (or DNT auto-rejected) - show widget for reopening settings
-    if (config.showWidget) {
-      showWidget({ onClick: handleShowSettings });
-    }
+  } else if (config?.showWidget) {
+    showWidget({ onClick: handleShowSettings });
   }
 
   return Zest;
 }
 
-/**
- * Public API
- */
 const Zest = {
-  // Initialization
   init,
 
   // Banner control
   show() {
-    if (!initialized) {
+    if (!isInitialized()) {
       console.warn('[Zest] Not initialized. Call Zest.init() first.');
       return;
     }
@@ -293,7 +170,7 @@ const Zest = {
 
   // Settings modal
   showSettings() {
-    if (!initialized) {
+    if (!isInitialized()) {
       console.warn('[Zest] Not initialized. Call Zest.init() first.');
       return;
     }
@@ -305,19 +182,19 @@ const Zest = {
     emitHide('modal');
   },
 
-  // Consent management
+  // Consent state
   getConsent,
   hasConsent,
   hasConsentDecision,
   getConsentProof,
 
-  // DNT detection
+  // DNT
   isDoNotTrackEnabled,
   getDNTDetails,
 
-  // Accept/Reject programmatically
+  // Programmatic accept / reject
   acceptAll() {
-    if (!initialized) {
+    if (!isInitialized()) {
       console.warn('[Zest] Not initialized. Call Zest.init() first.');
       return;
     }
@@ -325,20 +202,19 @@ const Zest = {
   },
 
   rejectAll() {
-    if (!initialized) {
+    if (!isInitialized()) {
       console.warn('[Zest] Not initialized. Call Zest.init() first.');
       return;
     }
     handleRejectAll();
   },
 
-  // Reset and show banner again
+  // Reset everything and reshow the banner
   reset() {
-    resetConsent();
+    coreReset();
     hideModal();
     removeWidget();
-
-    if (initialized) {
+    if (isInitialized()) {
       showBanner({
         onAcceptAll: handleAcceptAll,
         onRejectAll: handleRejectAll,
@@ -348,17 +224,30 @@ const Zest = {
     }
   },
 
-  // Config
+  // Config introspection
   getConfig: getCurrentConfig,
 
   // Events
+  on,
+  once,
   EVENTS
 };
 
 // Auto-init if config present
 if (typeof window !== 'undefined') {
-  // Make Zest available globally
-  window.Zest = Zest;
+  // Make Zest available globally. defineProperty with writable:false +
+  // configurable:false stops a later-loaded script from replacing the
+  // global with a trojanned stand-in.
+  try {
+    Object.defineProperty(window, 'Zest', {
+      value: Object.freeze(Zest),
+      writable: false,
+      configurable: false,
+      enumerable: true
+    });
+  } catch (e) {
+    window.Zest = Zest;
+  }
 
   const autoInit = () => {
     const cfg = getConfig();

package/src/storage/consent-store.js

@@ -2,12 +2,27 @@
  * Consent Store - Manages consent state persistence
  */
 
-import { getDefaultConsent } from '../core/categories.js';
+import { getDefaultConsent, getCategoryIds } from '../core/categories.js';
 import { getOriginalCookieDescriptor } from '../core/cookie-interceptor.js';
+import { sanitizeConsentPayload } from '../core/security.js';
 
 const COOKIE_NAME = 'zest_consent';
 const CONSENT_VERSION = '1.0';
 
+/**
+ * Return the Secure flag fragment when running over HTTPS, empty otherwise.
+ * On HTTPS sites, omitting Secure lets the cookie leak over plain HTTP.
+ */
+function secureAttribute() {
+  try {
+    return typeof location !== 'undefined' && location.protocol === 'https:'
+      ? '; Secure'
+      : '';
+  } catch (_) {
+    return '';
+  }
+}
+
 // Current consent state
 let consent = null;
 
@@ -36,7 +51,12 @@ function getRawCookie() {
 }
 
 /**
- * Load consent from cookie
+ * Load consent from cookie.
+ *
+ * The parsed cookie is validated against the expected schema via
+ * sanitizeConsentPayload — only known category keys with boolean values
+ * survive, so a tampered cookie can't inject prototype-polluting props
+ * or unexpected category shapes.
  */
 export function loadConsent() {
   try {
@@ -44,9 +64,12 @@ export function loadConsent() {
     const match = cookies.match(new RegExp(`${COOKIE_NAME}=([^;]+)`));
 
     if (match) {
-      const data = JSON.parse(decodeURIComponent(match[1]));
-      consent = data.categories || getDefaultConsent();
-      return { ...consent };
+      const raw = JSON.parse(decodeURIComponent(match[1]));
+      const clean = sanitizeConsentPayload(raw, getCategoryIds());
+      if (clean && clean.categories) {
+        consent = { ...getDefaultConsent(), ...clean.categories };
+        return { ...consent };
+      }
     }
   } catch (e) {
     // Invalid or missing cookie
@@ -71,7 +94,7 @@ export function saveConsent(expirationDays = 365) {
   };
 
   const expires = new Date(Date.now() + expirationDays * 24 * 60 * 60 * 1000).toUTCString();
-  const cookieValue = `${COOKIE_NAME}=${encodeURIComponent(JSON.stringify(data))}; expires=${expires}; path=/; SameSite=Lax`;
+  const cookieValue = `${COOKIE_NAME}=${encodeURIComponent(JSON.stringify(data))}; expires=${expires}; path=/; SameSite=Lax${secureAttribute()}`;
 
   setRawCookie(cookieValue);
 }
@@ -142,7 +165,7 @@ export function rejectAll(expirationDays = 365) {
  * Reset consent (clear cookie)
  */
 export function resetConsent() {
-  setRawCookie(`${COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`);
+  setRawCookie(`${COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax${secureAttribute()}`);
   consent = null;
 }
 
@@ -167,7 +190,8 @@ export function getConsentProof() {
     const match = cookies.match(new RegExp(`${COOKIE_NAME}=([^;]+)`));
 
     if (match) {
-      return JSON.parse(decodeURIComponent(match[1]));
+      const raw = JSON.parse(decodeURIComponent(match[1]));
+      return sanitizeConsentPayload(raw, getCategoryIds());
     }
   } catch (e) {
     // Invalid cookie

package/src/ui/banner.js

@@ -4,30 +4,34 @@
 
 import { generateStyles } from './styles.js';
 import { getCurrentConfig } from '../config/parser.js';
+import { escapeHTML } from '../core/security.js';
 
 let bannerElement = null;
 let shadowRoot = null;
 
+const SAFE_POSITIONS = new Set(['bottom', 'bottom-left', 'bottom-right', 'top']);
+
 /**
  * Create the banner HTML
  */
 function createBannerHTML(config) {
   const labels = config.labels.banner;
-  const position = config.position || 'bottom';
+  const rawPosition = config.position || 'bottom';
+  const position = SAFE_POSITIONS.has(rawPosition) ? rawPosition : 'bottom';
 
   return `
-    <div class="zest-banner zest-banner--${position}" role="dialog" aria-modal="false" aria-label="${labels.title}">
-      <h2 class="zest-banner__title">${labels.title}</h2>
-      <p class="zest-banner__description">${labels.description}</p>
+    <div class="zest-banner zest-banner--${position}" role="dialog" aria-modal="false" aria-label="${escapeHTML(labels.title)}">
+      <h2 class="zest-banner__title">${escapeHTML(labels.title)}</h2>
+      <p class="zest-banner__description">${escapeHTML(labels.description)}</p>
       <div class="zest-banner__buttons">
         <button type="button" class="zest-btn zest-btn--primary" data-action="accept-all">
-          ${labels.acceptAll}
+          ${escapeHTML(labels.acceptAll)}
         </button>
         <button type="button" class="zest-btn zest-btn--secondary" data-action="reject-all">
-          ${labels.rejectAll}
+          ${escapeHTML(labels.rejectAll)}
         </button>
         <button type="button" class="zest-btn zest-btn--ghost" data-action="settings">
-          ${labels.settings}
+          ${escapeHTML(labels.settings)}
         </button>
       </div>
     </div>

package/src/ui/modal.js

@@ -5,6 +5,7 @@
 import { generateStyles } from './styles.js';
 import { getCurrentConfig } from '../config/parser.js';
 import { DEFAULT_CATEGORIES } from '../core/categories.js';
+import { escapeHTML, safeUrl } from '../core/security.js';
 
 let modalElement = null;
 let shadowRoot = null;
@@ -16,22 +17,24 @@ let currentSelections = {};
 function createCategoryHTML(category, isChecked, isRequired) {
   const disabled = isRequired ? 'disabled' : '';
   const checked = isChecked ? 'checked' : '';
+  const safeId = escapeHTML(category.id);
+  const safeLabel = escapeHTML(category.label);
 
   return `
     <div class="zest-category">
       <div class="zest-category__header">
         <div class="zest-category__info">
-          <span class="zest-category__label">${category.label}</span>
-          <p class="zest-category__description">${category.description}</p>
+          <span class="zest-category__label">${safeLabel}</span>
+          <p class="zest-category__description">${escapeHTML(category.description)}</p>
         </div>
         <label class="zest-toggle">
           <input
             type="checkbox"
             class="zest-toggle__input"
-            data-category="${category.id}"
+            data-category="${safeId}"
             ${checked}
             ${disabled}
-            aria-label="${category.label}"
+            aria-label="${safeLabel}"
           >
           <span class="zest-toggle__slider"></span>
         </label>
@@ -55,29 +58,30 @@ function createModalHTML(config, consent) {
     ))
     .join('');
 
-  const policyLink = config.policyUrl
-    ? `<a href="${config.policyUrl}" class="zest-link" target="_blank" rel="noopener">Privacy Policy</a>`
+  const validatedPolicyUrl = config.policyUrl ? safeUrl(config.policyUrl) : null;
+  const policyLink = validatedPolicyUrl
+    ? `<a href="${escapeHTML(validatedPolicyUrl)}" class="zest-link" target="_blank" rel="noopener noreferrer">Privacy Policy</a>`
     : '';
 
   return `
-    <div class="zest-modal-overlay" role="dialog" aria-modal="true" aria-label="${labels.title}">
+    <div class="zest-modal-overlay" role="dialog" aria-modal="true" aria-label="${escapeHTML(labels.title)}">
       <div class="zest-modal">
         <div class="zest-modal__header">
-          <h2 class="zest-modal__title">${labels.title}</h2>
-          <p class="zest-modal__description">${labels.description} ${policyLink}</p>
+          <h2 class="zest-modal__title">${escapeHTML(labels.title)}</h2>
+          <p class="zest-modal__description">${escapeHTML(labels.description)} ${policyLink}</p>
         </div>
         <div class="zest-modal__body">
           ${categoriesHTML}
         </div>
         <div class="zest-modal__footer">
           <button type="button" class="zest-btn zest-btn--primary" data-action="save">
-            ${labels.save}
+            ${escapeHTML(labels.save)}
           </button>
           <button type="button" class="zest-btn zest-btn--secondary" data-action="accept-all">
-            ${labels.acceptAll}
+            ${escapeHTML(labels.acceptAll)}
           </button>
           <button type="button" class="zest-btn zest-btn--ghost" data-action="reject-all">
-            ${labels.rejectAll}
+            ${escapeHTML(labels.rejectAll)}
           </button>
         </div>
       </div>

package/src/ui/styles.js

@@ -2,11 +2,18 @@
  * Styles - Shadow DOM encapsulated CSS with theming
  */
 
+import { safeColor, sanitizeCustomStyles } from '../core/security.js';
+
+const DEFAULT_ACCENT = '#4F46E5';
+
 /**
  * Generate CSS with custom properties
  */
 export function generateStyles(config) {
-  const accentColor = config.accentColor || '#4F46E5';
+  // Only accept colors that pass strict validation — an unvalidated
+  // value is a CSS-injection vector (e.g. `red; } * { display:none; /*`).
+  const accentColor = safeColor(config.accentColor) || DEFAULT_ACCENT;
+  const customCss = sanitizeCustomStyles(config.customStyles);
 
   return `
 :host {
@@ -476,15 +483,29 @@ export function generateStyles(config) {
 .zest-hidden {
   display: none !important;
 }
-${config.customStyles || ''}
+${customCss}
 `;
 }
 
 /**
- * Adjust color brightness
+ * Adjust color brightness. Falls back to the default accent if the input
+ * cannot be parsed as a hex color (non-hex inputs pass safeColor but
+ * can't be brightness-shifted mathematically).
  */
 function adjustColor(hex, percent) {
-  const num = parseInt(hex.replace('#', ''), 16);
+  if (typeof hex !== 'string' || !/^#[0-9a-fA-F]{3,8}$/.test(hex.trim())) {
+    hex = DEFAULT_ACCENT;
+  }
+  let clean = hex.trim().replace('#', '');
+  // Expand 3-digit form to 6
+  if (clean.length === 3) {
+    clean = clean.split('').map(c => c + c).join('');
+  }
+  // Strip alpha if present
+  if (clean.length === 8) clean = clean.slice(0, 6);
+  if (clean.length !== 6) clean = DEFAULT_ACCENT.slice(1);
+
+  const num = parseInt(clean, 16);
   const amt = Math.round(2.55 * percent);
   const R = Math.min(255, Math.max(0, (num >> 16) + amt));
   const G = Math.min(255, Math.max(0, ((num >> 8) & 0x00ff) + amt));

package/src/ui/widget.js

@@ -4,6 +4,7 @@
 
 import { generateStyles, COOKIE_ICON } from './styles.js';
 import { getCurrentConfig } from '../config/parser.js';
+import { escapeHTML } from '../core/security.js';
 
 let widgetElement = null;
 let shadowRoot = null;
@@ -13,10 +14,11 @@ let shadowRoot = null;
  */
 function createWidgetHTML(config) {
   const labels = config.labels.widget;
+  const safeLabel = escapeHTML(labels.label);
 
   return `
     <div class="zest-widget">
-      <button type="button" class="zest-widget__btn" aria-label="${labels.label}" title="${labels.label}">
+      <button type="button" class="zest-widget__btn" aria-label="${safeLabel}" title="${safeLabel}">
         <span class="zest-widget__icon">${COOKIE_ICON}</span>
       </button>
     </div>