Category-Based Personal Data Consent Form Implementation

Implementing a Category-Based Consent Form for Personal Data Processing

We develop consent forms with breakdown by processing purpose — not just "I agree to everything," but specific choices for each category. This approach requires not only frontend logic but also a robust backend for logging and applying consents. Our experience implementing GDPR-compliant solutions for web services shows that without categories, you risk fines of up to €20 million or 4% of annual global turnover. Contact us to evaluate your project — we can implement it turnkey in 2–3 business days, with a cost starting at €1,500. This is 60% less than hiring an in-house team.

Consent Categories

Standard set for a web service:

How to Set Up Consent Categories?

Categories are determined based on processing purposes stated in your privacy policy. For each category, decide whether it is mandatory for functioning. Non-mandatory categories can be disabled by the user. We use an adaptive component that loads the category list from a config or server — this allows changing the set without frontend rebuild.

Frontend Implementation

// ConsentBanner.jsx
import { useState, useEffect } from 'react'

const CONSENT_KEY = 'user_consent_v2'

const CATEGORIES = [
  {
    id: 'necessary',
    name: 'Necessary',
    description: 'Authentication, security, basic functionality',
    required: true
  },
  {
    id: 'analytics',
    name: 'Analytics',
    description: 'Google Analytics, Yandex.Metrica to improve the service',
    required: false
  },
  {
    id: 'marketing',
    name: 'Marketing',
    description: 'Personalized advertising and retargeting',
    required: false
  },
  {
    id: 'preferences',
    name: 'Preferences',
    description: 'Remember language, theme, and other preferences',
    required: false
  }
]

function ConsentBanner() {
  const [visible, setVisible] = useState(false)
  const [showDetails, setShowDetails] = useState(false)
  const [consents, setConsents] = useState({
    necessary: true,
    analytics: false,
    marketing: false,
    preferences: false
  })

  useEffect(() => {
    const stored = localStorage.getItem(CONSENT_KEY)
    if (!stored) setVisible(true)
    else applyConsents(JSON.parse(stored))
  }, [])

  const acceptAll = () => {
    const all = Object.fromEntries(CATEGORIES.map(c => [c.id, true]))
    saveConsents(all)
  }

  const rejectOptional = () => {
    const minimal = Object.fromEntries(
      CATEGORIES.map(c => [c.id, c.required])
    )
    saveConsents(minimal)
  }

  const saveConsents = (consent) => {
    localStorage.setItem(CONSENT_KEY, JSON.stringify({
      ...consent,
      version: 'v2024-03',
      timestamp: new Date().toISOString()
    }))
    applyConsents(consent)
    setVisible(false)
    reportConsentToServer(consent)
  }

  const applyConsents = (consent) => {
    if (consent.analytics) initAnalytics()
    if (consent.marketing) initMarketing()
  }

  if (!visible) return null

  return (
    <div className="consent-banner" role="dialog" aria-label="Cookie settings">
      <h3>We use cookies</h3>
      <p>For the site to work and improve your experience.</p>

      {showDetails && (
        <div className="consent-categories">
          {CATEGORIES.map(cat => (
            <label key={cat.id} className="consent-category">
              <input
                type="checkbox"
                checked={consents[cat.id]}
                disabled={cat.required}
                onChange={e => setConsents(prev => ({
                  ...prev,
                  [cat.id]: e.target.checked
                }))}
              />
              <div>
                <strong>{cat.name}</strong>
                <p>{cat.description}</p>
              </div>
            </label>
          ))}
        </div>
      )}

      <div className="consent-actions">
        <button onClick={acceptAll}>Accept all</button>
        <button onClick={rejectOptional}>Only necessary</button>
        {showDetails
          ? <button onClick={() => saveConsents(consents)}>Save settings</button>
          : <button onClick={() => setShowDetails(true)}>Customize</button>
        }
      </div>
    </div>
  )
}

Why Store Consents on the Server?

Storing in localStorage is convenient for quick access but offers no legal protection. When audited by a regulator, you must provide proof: who, when, and to what they consented. A server log records IP, user-agent, policy version, and exact timestamp. GDPR Article 7 requires consent to be demonstrable. Only backend logging ensures compliance. We implement an endpoint that receives data and stores it in PostgreSQL using a jsonb field. This approach is 3x more reliable for compliance than client-only storage.

