Skip to content
SlashClone

Cookie consent banner

@slashclone/cookie-consent-banner

Add an honest cookie banner to a web app: analytics, ad pixels, and video embeds load only after a yes, and saying no is one click. One registry of every cookie and service drives the banner, the loaders, the CSP, and the privacy page's cookie table. Includes a registry checker and React templates.

SkillDevOpsv0.1.0 (latest)Tested
Activity
New: be the first to try it
  1. 1/**
  2. 2 * Starting points for common vendors: category, what they store, and the CSP hosts
  3. 3 * their scripts need. Vendors change hosts and cookie names, so check each against the
  4. 4 * vendor's current docs and the browser console (CSP errors) after enabling it.
  5. 5 * Copy what you use into your registry; leave out what you do not.
  6. 6 */
  7. 7export const VENDORS = {
  8. 8 googleAnalytics: {
  9. 9 category: "analytics",
  10. 10 stores: "_ga, _ga_<id> (up to 2 years)",
  11. 11 clear: /^(_ga|_ga_.*|_gid)$/,
  12. 12 csp: {
  13. 13 script: ["https://www.googletagmanager.com"],
  14. 14 connect: [
  15. 15 "https://*.google-analytics.com",
  16. 16 "https://*.analytics.google.com",
  17. 17 "https://www.googletagmanager.com",
  18. 18 ],
  19. 19 img: ["https://*.google-analytics.com", "https://www.googletagmanager.com"],
  20. 20 },
  21. 21 notes:
  22. 22 "Send page views by hand with page_location set to origin and path, and turn off 'page changes based on browser history events' in enhanced measurement, or SPA navigations count twice with full URLs. Use Consent Mode: ad_storage, ad_user_data, and ad_personalization follow the advertising choice.",
  23. 23 },
  24. 24 posthog: {
  25. 25 category: "analytics",
  26. 26 stores: "ph_<project key>_posthog (1 year)",
  27. 27 clear: /^(ph_.*|__ph_opt_in_out_.*)$/,
  28. 28 csp: {
  29. 29 script: ["https://us-assets.i.posthog.com"],
  30. 30 connect: ["https://us.i.posthog.com", "https://us-assets.i.posthog.com"],
  31. 31 },
  32. 32 notes:
  33. 33 "EU cloud uses eu.i.posthog.com and eu-assets.i.posthog.com. For a privacy-first setup: autocapture false, disable_session_recording true, disable_surveys true, mask_all_text true, person_profiles 'identified_only', and a before_send that strips query strings from $current_url and $referrer.",
  34. 34 },
  35. 35 metaPixel: {
  36. 36 category: "advertising",
  37. 37 stores: "_fbp, _fbc (90 days)",
  38. 38 clear: /^(_fbp|_fbc)$/,
  39. 39 csp: {
  40. 40 script: ["https://connect.facebook.net"],
  41. 41 connect: ["https://www.facebook.com", "https://connect.facebook.net"],
  42. 42 img: ["https://www.facebook.com"],
  43. 43 },
  44. 44 notes:
  45. 45 "Set fbq.disablePushState = true and send PageView yourself, so pages with typed text can be skipped.",
  46. 46 },
  47. 47 linkedinInsight: {
  48. 48 category: "advertising",
  49. 49 stores: "li_fat_id, li_giant (30 days)",
  50. 50 clear: /^li_.*$/,
  51. 51 csp: {
  52. 52 script: ["https://snap.licdn.com"],
  53. 53 connect: ["https://px.ads.linkedin.com"],
  54. 54 img: ["https://px.ads.linkedin.com"],
  55. 55 },
  56. 56 notes: "Counts page views and history changes itself, including the full URL. Disclose that.",
  57. 57 },
  58. 58 xPixel: {
  59. 59 category: "advertising",
  60. 60 stores: "_twclid, muc_ads (up to 2 years)",
  61. 61 clear: /^(_twclid|muc_ads)$/,
  62. 62 csp: {
  63. 63 script: ["https://static.ads-twitter.com"],
  64. 64 connect: ["https://analytics.twitter.com", "https://t.co"],
  65. 65 img: ["https://analytics.twitter.com", "https://t.co"],
  66. 66 },
  67. 67 notes: "Counts page views itself after twq('config', id).",
  68. 68 },
  69. 69 tiktokPixel: {
  70. 70 category: "advertising",
  71. 71 stores: "_ttp (13 months)",
  72. 72 clear: /^_ttp$/,
  73. 73 csp: {
  74. 74 script: ["https://analytics.tiktok.com"],
  75. 75 connect: ["https://analytics.tiktok.com"],
  76. 76 img: ["https://analytics.tiktok.com"],
  77. 77 },
  78. 78 notes: "Call ttq.page() yourself on each route change.",
  79. 79 },
  80. 80 youtube: {
  81. 81 category: "media",
  82. 82 stores: "Set by YouTube",
  83. 83 clear: undefined,
  84. 84 csp: { frame: ["https://www.youtube-nocookie.com"] },
  85. 85 notes:
  86. 86 "Use the youtube-nocookie.com player and fetch no thumbnail before consent (i.ytimg.com is a Google request too).",
  87. 87 },
  88. 88} as const;

Cookies that keep you signed in and remember these choices are always on. Everything else is off until you turn it on.