81 lines
2.8 KiB
Markdown
81 lines
2.8 KiB
Markdown
# 22. Cookie Consent & GDPR Compliance
|
|
|
|
meta:
|
|
id: web-production-22
|
|
feature: web-production
|
|
priority: P2
|
|
depends_on: []
|
|
tags: [compliance, gdpr, cookies, production]
|
|
|
|
objective:
|
|
- Implement GDPR-compliant cookie consent with granular controls and data processing transparency
|
|
|
|
deliverables:
|
|
- Cookie consent banner component
|
|
- Granular cookie preference management
|
|
- Consent storage and enforcement
|
|
- GDPR compliance verification
|
|
|
|
steps:
|
|
1. Create cookie consent banner:
|
|
- Banner appears on first visit
|
|
- Accept all, reject non-essential, customize options
|
|
- Links to cookie policy
|
|
- Dismissible but persistent until choice made
|
|
- Mobile-responsive design
|
|
2. Implement granular controls:
|
|
- Essential cookies (always on): auth, security
|
|
- Analytics cookies (opt-in): PostHog, Plausible
|
|
- Marketing cookies (opt-in): retargeting, ads
|
|
- Preference cookies (opt-in): theme, language
|
|
3. Create preference modal:
|
|
- Toggle switches for each category
|
|
- Description of each cookie type
|
|
- Save preferences button
|
|
- Re-openable from footer link
|
|
4. Implement consent enforcement:
|
|
- Store consent in cookie/localStorage
|
|
- Block analytics scripts until consent given
|
|
- Block marketing scripts until consent given
|
|
- Respect "Do Not Track" browser setting
|
|
5. Add GDPR-specific features:
|
|
- Data processing notice in signup flow
|
|
- Right to access data (export tool)
|
|
- Right to erasure (delete account)
|
|
- Right to portability (data export)
|
|
- Data retention periods documented
|
|
6. Add consent logging:
|
|
- Log consent choices with timestamp
|
|
- Store for compliance audit trail
|
|
- Allow users to view their consent history
|
|
|
|
tests:
|
|
- Unit: Test consent banner rendering and interaction
|
|
- Integration: Test analytics blocked until consent
|
|
- Compliance: Verify DNT respected
|
|
|
|
acceptance_criteria:
|
|
- Cookie banner appears on first visit to all users
|
|
- Users can accept, reject, or customize cookie preferences
|
|
- Analytics scripts load only after opt-in consent
|
|
- Marketing scripts load only after opt-in consent
|
|
- Essential cookies function without consent
|
|
- Consent preferences persist across sessions
|
|
- "Do Not Track" browser setting respected
|
|
- Consent choice logged with timestamp
|
|
- GDPR rights accessible from settings page
|
|
- Cookie policy linked from banner and footer
|
|
|
|
validation:
|
|
- Clear cookies → visit site → banner appears
|
|
- Click "Reject" → analytics network requests blocked
|
|
- Click "Customize" → toggle analytics on → requests allowed
|
|
- Enable DNT in browser → banner shows "DNT detected"
|
|
- Check localStorage → consent object stored
|
|
|
|
notes:
|
|
- Use CookieConsent by Orestbida or build custom with SolidJS
|
|
- Must comply with both GDPR (EU) and CCPA (California)
|
|
- Analytics must be completely blocked, not just paused
|
|
- Document consent choices for 2 years (regulatory requirement)
|