Design a Cookie Consent Service

14 collapsed lines
1
interface ConsentConfig {
2
  tenantId: string
3
  apiEndpoint: string
4
  categories: CategoryConfig[]
5
  regulation?: "auto" | "gdpr" | "ccpa" | "lgpd"
6
  onConsentChange?: (consent: ConsentStatus) => void
7
}
8

9
interface ConsentStatus {
10
  categories: Record<string, boolean>
11
  regulation: string
12
  timestamp: string
13
  showBanner: boolean
14
}
15

16
class ConsentSDK {
17
  private config: ConsentConfig
18
  private deviceId: string
19
  private consent: ConsentStatus | null = null
20

21
  async init(config: ConsentConfig): Promise<void> {
22
    this.config = config
23
    this.deviceId = await this.getOrCreateDeviceId()
24

25
    // Fetch consent status
26
    this.consent = await this.fetchConsent()
27

28
    // Apply consent immediately
29
    this.applyConsent(this.consent)
30

31
    // Show banner if needed
32
    if (this.consent.showBanner) {
33
      this.renderBanner()
34
    }
35
  }
36

37
  private async getOrCreateDeviceId(): Promise<string> {
38
    // Check localStorage first
39
    let deviceId = localStorage.getItem("_consent_device_id")
40
    if (deviceId) return deviceId
41

42
    // Generate fingerprint
43
    deviceId = await this.generateFingerprint()
44
    localStorage.setItem("_consent_device_id", deviceId)
45
    return deviceId
46
  }
47

48
  private async generateFingerprint(): Promise<string> {
49
    // Collect browser signals (privacy-preserving subset)
50
    const signals = {
51
      userAgent: navigator.userAgent,
52
      language: navigator.language,
53
      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
16 collapsed lines
54
      screenResolution: `${screen.width}x${screen.height}`,
55
      colorDepth: screen.colorDepth,
56
      // Avoid canvas fingerprinting (privacy concern)
57
    }
58

59
    // Hash to create stable identifier
60
    const data = JSON.stringify(signals)
61
    const hashBuffer = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(data))
62
    const hashArray = Array.from(new Uint8Array(hashBuffer))
63
    return (
64
      "fp_" +
65
      hashArray
66
        .map((b) => b.toString(16).padStart(2, "0"))
67
        .join("")
68
        .slice(0, 32)
69
    )
70
  }
71
}

9 collapsed lines
1
interface BlockedScript {
2
  src: string
3
  category: string
4
  type: "script" | "iframe" | "img"
5
}
6

7
const blockedScripts: BlockedScript[] = []
8

9
function applyConsent(consent: ConsentStatus): void {
10
  // Find all scripts with consent requirements
11
  const scripts = document.querySelectorAll("script[data-consent-category]")
12

13
  scripts.forEach((script) => {
14
    const category = script.getAttribute("data-consent-category")
15
    const consented = consent.categories[category]
16

17
    if (consented) {
18
      // Enable script
19
      if (script.getAttribute("data-src")) {
20
        script.setAttribute("src", script.getAttribute("data-src")!)
21
        script.removeAttribute("data-src")
22
      }
23
      script.removeAttribute("type") // Remove text/plain blocker
24
    } else {
25
      // Keep blocked (or block if not already)
26
      if (script.getAttribute("src")) {
27
        script.setAttribute("data-src", script.getAttribute("src")!)
28
        script.removeAttribute("src")
29
        script.setAttribute("type", "text/plain")
30
      }
31
    }
32
  })
33

34
  // Handle dynamically added scripts
35
  observeNewScripts(consent)
36
}
37

38
function observeNewScripts(consent: ConsentStatus): void {
39
  const observer = new MutationObserver((mutations) => {
40
    mutations.forEach((mutation) => {
41
      mutation.addedNodes.forEach((node) => {
42
        if (node.nodeName === "SCRIPT") {
43
          const script = node as HTMLScriptElement
16 collapsed lines
44
          const category = script.getAttribute("data-consent-category")
45
          if (category && !consent.categories[category]) {
46
            // Block dynamically added non-consented script
47
            script.setAttribute("data-src", script.src)
48
            script.removeAttribute("src")
49
            script.type = "text/plain"
50
          }
51
        }
52
      })
53
    })
54
  })
55

56
  observer.observe(document.documentElement, {
57
    childList: true,
58
    subtree: true,
59
  })
60
}

14 collapsed lines
1
interface MigrationRequest {
2
  tenantId: string
3
  deviceId: string
4
  userId: string
5
  strategy: "device_wins_recent" | "user_wins" | "most_restrictive" | "prompt_user"
6
}
7

8
interface ConsentRecord {
9
  categories: Record<string, boolean>
10
  timestamp: Date
11
  source: "device" | "user"
12
}
13

