← knowledge.oriz.in

Klaro

service securityconsentcookie-bannerklaroossprivacygdpr

Klaro

Role

The family's on-demand cookie consent manager. Default posture is no banner at all — see security/cookie-banner-policy.md — because the primary analytics signal, Cloudflare Web Analytics, is cookie-less and GDPR-safe.

Klaro engages only when:

  1. A site loads a cookie-issuing tracker (e.g. GA4, PostHog in identified mode), AND
  2. The visitor is in the EU / UK (geo-detected via the Cloudflare CF-IPCountry header or equivalent edge signal).

Both conditions must be true. Non-EU visitors loading the same page see no banner. Pages without cookie-issuing trackers never load Klaro at all.

Free tier

Card / subscription required?

NO. Klaro is published by KIProtect under BSD-3 on GitHub: kiprotect/klaro and on npm as klaro. The hosted "Klaro Cloud" SaaS exists but is not used by the family — we ship the OSS bundle from jsDelivr.

How sites consume it

<!-- Loaded only when both: (a) cookie-issuing tracker on this page,
     and (b) edge says CF-IPCountry is in [EU + UK + Iceland + Norway + Liechtenstein].
     The condition runs in the page's <head> before the tracker. -->
<script>
  if (window.__needsConsentBanner) {
    const s = document.createElement('script');
    s.src = 'https://cdn.jsdelivr.net/npm/klaro@latest/dist/klaro.js';
    s.defer = true;
    document.head.appendChild(s);
  }
</script>

The __needsConsentBanner flag is set by an inline edge-emitted snippet that reads CF-IPCountry. The shared <ConsentBanner> helper ships from @chirag127/oriz-kit (forward reference) so no site re-implements the gate logic.

CSP coupling

The family's _headers preset needs script-src extended with https://cdn.jsdelivr.net (already present for jsDelivr consumption) and style-src extended with 'unsafe-inline' for the modal's inline styles only on pages where Klaro is loaded — the kit emits the delta header conditionally.

Alternatives

Swap cost

Low — Klaro is invoked from one helper in @chirag127/oriz-kit. Swapping to Tarteaucitron is a script-tag + config-shape change.

Why this is our pick

Cross-refs