README

🍪 独立脚本，用于显示符合欧盟Cookie法规的cookie同意信息。

又是一个cookie同意栏……为什么❓❓

……嗯，大多数现有的解决方案都有一些问题，比如……

• 需要通过CDN加载JavaScript → 可能会追踪访客，因此存在隐私问题
• 需要JavaScript框架，如jQuery → 如果当前网站只因为一个跟踪工具添加cookie，则可能不存在
• 添加广告
• 添加跟踪器
• 难以修改
• 设置内联样式 → 不允许分离脚本和样式，这使得添加自定义样式表更困难
• 样式太多或没有样式
• 在JavaScript中硬编码标签/文本 → 限制翻译和文本更改
• 没有简单的方法来包装依赖脚本
• 太大/太复杂（主要是因为样式、脚本和标签混合，更改所有这些选项的选项比cookie逻辑本身更复杂）

此库的目标

• 简单
• 分离JavaScript逻辑、CSS样式和HTML标记
• 允许复制/集成一个小的、单独的JavaScript（无CDN，无框架）
• 允许按需更改文本/标签（例如在应用程序中）
• 添加基本的回退（例如样式），这些可以被覆盖/删除/扩展
• 允许获取不同类型的同意
• 不进行任何外部请求
• 不管理多个cookie来源（使用cookie同意管理器代替）
• 公开其他依赖于提供的同意的JavaScript的简单条件

要求

• JavaScript
• Internet Explorer > 10, Edge > 12, Safari > 10, Opera > 49, Firefox > 48, Chrome > 57

演示

🚀 https://pixelbrackets.gitlab.io/cookie-consent/

初步考虑

📚 在安装脚本之前，请先阅读本节。

欧盟cookie法规最明显的原因是告知用户cookie的使用情况。但更重要的是，对网站运营商来说，需要考虑cookie的使用。他们应该问自己cookie的侵扰性如何，每个cookie包含什么数据，其生命周期是否适合其目的，它是一方还是第三方cookie，谁控制数据？

网站运营商应该能够说明为什么和什么时候使用cookie。

网站需要区分……

• 一方和第三方cookie之间，
• 会话和持久cookie之间，以及
• 必要和非必要cookie之间。

如果cookie是服务所需的，仅用于通信和存储有状态数据，则为“必要”的。一个存储登录状态或购物车中的项目，并且仅限于会话（当用户关闭浏览器时删除）的一方cookie可能是必要的。

👉 并非所有cookie都需要同意，请参阅欧洲委员会 - 互联网手册。

• 一方会话cookie不需要知情同意。
• 一方持久cookie确实需要知情同意。
• 第三方会话和持久cookie确实需要知情同意。

虽然不是强制性的，但进一步区分不同类型的cookie使用可能会有帮助。

• 必要cookie = 存储状态数据，如购物车或登录状态
• 体验cookie = 用户偏好，如之前在表单中输入的数据
• 分析cookie = 目标用户行为，如某个项目被点击的频率

当这个脚本最初创建时，关于如何获得用户同意的看法仍然存在分歧。

• 由于持续使用而同意 → 仅向用户告知cookie的使用情况，以及如果用户继续使用网站，网站将继续这样做。
• 退出 → 告知用户cookie的使用情况，但允许用户通过点击按钮不同意使用cookie。之后，将删除现有cookie（除被拒绝的同意外），并且不再创建新的cookie。
• 同意 → 用户通过点击按钮同意使用cookie，直到那时不会存储非必要cookie。

🌪️ 然而，请注意，自2020年以来，欧盟内只有同意是允许的cookie同意形式！用户必须主动同意，预设复选框或退出选项不再允许。

其他地区，如美国，有不同的法律要求。因此，在此脚本中，由于持续使用而同意仍然得到支持，但不应在欧盟内使用。

cookie同意栏应链接到一个关于cookie使用的页面（例如，隐私说明）……

• 用简单、无术语的语言
• 为什么使用cookie（为了记住用户行为、识别用户等）
• 使用的cookie类型（例如，会话或永久，第一方或第三方）
• 谁控制/访问与cookie相关的信息（第一方或第三方）
• 用户如何撤回同意（例如，关闭浏览器、清除缓存、退出按钮）

本仓库考虑了不同的来源、使用类型和获取同意的方式。它为此使用“级别”，请参阅“使用与级别”部分。

安装

Packagist https://packagist.org.cn/packages/pixelbrackets/cookie-consent

使用

本包最重要的脚本是cookie-consent.js，它处理同意。其他一切都是可选的。脚本会在具有特定类名的元素中查找某些数据属性。如果一切缺失，则将设置默认值。