14
async function migrateConsent(request: MigrationRequest): Promise<MigrationResult> {
15
  const { tenantId, deviceId, userId, strategy } = request
16

17
  // Fetch both consent records
18
  const [deviceConsent, userConsent] = await Promise.all([
19
    getConsentByDevice(tenantId, deviceId),
20
    getConsentByUser(tenantId, userId),
21
  ])
22

23
  // If no existing user consent, simply link device consent to user
24
  if (!userConsent) {
25
    await linkDeviceToUser(tenantId, deviceId, userId)
26
    return { migrated: true, conflicts: [] }
27
  }
28

29
  // If no device consent, keep user consent as-is
30
  if (!deviceConsent) {
31
    return { migrated: false, reason: "no_device_consent" }
32
  }
33

34
  // Merge based on strategy
35
  const merged = mergeConsent(deviceConsent, userConsent, strategy)
36

37
  // Write merged consent
38
  await updateUserConsent(tenantId, userId, merged.categories)
39

40
  // Audit the migration
41
  await auditMigration(tenantId, deviceId, userId, deviceConsent, userConsent, merged)
42

43
  // Invalidate caches
44
  await invalidateConsentCache(tenantId, deviceId)
45
  await invalidateConsentCache(tenantId, userId)
46

47
  return merged
48
}
49

50
function mergeConsent(device: ConsentRecord, user: ConsentRecord, strategy: string): MergeResult {
51
  const categories = new Set([...Object.keys(device.categories), ...Object.keys(user.categories)])
52

53
  const merged: Record<string, boolean> = {}
54
  const conflicts: Conflict[] = []
55

56
  for (const category of categories) {
57
    const deviceValue = device.categories[category]
58
    const userValue = user.categories[category]
59

60
    if (deviceValue === userValue) {
61
      merged[category] = deviceValue
62
      continue
63
    }
64

65
    // Conflict resolution based on strategy
66
    switch (strategy) {
67
      case "device_wins_recent":
68
        merged[category] = device.timestamp > user.timestamp ? deviceValue : userValue
15 collapsed lines
69
        break
70
      case "user_wins":
71
        merged[category] = userValue ?? deviceValue
72
        break
73
      case "most_restrictive":
74
        merged[category] = deviceValue === false || userValue === false ? false : true
75
        break
76
      case "prompt_user":
77
        conflicts.push({ category, deviceValue, userValue })
78
        break
79
    }
80
  }
81

82
  return { categories: merged, conflicts }
83
}

11 collapsed lines
1
import maxmind from "maxmind"
2

3
interface RegulationResult {
4
  regulation: "gdpr" | "ccpa" | "lgpd" | "none"
5
  country: string
6
  region?: string
7
  confidence: "high" | "medium" | "low"
8
}
9

10
const geoDb = await maxmind.open("/data/GeoLite2-City.mmdb")
11

12
function detectRegulation(ipAddress: string): RegulationResult {
13
  const geo = geoDb.get(ipAddress)
14

15
  if (!geo || !geo.country) {
16
    return { regulation: "gdpr", country: "unknown", confidence: "low" }
17
    // Default to strictest regulation when unknown
18
  }
19

20
  const country = geo.country.iso_code
21
  const region = geo.subdivisions?.[0]?.iso_code
22

23
  // GDPR: EU/EEA countries
24
  const gdprCountries = [
25
    "AT",
26
    "BE",
27
    "BG",
28
    "HR",
29
    "CY",
30
    "CZ",
31
    "DK",
32
    "EE",
33
    "FI",
34
    "FR",
35
    "DE",
36
    "GR",
37
    "HU",
38
    "IE",
39
    "IT",
40
    "LV",
41
    "LT",
42
    "LU",
43
    "MT",
44
    "NL",
45
    "PL",
46
    "PT",
47
    "RO",
48
    "SK",
16 collapsed lines
49
    "SI",
50
    "ES",
51
    "SE",
52
    // EEA
53
    "IS",
54
    "LI",
55
    "NO",
56
    // UK (still applies GDPR-equivalent)
57
    "GB",
58
  ]
59

60
  if (gdprCountries.includes(country)) {
61
    return { regulation: "gdpr", country, confidence: "high" }
62
  }
63

64
  // CCPA: California residents
65
  if (country === "US" && region === "CA") {
66
    return { regulation: "ccpa", country, region, confidence: "high" }
67
  }
68

69
  // LGPD: Brazil
70
  if (country === "BR") {
71
    return { regulation: "lgpd", country, confidence: "high" }
72
  }
73

74
  // Default: no specific regulation (still show banner for best practice)
75
  return { regulation: "none", country, confidence: "high" }
76
}
77

78
// Tenant-specific overrides
79
function applyTenantOverrides(detected: RegulationResult, tenantConfig: TenantConfig): RegulationResult {
80
  const override =
81
    tenantConfig.regulations.overrides?.[`${detected.country}-${detected.region}`] ||
82
    tenantConfig.regulations.overrides?.[detected.country]
83

84
  if (override) {
85
    return { ...detected, regulation: override }
86
  }
87

88
  return detected
89
}

