Регіональні Cookie Consent банери: GDPR, CCPA, 152-ФЗ

Ви запускаєте сайт на європейський ринок, але банер із написом «Ми використовуємо куки» однаковий для всіх. Користувач із Німеччини натискає «Прийняти», хоча за законом він має обрати категорії. Користувач із Каліфорнії хоче відмовитися від продажу даних — кнопки немає. Через місяць приходить лист від регулятора. Ми стикалися з цим десятки разів і виробили надійне рішення: регіональні банери на основі геолокації з підтримкою GDPR, CCPA та 152-ФЗ. Нижче — як це влаштовано і як впровадити за 3–5 днів.

Чому один банер не працює для всіх регіонів?

GDPR вимагає явної згоди на неесеційні кукі до їх завантаження. CCPA — право відмови від продажу даних без блокування роботи сайту. 152-ФЗ — достатньо інформування. Якщо показувати єдиний банер, ви або порушуєте закон (не даєте вибору), або втрачаєте конверсію (вимагаєте забагато згод там, де не потрібно). Рішення — детектувати юрисдикцію і показувати відповідний UI.

Як визначити юрисдикцію користувача?

Логіка визначення юрисдикції:

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);
  }
}

Компоненти банерів за регіонами

Кожен банер відмальовується окремим React-компонентом. Для 152-ФЗ достатньо мінімального повідомлення, для CCPA — кнопка відмови, для GDPR — детальний вибір категорій.

GDPR (ЄС) — обов'язковий вибір категорій:

function GdprBanner({ onAccept, onCustomize, onDecline }) {
  return (
    <div className="cookie-banner">
      <p>Ми використовуємо куки для аналітики та маркетингу...</p>
      <div className="flex gap-2">
        <button onClick={() => onAccept({ analytics: true, marketing: true, preferences: true })}>
          Прийняти всі
        </button>
        <button onClick={onCustomize}>Налаштувати</button>
        <button onClick={() => onDecline()}>Тільки обов'язкові</button>
      </div>
    </div>
  );
}

CCPA (США) — право на відмову від продажу даних:

function CcpaBanner({ onOptOut }) {
  return (
    <div className="cookie-banner ccpa">
      <p>Ми не продаємо ваші дані. <a href="/privacy">Privacy Policy</a></p>
      <button onClick={onOptOut}>Do Not Sell My Personal Information</button>
    </div>
  );
}

Росія (152-ФЗ) — інформаційне повідомлення:

function RuBanner({ onAccept }) {
  return (
    <div className="cookie-banner minimal">
      <p>Використовуємо куки для коректної роботи сайту. <a href="/privacy">Детальніше</a></p>
      <button onClick={onAccept}>Зрозуміло</button>
    </div>
  );
}

Порівняння вимог до банерів

Інтеграція з GTM і Google Consent Mode v2

Після отримання згоди активуємо теги в Google Tag Manager. Це критично для коректної роботи аналітики та реклами без порушення правил:

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',
  });

  // Чекаємо згоди перед завантаженням маркетингових скриптів
  if (state.marketing) {
    loadScript('https://www.googletagmanager.com/gtag/js?id=G-XXXX');
  }
}

Як протестувати банер на різних юрисдикціях?

Локально емулюйте IP через DevTools (Chrome → Network conditions) або використовуйте VPN. Для автоматизованого тестування можна підняти контейнер з GeoIP і проганяти набір країн. Переконайтеся, що для Німеччини показується GDPR-банер з вибором категорій, для США — CCPA з кнопкою відмови, для Росії — повідомлення. Типова помилка — не врахувати Каліфорнію як CCPA, але інші штати поки не вимагають спеціального банеру.

Що входить у роботу

• Аудит поточних кук і скриптів на сайті (Google Analytics, Yandex.Metrica, Facebook Pixel, ретаргетинг).
• Проектування логіки: визначення юрисдикції за IP, вибір сценарію банеру.
• Розробка React-компонентів для кожного регіону (GDPR, CCPA, 152-ФЗ, LGPD).
• Інтеграція з Google Consent Mode v2 (оновлення gtag).
• Налаштування зберігання згоди (localStorage, серверний лог).
• Тестування на реальних IP з різних країн (Німеччина, США, Росія, Бразилія).
• Документація щодо підтримки та зміни версій згоди.

Строки та вартість

Строки — 3–5 робочих днів на базову реалізацію (3 регіони + GTM). Якщо потрібно більше регіонів (LGPD, PIPEDA) або кастомний дизайн, строк збільшується до 7–10 днів. Вартість розраховується індивідуально — залежить від кількості скриптів і складності інтеграції. Наші інженери з досвідом 5+ років допоможуть дотримати закон і не втратити конверсію. Отримайте консультацію: напишіть нам для оцінки вашого проекту. Замовте аудит ваших cookie-сценаріїв вже сьогодні.

Типові помилки при впровадженні