脚本会存储用户给出的同意类型以及其有效期。同意被分类为不同的“级别”。关于这些级别的更多信息，请参阅下一章。

所有想要写入cookie或执行需要同意的动作的自定义脚本都必须读取存储的同意级别以继续或取消。

集成

🔰 请查看demo.html文件，它包含所有示例文件。

设置同意栏

• 复制cookie同意栏HTML并将其集成到您的视图中
  • 根据需要更改标签/文本，但请尽量保持标记结构
  • 添加一个链接到单独的隐私页面
  • 查看“配置”部分以了解如何更改同意级别和持续时间的默认值
• 将cookie.js和cookie-consent.js集成到您的视图中
  • 可能需要根据您自己的资产结构合并和压缩文件
• 要么复制默认样式表cookie-consent.css，要么编写自己的，样式与脚本独立
• 同意级别存储在一个名为“cookie-consent”的cookie中

保护您的脚本

• 将所有带有cookie动作的脚本修改为从cookie-consent读取给出的同意级别
  • 示例文件tracker.js展示了如何用JavaScript响应级别

    if ($.cookie('cookie-consent') !== null && $.cookie('cookie-consent') >= 50) {
      /* Consent level 50 given, trigger action */
    }
    

可选：添加您自己的同意事件

• 编写您自己的动作以更改存储在cookie cookie-consent中的级别
  • 示例文件tracker.js展示了如何使用内联JavaScript设置级别

    <button type="button" class="btn btn-secondary" onClick="$.cookie('cookie-consent', 80, 720); return false;">Accept all cookies</button>
    

级别

所提供的同意被分为不同的「级别」。它们由不同的事件触发，例如网站的持续使用或按钮点击（同意）。

所有其他脚本都需要请求当前级别，以检查它们是否允许写入cookie。

以下级别包含以下行为

🏔️ 您可以在这些级别之间或以上80级定义自己的值。

示例

根据上表，以下用例可能需要这些级别

• 内部购物车 → 无需同意（您可以检查级别 1 或忽略它）
• 内部表单向导（持久用户输入），应允许通过持续使用 → 至少需要级别 10
• 内部跟踪工具，应允许通过持续使用 → 至少需要级别 20
• 内部跟踪工具，仅允许通过同意使用 → 至少需要级别 50
• 外部表单向导（仅在会话中保留用户输入），应允许通过持续使用 → 至少需要级别 30
• 外部跟踪工具，应允许通过持续使用 → 至少需要级别 30
• 外部跟踪工具，仅允许通过同意使用 → 至少需要级别 80

⚠️示例用例，您的用例和内部要求可能不同。

配置

为了使脚本能够设置和使用不同级别，可以配置哪个事件触发什么同意级别以及此级别有效的时间。

为此，可以在两个不同的位置设置data-level和data-duration属性。

由持续使用触发

• 由于持续使用而达成的协议设置的cookie同意级别
  • 在.cookie-consent元素（DIV）的data-level属性中设置
  • 整数，级别如上表所述
  • 默认值”1”，通常“20”，始终小于“50”
• 由于持续使用而达成的协议设置的cookie同意持续时间
  • 在.cookie-consent元素（DIV）的data-duration属性中设置
  • 整数，持续时间以小时为单位
  • 默认值”8”，通常“8”，永远不会大于“8760”（365天）

由同意触发

• 由于按钮点击而通过同意设置的cookie同意级别
  • 在.cookie-accept元素（BUTTON）的data-level属性中设置
  • 整数，级别如上表所述
  • 默认值”50”，通常“80”
• 由于按钮点击而通过同意设置的cookie同意持续时间
  • 在.cookie-accept元素（BUTTON）的data-duration属性中设置
  • 整数，持续时间以小时为单位
  • 默认值”8”，通常“8760”，永远不会大于“8760”（365天）
• 注意：您可以为应用程序设置多个同意按钮，它们只需要一个.cookie-accept类和所需的data属性。

❕ 如果默认值对您的应用程序足够，甚至可以省略data-*属性。

🔰 再次，查看demo.html文件以尝试不同的示例。

源代码

https://gitlab.com/pixelbrackets/cookie-consent

许可证

GNU通用公共许可证版本2或更高版本

GNU通用公共许可证可以在https://gnu.ac.cn/copyleft/gpl.html找到。

作者

丹·克莱因（丹·恩滕祖）(mail@pixelbrackets.de / @pixelbrackets)

变更日志

请参阅 CHANGELOG.md

贡献

此脚本是开源的，请使用、分享、修补、扩展或分叉它。