9 collapsed lines
1
interface ResolvedConfig {
2
  tenantId: string
3
  domain: string
4
  categories: CategoryConfig[]
5
  banner: BannerConfig
6
  regulations: RegulationConfig
7
  sdk: SDKConfig
8
}
9

10
async function resolveConfig(tenantId: string, domain: string): Promise<ResolvedConfig> {
11
  // Check cache first
12
  const cacheKey = `tenant:config:${tenantId}:${domain}`
13
  const cached = await redis.get(cacheKey)
14
  if (cached) return JSON.parse(cached)
15

16
  // Load tenant base config
17
  const tenant = await db.tenants.findById(tenantId)
18
  if (!tenant) throw new Error("Tenant not found")
19

20
  // Apply domain-specific overrides
21
  let config = tenant.config
22
  if (tenant.domainOverrides?.[domain]) {
23
    config = deepMerge(config, tenant.domainOverrides[domain])
24
  }
25

26
  // Merge with global defaults
27
  const resolved = deepMerge(GLOBAL_DEFAULTS, config)
28

29
  // Cache for 5 minutes
30
  await redis.setex(cacheKey, 300, JSON.stringify(resolved))
31

32
  return resolved
33
}
34

35
// Configuration update propagation
36
async function updateTenantConfig(tenantId: string, updates: Partial<TenantConfig>): Promise<void> {
37
  // Update database
38
  await db.tenants.update(tenantId, updates)
39

40
  // Invalidate all cached configs for this tenant
41
  const keys = await redis.keys(`tenant:config:${tenantId}:*`)
42
  if (keys.length > 0) {
43
    await redis.del(...keys)
7 collapsed lines
44
  }
45

46
  // Trigger SDK regeneration if categories changed
47
  if (updates.categories) {
48
    await sdkBuildQueue.add({ tenantId, reason: "category_update" })
49
  }
50
}

7 collapsed lines
1
interface InvalidationTarget {
2
  tenantId: string
3
  identifier: string // device_id or user_id
4
  type: "device" | "user"
5
}
6

7
async function invalidateConsentCache(target: InvalidationTarget): Promise<void> {
8
  const { tenantId, identifier, type } = target
9

10
  // 1. Invalidate Redis cache
11
  const redisKey = `consent:${tenantId}:${identifier}`
12
  await redis.del(redisKey)
13

14
  // 2. Invalidate CDN edge cache
15
  const edgeKey = `consent/${tenantId}/${identifier}`
16
  await cdnPurge(edgeKey)
17

18
  // 3. Publish invalidation event for any connected clients
19
  await pubsub.publish(`consent:invalidate:${tenantId}`, {
20
    identifier,
21
    type,
22
    timestamp: Date.now(),
23
  })
24
}
25

26
// SDK listens for invalidation events
27
function setupInvalidationListener(tenantId: string): void {
28
  const eventSource = new EventSource(`/api/v1/consent/events?tenant=${tenantId}`)
29

30
  eventSource.onmessage = (event) => {
31
    const data = JSON.parse(event.data)
32
    if (data.identifier === currentDeviceId) {
33
      // Refetch consent immediately
4 collapsed lines
34
      refreshConsent()
35
    }
36
  }
37
}

9 collapsed lines
1
interface ConsentState {
2
  // Consent data
3
  status: ConsentStatus | null
4
  loading: boolean
5
  error: Error | null
6

7
  // UI state
8
  bannerVisible: boolean
9
  preferencesOpen: boolean
10

11
  // Pending changes
12
  pendingCategories: Record<string, boolean>
13
}
14

15
const consentStore = createStore<ConsentState>({
16
  status: null,
17
  loading: true,
18
  error: null,
19
  bannerVisible: false,
20
  preferencesOpen: false,
21
  pendingCategories: {},
22
})
23

24
// Actions
25
function updateCategory(category: string, value: boolean): void {
26
  consentStore.update((state) => ({
27
    ...state,
28
    pendingCategories: {
29
      ...state.pendingCategories,
30
      [category]: value,
31
    },
32
  }))
33
}
34

35
async function saveConsent(): Promise<void> {
36
  const { pendingCategories } = consentStore.get()
37

38
  consentStore.update((state) => ({ ...state, loading: true }))
39

40
  try {
41
    const result = await api.updateConsent(pendingCategories)
42
    consentStore.update((state) => ({
43
      ...state,
16 collapsed lines
44
      status: result,
45
      pendingCategories: {},
46
      bannerVisible: false,
47
      loading: false,
48
    }))
49

50
    // Persist to localStorage
51
    localStorage.setItem("_consent_status", JSON.stringify(result))
52

53
    // Apply to scripts
54
    applyConsent(result)
55
  } catch (error) {
56
    consentStore.update((state) => ({
57
      ...state,
58
      error,
59
      loading: false,
60
    }))
61
  }
62
}