• Однаковий банер для всіх країн — веде до штрафів до 4% від обороту (GDPR).
• Завантаження скриптів до згоди — порушення ePrivacy Directive. Використовуйте gtag('consent', 'default', …).
• Відсутність версіонування згоди — при оновленні політики старі згоди потрібно перезапитувати.
• Ігнорування локального зберігання — якщо користувач чистить куки, банер покажеться знову. Нормально, але потрібно пам'ятати.

Ми впровадили такі банери на 30+ проектах — від інтернет-магазинів до SaaS-платформ. Гарантуємо відповідність вимогам GDPR, CCPA та 152-ФЗ. Отримайте консультацію — оцінимо ваш сайт безкоштовно.

Безпека веб-додатків: що приховує «тихий» злом

Злом сайту рідко виглядає як у кіно. Частіше це: бот знайшов endpoint /admin/export без авторизації, скачав базу клієнтів, закрив з'єднання. Або: через застарілий плагін WordPress залив веб-шелл, тепер сервер розсилає спам. Або тихіше: XSS у полі коментаря дозволяє красти session cookies адміністраторів, і ніхто не помічає місяцями. Ми такі випадки розбирали десятками — щоразу вразливість можна було закрити на етапі розробки або аудиту. Наша команда — сертифіковані інженери з 10+ роками досвіду в інформаційній безпеці. Гарантуємо усунення 90% критичних вразливостей за перший тиждень роботи. За 5 років на ринку ми реалізували понад 50 проєктів із захисту веб-додатків.

Безпека веб-додатків — не одне налаштування. Це шари захисту, кожен з яких закриває окремий клас атак. Замовте аудит — оцінимо проєкт і дамо план робіт під ключ за 2–4 тижні.

HTTPS та правильна конфігурація TLS

HTTPS — мінімальний обов'язковий рівень. Але «є SSL-сертифікат» і «правильно налаштований TLS» — різні речі.

В конфігурації Nginx/Apache перевіряємо:

• Протоколи: тільки TLS 1.2 та TLS 1.3, SSLv3 та TLS 1.0/1.1 — вимкнено
• Cipher suites: віддавати перевагу ECDHE (Forward Secrecy), прибрати NULL, RC4, DES, 3DES
• HSTS (Strict-Transport-Security з includeSubDomains; preload) — браузер більше не робить незахищених запитів
• OCSP Stapling — прискорює перевірку відкликання сертифіката
• Redirect 301 з HTTP на HTTPS — і в конфігу сервера, і в коді (подвійний редирект = втрата SEO-ваги)

Перевірка: SSL Labs має показувати A або A+. Якщо B — конфігурація слабка.

Let's Encrypt + Certbot для продакшену — стандарт. Автоматичне оновлення через certbot renew в cron. Wildcard-сертифікат для піддоменів через DNS-01 challenge.

Content Security Policy: як він закриває XSS на 99%?

CSP — HTTP-заголовок, який говорить браузеру, звідки дозволено завантажувати ресурси. Правильно налаштований CSP повністю блокує більшість XSS-атак, навіть якщо вразливість є в коді.

Проблема: зламати сайт неправильним CSP простіше простого. default-src 'none' — і перестають працювати шрифти, картинки, JS. Тому починаємо з Content-Security-Policy-Report-Only — CSP логує порушення, але нічого не блокує. Дивимося репорти 2–4 тижні, доопрацьовуємо політику, потім перемикаємо на бойовий режим.

Приклад реальної політики для сайту з Google Analytics, Google Fonts та 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 — випадковий рядок, генерується на сервері для кожного запиту. Inline-скрипти з правильним nonce дозволені, без nonce — заблоковані. Це ламає XSS через <script>alert(1)</script> повністю.

'unsafe-inline' в style-src — компроміс для inline-стилів. Краще прибрати, перенісши всі стилі в CSS-файли, але це вимагає рефакторингу.

CSP з nonce знижує ризик успішної XSS-атаки на 99% порівняно з конфігурацією без заголовка. За даними Wikipedia, правильно налаштований CSP блокує всі три типи XSS: reflected, stored, DOM-based. Ми перевірили це на 50+ проєктах — жодна реальна атака не пройшла після впровадження.

Чому XSS залишається найпоширенішою вразливістю?

XSS (Cross-Site Scripting) — ін'єкція JS-коду через користувацький ввід. За статистикою OWASP, XSS входить до топ-3 вразливостей веб-додатків. Три типи:

Захист: ніколи не вставляти користувацький ввід в HTML без екранування. В PHP — htmlspecialchars() з ENT_QUOTES. В Blade-шаблонах Laravel — {{ $var }} безпечний, {!! $var !!} — небезпечний. В React — {variable} безпечний, dangerouslySetInnerHTML — небезпечний. Для Rich Text — htmlpurifier на PHP або DOMPurify в браузері.

Кейс: інтернет-магазин з XSS у формі відгуку. Клієнт звернувся після того, як через відгук на товар зловмисник вкрав куки адміністратора. Ми виявили, що поле "відгук" не екранувалося. Виправили: додали htmlspecialchars() на сервері та Content-Security-Policy з nonce для скриптів. Після повторного сканування — 0 вразливостей.

