快速了解从 Cookie 同意合法性到实现方法

本帖由 Jetbrains's Coding Agent Junie 翻译。如有任何翻译错误，请告知我们！

Cookie 同意弹窗的必要性

根据 GDPR（通用数据保护条例）和电子隐私指令，Cookie 同意弹窗是必不可少的。GDPR 是在欧盟实施的个人数据保护条例，禁止网站在未经用户同意的情况下存储或访问 cookie。这是因为 cookie 可能包含个人身份信息。

该条例旨在确保用户有权了解和控制其数据的使用方式，违反者将面临以下处罚：

最高达全球年收入的 4%
2000 万欧元（约 28 亿韩元）的罚款

因此，针对全球市场的网站必须显示一个弹窗，征求使用 cookie 的同意。

Note

在韩国，截至 2025 年 5 月，cookie 同意在法律上并非强制性的，但考虑到全球趋势和潜在的欧盟市场进入，建议遵守此类政策。如果您创建针对欧盟居民的服务（例如，提供欧盟语言，支持欧元支付），您将受到 GDPR 的约束。

Cookie 的分类

Cookie 大致分为按功能分类和按管理实体分类。

按功能分类

必要 Cookie（Essential Cookies）
- 提供网站基本功能所需的 cookie（例如，页面导航，安全访问）
- 无需单独用户同意即可自动激活，对网站正常运行至关重要
功能性 Cookie（Functional Cookies）
- 用于改善用户偏好和体验（例如，语言设置，暗模式，自定义布局）
- 为用户便利的功能，但需要同意
性能/分析 Cookie（Performance/Analytics Cookies）
- 用于分析和改进网站性能（例如，访问者行为分析，使用时间，错误报告）
- 收集匿名数据，但需要用户同意
营销 Cookie（Marketing Cookies）
- 用于定向广告和提供与用户兴趣相匹配的内容（例如，定制广告）
- 用户同意是必不可少的

按管理实体分类

第一方 Cookie（First-Party Cookies）
- 由用户直接访问的网站创建的 cookie
- 仅在当前访问的域中使用，主要为支持该站点的功能而创建
- 大多分类为必要或功能性 cookie
第三方 Cookie（Third-Party Cookies）
- 由被访问网站以外的域创建的 cookie
- 主要用于用户跟踪，广告定向，分析等
- 最近在许多浏览器中默认被阻止或限制

LocalStorage 和 SessionStorage 也受政策约束吗？

虽然它被称为 cookie 政策，但重要的不是 cookie 本身。所有个人数据都不应未经许可存储。因此，无论是 cookie、LocalStorage 还是 SessionStorage，处理个人信息的值都必须按照政策存储。

这是因为 GDPR 关注的是数据本身，而不是技术。无论个人信息如何存储，都需要用户同意的原则保持不变。

Cookie 同意弹窗的实现方法

现在我们了解了为什么要实现 cookie 同意弹窗，让我们看看实际的实现方法。

1. 通过 CMP 实现

最简单的方法是使用 CMP（Cookie 管理平台），这是一个专门管理网站 cookie 和个人信息同意的平台。

使用 CMP 有很多优势：它可以持续跟踪并遵守可能变化的各个地区的隐私法，自动支持各种语言，并且由于您不直接实现而无需维护。然而，它也有成本和可能难以定制的缺点。

有几个与谷歌合作的 CMP，您可以根据您的条件找到并实施。

2. 直接实现

如果出现成本问题或定制需求，直接实现也是一种选择。直接实现时要考虑的主要功能如下：

1) 同意设置管理

首先，定义一个状态结构来管理用户同意设置。

typescript

// 同意设置类型定义
interface ConsentSettings {
  essential: boolean; // 必要 cookie（始终为 true）
  functional: boolean; // 功能性 cookie
  analytics: boolean; // 分析 cookie
  marketing?: boolean; // 营销 cookie（可选）
}

