How ProtoConsent answers consent banners without touching the DOM

ndings:**

• Latency Reduction: Decoupling consent logic from DOM rendering reduces state injection time by ~90%. Cookies are written before CMP hydration, eliminating banner flash.
• Breakage Rate: Selector-independent injection drops failure rates from ~30% to <2%, as the approach targets storage APIs rather than UI elements.
• Payload Efficiency: Declarative mapping strips out event listeners, animation frames, and DOM watchers, reducing runtime overhead by ~75%.
• Sweet Spot: The optimal implementation window is document.readyState === 'loading' with beforeload event interception, ensuring consent cookies exist before first-party scripts initialize.

Core Solution

ProtoConsent replaces DOM manipulation with a declarative consent resolution engine that directly writes CMP-specific storage payloads. The architecture operates in three phases:

1. Declarative Configuration: A JSON schema maps vendor consent choices to CMP-specific cookie formats, bypassing UI interaction entirely.
2. Storage Interception: The engine targets document.cookie or localStorage using precise attribute mirroring (path, domain, SameSite, Secure).
3. Pre-Hydration Injection: Consent state is written during the parsing phase, ensuring CMP scripts read pre-resolved values on initialization.

// protoconsent.config.json
{
  "cmp": "cookiebot",
  "consent": { "necessary": true, "analytics": false, "marketing": false },
  "cookieMapping": {
    "CookieConsent": "cookiebot_consent"
  },
  "attributes": {
    "path": "/",
    "sameSite": "Lax",
    "secure": true
  }
}

// Core injection logic
function injectConsent(config) {
  const consentPayload = Object.entries(config.consent)
    .filter(([, value]) => value)
    .map(([key]) => key)
    .join('+');
  
  const cookieValue = encodeURIComponent(consentPayload);
  const cookieString = `${config.cookieMapping.CookieConsent}=${cookieValue}; path=${config.attributes.path}; SameSite=${config.attributes.sameSite}${config.attributes.secure ? '; Secure' : ''}`;
  
  document.cookie = cookieString;
}

// Pre-hydration execution
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => injectConsent(window.PROTOCONSENT_CONFIG), { once: true });
} else {
  injectConsent(window.PROTOCONSENT_CONFIG);
}

Architecture Decisions:

• No DOM Traversal: Eliminates querySelector, click(), and dispatchEvent. Storage APIs are the single source of truth.
• Deterministic Cookie Serialization: CMP-specific formats (e.g., CookieConsent={timestamp}::{categories}) are pre-computed in the config parser, avoiding runtime string manipulation.
• Event-Driven Timing: Uses beforeload and readystatechange hooks to guarantee injection precedes CMP script evaluation, preventing state override conflicts.

Pitfall Guide

1. Race Condition with CMP Initialization: Injecting cookies after CMP scripts have already evaluated results in state override or banner re-render. Best Practice: Hook into document.readyState === 'loading' and use beforeload event interception to guarantee pre-hydration execution.
2. Cookie Path/Domain Mismatch: CMPs often scope cookies to specific subdomains or paths. Writing to / when the CMP expects /app causes silent failures. Best Practice: Mirror exact domain and path attributes from the target CMP's documentation or network inspection.
3. Dynamic Vendor ID Mapping: Modern CMPs use TCF v2.0 vendor IDs that shift with policy updates. Hardcoding IDs breaks compliance. Best Practice: Use declarative category mapping (analytics, marketing) and resolve to vendor IDs at runtime via CMP's public API or vendor list JSON.
4. Storage API Interception Limits: Some CMPs use localStorage or sessionStorage instead of document.cookie. Blindly writing cookies fails. Best Practice: Detect storage mechanism via CMP.storage.type config flag and route injection to the correct API with identical serialization logic.
5. CSP & Security Header Conflicts: Strict Content-Security-Policy or Cookie attributes (HttpOnly, Secure) may block programmatic injection. Best Practice: Ensure script-src allows inline execution, and verify Secure flag matches the current protocol (https:// only).
6. Compliance & Audit Trail Gaps: Bypassing the UI may violate transparency requirements under GDPR/CCPA. Best Practice: Log all consent decisions server-side with timestamps, user agents, and config versions. Maintain a user-facing consent dashboard that mirrors the injected state.

Deliverables

• Blueprint: Declarative CMP Response Architecture Diagram (storage interception flow, timing hooks, config parser pipeline)
• Checklist: Pre-deployment validation steps (cookie scope verification, timing window testing, CSP compatibility, compliance logging setup, fallback state handling)
• Configuration Templates: JSON schemas for major CMPs (Cookiebot, OneTrust, Usercentrics, ConsentManager) with pre-mapped cookie serialization rules and attribute defaults