DEV Community

Cover image for Cookie Guard JS: The GDPR/CCPA Consent Manager (No Dependencies, 12.8 kB, 22 Languages)
Joseba Mirena
Joseba Mirena

Posted on

Cookie Guard JS: The GDPR/CCPA Consent Manager (No Dependencies, 12.8 kB, 22 Languages)

#javascript #opensource #privacy #showdev

Cookie Guard 🛡️

GDPR/CCPA compliance Cookies Consent Management.

A GDPR/CCPA 2026 compliance, simple and customizable Cookies Management system.

Cookie Guard interface showing consent management

MAIN FEATURES

  • Legal Compliance: Fully GDPR/CCPA compliant workflow (2026 standards).
  • Hybrid Modes: Supports both full third-party consent and "no-cookies" informational mode.
  • Smart Execution: Auto-activates Analytics/Marketing scripts (handles type="text/plain").
  • Zero Dependencies: Pure Vanilla JavaScript; no jQuery or external libraries required.
  • Privacy Focus: Optional persistent "Privacy" floating button to re-open settings.
  • Legal Terms: Optional acceptance and Legal URL smart handling.
  • Global Reach: Support for 22 languages (LTR & RTL) with automatic browser detection.
    • Locales: en, es, ca, eu, gl, et, ar, pt, pl, vi, fr, de, it, ru, zh, ja, id, ko, tr, nl, hi, bn.
  • Performance: Ultra-lightweight architecture (~12.8 kB minified).
  • Accessibility: Implements ARIA standards for screen readers.
  • Encapsulation: Built within an IIFE to ensure no global namespace pollution.
  • UI/UX: Dynamic CSS/HTML injection with a fully responsive, mobile-first design.
  • Customization: Flexible configuration for expiration, link colors, and button border-radius.
  • Developer API: Public toggle, open, and reset methods for external control.

📦 Installation

Add the minified version before the closing </body> tag:

<script 
    src="https://opensource.josebamirena.com/cookie-guard/3.0.0/dist/cookie-guard.min.js" 
    integrity="sha384-4TomZ6aXKNjC0fGi+v+GQTBp9kmS006nQ3SriGo6U0a93lhADVwmw8toL8JQW4vB" 
    crossorigin="anonymous">
</script>
Enter fullscreen mode Exit fullscreen mode

⚙️ Configuration

Cookie Guard default Initialization 

<script>
    document.addEventListener('DOMContentLoaded', () => CookieGuard.init());
</script>
Enter fullscreen mode Exit fullscreen mode

Initialization default variables and values

Property Type Default Description
locale string auto 'auto' or 2-letter language ISO code.
consent boolean true true for 3rd party scripts, false for info-only banner.
url string null Relative URL to your legal/cookies policy page.
reopen boolean true Renders the floating privacy button.
radius integer 12 Buttons border-radius in pixels.
delay integer 800 Modal entrance delay in milliseconds.
link string #3b82f6 Primary link color.
hover string #10b981 Link hover color.
separator string • Modal footer links separator
expiration integer 365 Consent cookie expiration in days. 
<script>
    const defaults = {
        locale: 'auto', // @string 'auto' or 2-letter ISO code.
        consent: true, // @bool true for 3rd party scripts, false for info-only banner.
        url: null, // @null|string Relative URL to your legal/cookies policy page.
        reopen: true, // @bool Renders the floating privacy button.
        radius: 12, // @int Buttons border-radius in pixels.
        delay: 800, // @int Modal entrance delay in milliseconds.
        link: "#3b82f6", // @string Primary link color.
        hover: "#10b981", // @string Link hover color.
        separator: "•", // @string Modal footer links separator
        expiration: 365, // @int Consent cookie expiration in days.
    };
</script>
Enter fullscreen mode Exit fullscreen mode

Cookie Guard Customized Example 

<script>
    document.addEventListener('DOMContentLoaded', () => 
        CookieGuard.init({
            locale: 'en', // fixed language
            url: "/legal", // legal relative url
            link: "#ff0000", // red links
            radius: 8, // buttoms radius
        })
    );
</script>
Enter fullscreen mode Exit fullscreen mode

Cookie Guard non third party cookies mode 

<script>
    document.addEventListener('DOMContentLoaded', () => 
        CookieGuard.init({
            locale: 'auto', // auto detect language
            consent: false, // no third party cookies mode
        })
    );