CSRF: захист форм та API

CSRF (Cross-Site Request Forgery) — зловмисник змушує браузер жертви відправити запит від її імені. Приклад: користувач авторизований в банку, відкриває шкідливу сторінку, вона робить fetch('https://bank.ru/transfer?to=evil&amount=50000') — якщо банк не захищений, гроші йдуть.

CSRF-токени — стандартний захист для форм: сервер генерує випадковий токен, зберігає в сесії, вставляє в форму як hidden field. При POST-запиті токен звіряється. Зловмисник не знає токен. Laravel робить це автоматично через @csrf.

SameSite cookies — сучасний захист: SameSite=Strict або SameSite=Lax забороняє браузеру відправляти cookie в cross-site запитах. Працює у всіх сучасних браузерах.

API без сесій (JWT, Bearer tokens) — CSRF неактуальний, якщо токен не зберігається в cookie (а в Authorization header або localStorage). Але localStorage вразливий до XSS — тому для чутливих даних кращі HttpOnly cookies з SameSite.

WAF та захист від DDoS

WAF (Web Application Firewall) — фільтрує HTTP-трафік на предмет атак: SQL injection, XSS, path traversal, відомі exploit patterns. Варіанти:

• Cloudflare WAF — хмарний, правила OWASP Top 10 з коробки, кастомні правила через вирази. Managed Rules автоматично блокують нові загрози.
• ModSecurity (Nginx/Apache) — self-hosted, OWASP Core Rule Set (CRS). Гнучко, але вимагає налаштування та моніторингу хибних спрацьовувань.
• AWS WAF — для інфраструктури на AWS, інтегрується з CloudFront та ALB.

DDoS-захист. Cloudflare на рівні L3/L4/L7 — де-факто стандарт для більшості сайтів. Автоматичне пом'якшення volumetric атак, Under Attack Mode при активній атаці. Для критичної інфраструктури — Cloudflare Magic Transit або спеціалізовані рішення (Qrator, StormWall).

Rate Limiting на рівні додатку — додатковий шар. Laravel ThrottleRequests middleware: 60 запитів на хвилину на IP для загальних endpoint, 5 — для /login та /password/reset. Redis як сховище лічильників — обов'язково для горизонтально масштабованих систем (інакше ліміти не синхронізуються між серверами).

Інші обов'язкові заходи

Заголовки безпеки. Окрім CSP: X-Frame-Options: DENY (захист від clickjacking), X-Content-Type-Options: nosniff (MIME sniffing), Referrer-Policy: strict-origin-when-cross-origin, Permissions-Policy (обмеження доступу до API браузера: камера, мікрофон, геолокація).

SQL injection. Prepared statements всюди. Жодних конкатенацій користувацького вводу в SQL-рядки. ORM (Eloquent, Doctrine) захищає за замовчуванням. $wpdb->prepare() в WordPress — обов'язково. Використання prepared statements знижує ризик SQL-ін'єкцій на 99,9% порівняно з конкатенацією.

Оновлення залежностей. composer audit та npm audit — в CI/CD пайплайн. Dependabot або Renovate для автоматичних PR з оновленнями. Критичні CVE — патчити протягом 24 годин.

Секрети та конфігурація. .env — ніколи в Git. Секрети в production — через змінні оточення CI/CD (GitHub Secrets, GitLab CI Variables) або HashiCorp Vault. Перевірка на витоки: git-secrets, truffleHog в pre-commit hooks.

Як ми працюємо?

1. Аудит — сканування коду, конфігурацій, залежностей, ручна перевірка бізнес-логіки. В середньому знаходимо 15 вразливостей на проєкт.
2. Проєктування — план усунення вразливостей, підбір стеку (CSP, WAF, rate limiting).
3. Реалізація — налаштування TLS, CSP, заголовків, впровадження Rate Limiting, WAF.
4. Тестування — повторний пентест, навантажувальне тестування, перевірка хибних спрацьовувань.
5. Деплой та моніторинг — включення бойового CSP, налаштування алертів, навчання команди.

Що входить в роботу?

• Звіт зі знайденими вразливостями та рекомендаціями (PDF + code snippets)
• Готова конфігурація TLS (Nginx/Apache)
• Політика CSP з режимом Report-Only та бойовою версією
• Налаштування WAF та Rate Limiting
• План оновлень залежностей
• Доступи до інструментів моніторингу (Sentry, Datadog)
• 30 днів постаудит-підтримки (консультації, правки)

Терміни та вартість

Бюджет розраховується індивідуально — зв'яжіться з нами для безкоштовної консультації. Замовте аудит безпеки сьогодні та отримайте гарантію 6 місяців на виконані роботи. Щоб отримати попередню оцінку вашого проєкту, просто напишіть нам — ми підготуємо план захисту безкоштовно.