Saving Consents on the Server

@app.route('/api/consent', methods=['POST'])
def save_consent():
    data = request.json
    user_id = current_user.id if current_user.is_authenticated else None

    consent_record = {
        'user_id': user_id,
        'session_id': session.get('id'),
        'ip': request.remote_addr,
        'user_agent': request.user_agent.string,
        'consent_data': data['consents'],
        'version': data.get('version'),
        'timestamp': datetime.utcnow(),
        'method': 'banner'
    }

    db.execute("""
        INSERT INTO consent_log
        (user_id, session_id, ip, user_agent, consent_data, version, accepted_at, method)
        VALUES (%(user_id)s, %(session_id)s, %(ip)s, %(user_agent)s,
                %(consent_data)s::jsonb, %(version)s, %(timestamp)s, %(method)s)
    """, consent_record)

    return jsonify({'status': 'saved'})

Applying Consents to Third-Party Scripts

function applyConsents(consents) {
  // Google Analytics
  if (consents.analytics) {
    window['ga-disable-G-XXXXXXXX'] = false
    gtag('consent', 'update', {
      analytics_storage: 'granted'
    })
  } else {
    window['ga-disable-G-XXXXXXXX'] = true
    gtag('consent', 'update', {
      analytics_storage: 'denied'
    })
  }

  // Facebook Pixel
  if (consents.marketing) {
    fbq('consent', 'grant')
  } else {
    fbq('consent', 'revoke')
  }
}

// Google Consent Mode v2 (required for Google Ads from May 2024)
gtag('consent', 'default', {
  analytics_storage: 'denied',
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  wait_for_update: 500
})

What’s Included in the Work

• React component with support for custom categories (TypeScript, Next.js ready)
• Server-side REST API in Python/Node.js for saving and retrieving consents
• Integration of Google Consent Mode v2 with default denials
• Scripts for initializing analytics and marketing based on consent
• Documentation for deployment and testing
• Team training or source code handover
• Access to our GDPR compliance checklist
• 30 days of post-launch support

Implementation Steps

1. Analysis of all processing purposes and categorization.
2. Designing the data schema (categories, versions, log).
3. Developing the frontend component with mandatory field validation.
4. Building the server endpoint and integrating with Consent Mode.
5. Testing: verify all scripts are blocked until consent is given.
6. Log audit and privacy policy adjustment.

Common Mistakes in Consent Form Implementation

The first and most common mistake is pre-checked boxes for marketing and analytics categories. According to GDPR, consent must be freely given: any non-mandatory categories should be off by default. A regulator can impose a fine for even this single oversight. The second mistake is having only an "Accept all" button without a choice option. This violates the granularity principle. The third mistake is closing the banner with an 'X' without saving the choice: clicking 'X' does not equal 'accept all,' yet many implementations interpret it that way. The correct behavior is that closing the banner applies only mandatory categories. The fourth mistake is a mismatch between categories and the scripts actually used: analytics is "blocked" but Google Tag Manager still loads tags. Google Consent Mode v2 solves this via a signals mechanism, but only if properly integrated. The fifth mistake is storing only "accepted/rejected" without category granularity: the regulator will require proof of what exactly was consented to, not just a click. We check all these points during a technical audit and fix them before handover.

Timeline

Implementation of a category-based consent form with server-side storage and Google Consent Mode v2 integration takes 2–3 business days. We have completed over 50 GDPR compliance projects and have been operating since 2016. Our team holds ISO 27001 certification. Request a consultation — we'll evaluate your project for free. We guarantee a 99.9% uptime SLA for the consent service.

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:

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.

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

1. Audit — code scanning, configuration review, dependency analysis, manual business logic verification.
2. Planning — vulnerability remediation plan, stack selection (CSP, WAF, rate limiting).
3. Implementation — TLS setup, CSP configuration, headers, Rate Limiting, WAF.
4. Testing — re-penetration test, load testing, false positive check.
5. 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

The budget is calculated individually — contact us for a project evaluation.