</script>
Enter fullscreen mode Exit fullscreen mode

🛠️ Script Implementation

To let Cookie Guard manage your scripts, add the type attribute text/plain and add the data-cg-category attribute (analytics|marketing):

Test script example 

<script 
    type="text/plain" 
    data-cg-category="analytics">
    console.log('Analytics script executed');
</script>
Enter fullscreen mode Exit fullscreen mode

Analytics script example 

<script 
    type="text/plain" 
    data-cg-category="analytics" 
    src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y">
</script>
Enter fullscreen mode Exit fullscreen mode

Marketing script example 

<script type="text/plain" data-cg-category="marketing">
    console.log("Facebook pixel is legally enabled.");
    fbq('init', '123456789');
    fbq('track', 'PageView');
</script>
Enter fullscreen mode Exit fullscreen mode

🕹️ Developer API

Toggle Modal 

<a href="javascript:void(0)" onclick="CookieGuard.toggle()">Privacy</a>
Enter fullscreen mode Exit fullscreen mode

Force Open 

<a href="javascript:void(0)" onclick="CookieGuard.open()">Open Privacy</a>
Enter fullscreen mode Exit fullscreen mode

Hard Reset:

Debug Shortcut: CTRL + SHIFT + X to reset state instantly.

<a href="javascript:void(0)" onclick="CookieGuard.reset()">Reset Privacy</a>
Enter fullscreen mode Exit fullscreen mode

🎯 Live Demo

Try Cookie Guard live on my website:

👉 Cookie Guard Demo

See how it handles consent, 22 languages, and third-party script blocking in action.

Joseba Mirena Fernandez Florin

Made with ❤️ by Joseba Mirena

Top comments (5)

Collapse
 
joseba-mirena profile image
Joseba Mirena • • Edited

🛡️ Cookie Guard JS v3.4.0 - Performance Release

Minified size 13 kB.

📝 Changelog from v3.2.0 - Accessibility Release

✨ Added

  • Added wording localStorage cache (eliminates redundant network requests)

🔧 Updated

  • Wording files optimized
  • Code weight optimization
  • Updated main buttons accessibility
  • Updated default consent to false
  • Updated main documentation

👉 Cookie Guard JS v3.4.0

👉 GitHub repository

Collapse
 
joseba-mirena profile image
Joseba Mirena •

New Cookie Guard JS v3.2.0 released

📝 Changelog from 3.0.0

v3.2.0 - Accessibility Release

Added

  • Added aria-label to legal acceptance checkbox for better screen reader support

Fixed

  • Fixed missing aria-labelledby attribute in minified version (modal dialog now properly labeled)
  • Fixed "uncrawlable link" for policy link

Previous Changes (v3.0.0)

  • ✅ 2026 GDPR/CCPA compliance workflow.
  • ✅ Added support for sites not using 3rd party cookies.
  • ✅ i18n 22 languages, LTR & RTL, with dynamic JSON loading.
  • ✅ Optimization: Minified size reduced from 38.8 kB to 12.8 kB.
  • ✅ Added reset Cookies public method and Shortcut (CTRL+SHIFT+X).
  • ✅ UX: Improved modal animations and RTL support.
  • ✅ Performance improvements.
  • ✅ Security improvements.
  • ✅ Proprietary to MIT license.
  • ⚠️ Version 2.0.0 deprecated.

🎯 Live Demo

Try Cookie Guard live on my website:

👉 Cookie Guard Demo

See how it handles consent, 22 languages, and third-party script blocking in action.

Collapse
 
magikalius profile image
MaGi KALiuS •

This is really impressive! A fully compliant consent manager with zero dependencies and only 12.8 KB is no small feat. Building it from scratch shows real attention to detail — most people would reach for a bloated third-party library without thinking twice. Love the fact that it also contains the Cookie Policy and handles own terms acceptance.

Collapse
 
joseba-mirena profile image
Joseba Mirena •

Thank you for your feedback, I really appreciate it :love:

Collapse
 
joseba-mirena profile image
Joseba Mirena •

Would ❤️ to hear how Cookie Guard works for your projects. If you run into any issues or have feature requests, drop them here, open an issue on GitHub or reach me at my website. Let's build better tools together! 👽