// 默认同意设置（应用于所有用户的初始值）
const defaultConsentSettings: ConsentSettings = {
  essential: true, // 必要始终为 true
  functional: false,
  analytics: false,
  marketing: false,
};

2) 根据同意管理脚本

实现一种方法，根据用户同意的项目动态加载相关脚本。

typescript

export default function ScriptContainer() {
  const [consentSettings, setConsentSettings] = useState<ConsentSettings>(getStoredConsent() || defaultConsentSettings);

  // 根据同意设置加载脚本
  return (
    <>
      {/* 必要脚本始终加载 */}
      <EssentialScripts />

      {/* 当同意功能性 cookie 时加载 */}
      {consentSettings.functional && <FunctionalScripts />}

      {/* 当同意分析 cookie 时加载 */}
      {consentSettings.analytics && (
        <>
          <GoogleAnalyticsScript />
          <ClarityScript />
        </>
      )}

      {/* 当同意营销 cookie 时加载 */}
      {consentSettings.marketing && <MarketingScripts />}
    </>
  );
}

3) 实现同意界面

需要一个 UI 实现来获取用户的同意。应该实现基本的同意弹窗和详细设置面板。

typescript

function CookieConsentBanner() {
  const [showSettings, setShowSettings] = useState(false);
  const [consent, setConsent] = useState(getStoredConsent() || defaultConsentSettings);

  // 保存同意设置的函数
  const saveConsent = (settings: ConsentSettings) => {
    localStorage.setItem('cookieConsent', JSON.stringify({
      ...settings,
      timestamp: new Date().toISOString()
    }));
    setConsent(settings);
    // 如有必要，将同意信息发送到服务器
  };

  // 如果同意已存在，则隐藏横幅
  if (localStorage.getItem('cookieConsent')) {
    return null;
  }

  return (
    <div className="cookie-banner">
      {!showSettings ? (
        // 基本同意横幅
        <div className="simple-banner">
          <p>本网站使用 cookie 提供最佳体验。</p>
          <div className="button-group">
            <button onClick={() => saveConsent({...consent, functional: true, analytics: true, marketing: true})}>
              接受全部
            </button>
            <button onClick={() => saveConsent({...consent, functional: false, analytics: false, marketing: false})}>
              仅必要 Cookie
            </button>
            <button onClick={() => setShowSettings(true)}>
              设置
            </button>
          </div>
        </div>
      ) : (
        // 详细设置面板
        <div className="settings-panel">
          {/* 实现详细设置 UI */}
        </div>
      )}
    </div>
  );
}

4) 与分析和营销工具集成

使用 Google Analytics、Clarity、Google Tag Manager 等工具时，应根据同意状态正确初始化。

GTM 示例

typescript

// 根据同意状态配置
if (consentSettings.analytics) {
  // 当存在分析同意时
  window.gtag('consent', 'update', {
    analytics_storage: 'granted'
  });
} else {
  // 当不存在同意时
  window.gtag('consent', 'default', {
    analytics_storage: 'denied'
  });
}

https://developers.google.com/tag-platform/security/guides/consent

Clarity 设置： 使用 Clarity 时，需要在 Clarity 仪表板中直接配置设置。

Clarity Cookie 同意设置文档

实施后的验证方法

实施后，有几个网站可以测试您是否正确遵守了 cookie 政策。

Cookie Metrix：扫描您网站的 cookie 使用情况并检查 GDPR 合规性
2GDPR：评估您网站的隐私和 cookie 政策合规性

结论

Cookie 同意弹窗不仅仅是 UI 元素，而是法律要求和保护用户个人信息的重要机制。使用 CMP 和直接实现都有利弊，因此您应该考虑项目的规模、预算和定制要求选择适当的方法。（个人而言，我会直接使用 CMP...）

随着隐私保护意识的提高，cookie 同意在未来将变得更加重要。实现既用户友好又满足法律要求的同意机制正成为前端开发人员的重要责任之一。

参考