Consent-O-Matic

简介
安装
扩展Consent-O-Matic
- 基本结构
  - 检测器
  - 方法
- DOM选择
- 操作
  - 点击
  - 列表
  - 同意
  - 滑动
  - CSS条件
  - 等待CSS
  - 循环
  - 等待
  - 隐藏
  - 关闭
- 匹配器
  - CSS
  - 复选框
- 同意
- 同意类别
- 完整示例

简介

你希望网站尊重你的隐私权,而你的浏览器在关闭时会清除cookies。因此,每次访问相同的网站时,你都会看到相同的cookie同意框。你厌倦了反复提交相同的信息。如果有一种方法可以自动化这个过程就好了?幸运的是,Consent-O-Matic应运而生。

Consent-O-Matic是一个浏览器扩展程序,它能识别大量我们都已经习以为常的CMP(同意管理提供商)弹出窗口。但由于你在安装时已经告诉它你的cookie偏好,它会在遇到这些表单时自动为你填写—并通过其图标旁边的一个令人满意的小勾号让你知道它已经完成了这项工作。很不错吧。

由于这是奥尔胡斯大学高级可视化和交互中心(CAVI)的一个开放项目,普通人可以通过添加新规则、更新旧规则,甚至添加文档(就像你现在正在阅读的这些段落,它们是由一个偶然发现这个项目并想要帮助的人写的)来使这个扩展程序对其他人来说更容易使用。

延伸阅读

论文: GDPR之后的黑暗模式

PDF: GDPR之后的黑暗模式

兼容的CMP

Consent-O-Matic目前可以与以下CMP配合使用:

Autodesk
begadi.com
chandago
consentmanager.net
cookiebar
cookiebot
cookiecontrolcivic
cookieinformation
cookieLab
didomi.io
dr.dk
DPG Media
EvidonBanner
EvidonIFrame
ez-cookie
future
ikeaToast
lemonde.fr
oil
onetrust
optanon
optanon-alternative
quantcast
quantcast2
SFR
sharethis
sourcepoint
sourcepointframe
sourcepointpopup
springer
tealium.com
theGuardian
trustarcbar
trustarcframe
umf.dk
uniconsent
Webedia
wordpressgdpr

权限

安装后,Consent-O-Matic在浏览器中使用以下一组权限:

访问并读取所有页面 - 它会搜索你访问的每个页面,寻找它知道如何处理的与同意相关的弹出窗口
标签页URL信息 - 你可以通过点击图标来逐页开启/关闭扩展。为了检查是否启用,它需要知道你正在访问的页面地址
存储 - 你的偏好和设置直接存储在你的浏览器中

该扩展仅在两种情况下自行与网络通信:

获取和更新规则列表时
当你通过扩展图标菜单报告网站不工作时

安装

我们强烈建议通过浏览器的官方扩展商店直接安装:

Chrome (和其他基于Chromium的浏览器)
Firefox (桌面版 / 移动版)
Safari (MacOS / iOS / iPadOS / visionOS)

通过官方渠道安装将在发布新版本时自动保持更新。

从归档发布版安装

作为扩展商店的替代方案,你可以从Github上的Releases页面手动下载并解压其中一个已发布的版本。 <br/>如果你这样做,你必须使用浏览器的开发者功能来加载未打包的扩展 (Chrome)或加载临时附加组件 (Firefox),并将其指向解压缩的zip目录中的manifest.json。

从源代码构建

最后,如果你打算审查或修改代码,你可以直接从源代码构建和安装:

git clone https://github.com/cavi-au/Consent-O-Matic.git
cd Consent-O-Matic
npm install
npm run build

然后按照上面安装发布归档的方法进行,但将浏览器指向dist文件夹。

我们不建议从源代码安装。

扩展Consent-O-Matic

如果你喜欢的CMP不在当前列表中,欢迎创建一个自定义列表并添加(点击浏览器中的扩展图标,点击"更多附加设置",点击"规则列表",并输入你的自定义列表的URL)。如果你真的想做出贡献,欢迎同时创建一个Pull Request。

基本结构

Consent-O-Matic的规则列表是一个JSON结构,包含用于检测CMP(同意管理提供商)和处理检测到的CMP弹出窗口的规则。

每个CMP是一个命名条目,包含2个部分,detectors和methods。

{
   "myCMP": {
      "detectors": [ ... ],
      "methods": [ ... ]
   },
   "anotherCMP": {
      "detectors": [ ... ],
      "methods": [ ... ]
   },
}

如果一个CMP添加了多个检测器,只要任何一个检测器触发,该CMP就被视为已检测到。

检测器

检测器是用来检测是否应该应用某个特定规则集的部分。基本上,如果检测器触发,就会应用相应的方法。

检测器结构:

{
   "presentMatcher": [{ ... }],
   "showingMatcher": [{ ... }]
}

present匹配器用于检测CMP是否存在于页面上。

某些CMP即使在重新访问你已经之前给予同意的页面时,仍会将弹出窗口HTML插入DOM。我们只想在实际显示同意表单时处理它。这就是showing匹配器的用途。

present和showing匹配器都遵循匹配器的通用结构。

present和showing匹配器都可以是多个匹配器,只有当所有匹配器(分别对应present和showing)都适用时才会触发检测器。

方法

方法是操作的集合。Consent-O-Matic支持4种方法:OPEN_OPTIONS, DO_CONSENT, SAVE_CONSENT, HIDE_CMP 所有方法都是可选的，如果存在，当检测器被触发时，这些方法将按照以下顺序运行：

HIDE_CMP
OPEN_OPTIONS
HIDE_CMP
DO_CONSENT
SAVE_CONSENT

方法采用以下形式：

{
   "name": " ... ",
   "action": { ... }
}

其中name是4个支持的方法之一，action是要执行的操作。

DOM选择

大多数操作和匹配器都有一个应用目标。因此，Consent-O-Matic有一个DOM选择机制，可以轻松帮助选择正确的DOM元素。

"parent": {
   "selector": ".some.css.selector",
   "textFilter": "someTextFilter",
   "styleFilter": {
      "option": "someStyleOption",
      "value": "someStyleValue",
      "negated": false
   },
   "displayFilter": true,
   "iframeFilter": false,
   "childFilter": {}
},
"target": {
   "selector": ".some.css.selector",
   "textFilter": "someTextFilter",
   "styleFilter": {
      "option": "someStyleOption",
      "value": "someStyleValue",
      "negated": false
   },
   "displayFilter": true,
   "iframeFilter": false,
   "childFilter": {}
}

有两个部分，parent和target。parent是可选的，但如果存在，它将首先被解析，并用作target的起点。这允许你构建非常复杂的元素选择，否则单一的普通CSS选择器无法实现。一个例子是选择到shadow DOM中 - 使用parent来定位带有shadow的元素，允许查询其子元素。

除selector外，parent和target的所有参数都是可选的。

选择方法通过使用selector中的css选择器，然后通过各种可用的过滤器过滤结果DOM节点：

textFilter过滤掉所有不包含给定文本的节点。它也可以作为数组给出"textFilter":["filter1", "filter2"]，然后它会过滤掉所有不包含给定文本过滤器之一的节点。
styleFilter基于computedStyles进行过滤。option是要比较的样式选项，例如position，value是要比较的值，negated设置选项值是否应匹配或不匹配给定值。
displayFilter可用于根据节点是否显示隐藏来过滤节点。
iframeFilter根据节点是否在iframe内来过滤节点。
childFilter是一个全新的DOM选择，然后根据childFilter是否进行了选择来过滤原始选择。

以下是一个DOM选择示例：

"parent": {
   "selector": ".myParent",
   "iframeFilter": true,
   "childFilter": {
      "target": {
         "selector": ".myChild",
         "textFilter": "Gregor"
      }
   }
},
"target": {
   "selector": ".myTarget"
}

这个选择器首先尝试找到parent，它是一个具有class myParent的DOM元素，位于iframe内，并且有一个包含文本"Gregor"的class为myChild的子DOM元素。

然后，使用这个parent作为"根"，它尝试找到一个class为myTarget的DOM元素。

这可以作为操作或匹配器的目标。

操作

操作是Consent-O-Matic实际执行操作的部分。一些操作对目标选择执行操作，其他操作与控制流有关。

点击

这个操作模拟在其目标上的鼠标点击。

示例：

{
   "type": "click",
   "target": {
      "selector": ".myButton",
      "textFilter": "Save settings"
   },
   "openInTab": false
}

如果将openInTab设置为true，将触发ctrl+shift+点击而不是普通点击，这应该使链接（如果有）在新标签页中打开，并聚焦该标签页。

在这个例子中，我们只使用了带有textFilter的简单target，但完整的DOM选择是支持的。

列表

此操作按顺序运行一系列操作。

示例：

{
   "type": "list",
   "actions": []
}

actions是一个将按顺序运行的操作数组。

同意

同意操作接受一个同意数组，并尝试应用用户的同意选择。

示例：

{
   "type": "consent",
   "consents": []
}

consents是Consent类型的数组

滑动

一些同意表单使用滑块来设置同意级别，此操作支持模拟滑动这样的滑块。

示例：

{
   "type": "slide",
   "target": {
      "selector": ".mySliderKnob"
   },
   "dragTarget": {
      "target": {
         "selector": ".myChoosenOption"
      }
   },
   "axis": "y"
}

target是模拟滑动动作的目标DOM元素。

dragTarget是用于滑动距离的DOM元素。

axis选择滑块应该水平"x"或垂直"y"移动。

滑动事件将模拟鼠标在给定的axis上将target拖动到dragTarget的距离。

如果CSS

此操作用作控制流，根据DOM选择是否找到元素来运行另一个操作。

示例：

{
   "type": "ifcss",
   "target": {
      "selector": "",
   },
   "trueAction": {
      "type": "click",
      "target": {
         "selector": ".myTrueButton"
      }
   },
   "falseAction": {
      "type": "click",
      "target": {
         "selector": ".myFalseButton"
      }
   }
}

如果DOM选择找到一个元素，将运行trueAction。当DOM选择没有找到元素时，将运行falseAction。

等待CSS

此操作等待直到DOM选择器找到匹配的DOM元素。这主要用于同意表单中某些内容加载缓慢需要等待的情况。

示例：

{
   "type": "waitcss",
   "target": {
      "selector": ".myWaitTarget"
   },
   "retries": 10,
   "waitTime": 200,
   "negated": false
}

retries是检查目标DOM元素的次数。默认为10。

waitTime决定重试尝试之间的时间。默认为250。

negated使等待CSS操作等待直到找不到目标。

循环

如果需要多次运行某些操作，但以不同的DOM节点为根，可以使用循环操作。它为DOM选择选中的每个DOM元素运行一次操作；循环内运行的所有操作将从当前选中的节点开始看到DOM。

示例：

{
   "type": "foreach",
   "target": {
      "selector": ".loopElement"
   },
   "action": {}
}

action是为每个找到的DOM元素运行的操作。

等待

此操作在继续之前等待给定的毫秒数。

示例：

{
   "type": "wait",
   "waitTime": 250
}

隐藏

此操作在DOM选择上设置css类'ConsentOMatic-CMP-Hider'。默认的css规则然后会将元素的不透明度设置为0。

示例：

{
   "type": "hide",
   "target": {
      "selector": ".myHiddenClass"
   }
}

关闭

此操作关闭当前标签页，对于喜欢在新标签页中打开同意仪表板的同意提供者（如Evidon）很有用。

示例：

{
   "type": "close"
}

匹配器

匹配器用于检查某些 DOM 选择的存在或状态。

CSS

此匹配器检查 DOM 选择的存在，如果存在则返回匹配。

示例：

{
   "type": "css",
   "target": {
      "selector": ".myMatchingClass"
   }
}

复选框

此匹配器检查 <input type='checkbox' /> 的状态，如果复选框被选中则返回匹配。

示例：

{
   "type": "checkbox",
   "target": {
      "selector": ".myInputCheckbox"
   }
}

同意

这是在同意操作中使用的内容，定义了用户应该给予或不给予的实际同意。

每个同意都有一个类型，与 Consent-O-Matic 中的同意类别相匹配，因此如果用户将第一个同意类别切换为开启（类型 A），而同意类型为"A"，则该同意将被启用。

通常，同意是通过开关或一组开/关按钮给出的。因此，consent 对这两种情况都有相应的机制。

示例：

{
   "type": "A",
   "toggleAction": {},
   "matcher": {},
   "trueAction": {},
   "falseAction": {}
}

type 是此规则定义的同意类别类型，根据用户对该类型类别的选择决定此同意是否应该开启或关闭。

toggleAction 此操作用于在弹出窗口使用开关或切换来表示同意时选择同意。如果匹配器表明同意状态与用户要求的不同，则会执行此操作，否则不会执行。

matcher 是用于检查同意状态的匹配器。对于复选框匹配器，如果复选框被选中则表示给予同意。对于CSS 匹配器，如果匹配器找到 DOM 选择则表示给予同意。

trueAction 和 falseAction 是在需要通过按下两个按钮之一而不是开关来给予同意时使用的操作。这些操作将根据用户对同意的选择来执行。如果用户同意此类别类型，将执行 trueAction，如果用户不同意此类别类型，将执行 falseAction。

如果内容配置中存在 toggleAction 和 matcher，将使用 toggleAction；如果其中一个缺失，则将使用 trueAction/falseAction。

同意类别

如在插件设置中所示，按相同顺序：

D：信息存储和访问
A：偏好和功能
B：性能和分析
E：内容选择、交付和报告
F：广告选择、交付和报告
X：其他目的

完整示例

将所有内容整合在一起，以下是一个名为"myCMP"的 CMP 的完整示例，其中包含两个需要切换的同意类别。

{
   "myCMP": {
      "detectors": [
         {
            "presentMatcher": {
               "type": "css",
               "target": {
                  "selector": "#theCMP"
               }
            },
            "showingMatcher": {
               "target": {
                  "selector": "#theCMP.isShowing"
               }
            }
         }
      ],
      "methods": [
         {
            "name": "OPEN_OPTIONS",
            "action": {
               "type": "click",
               "target": {
                  "selector": ".button",
                  "textFilter": "Change settings"
               }
            }
         },
         {
            "name": "DO_CONSENT",
            "action": {
               "type": "list",
               "actions": [
                  {
                     "type": "click",
                     "target": {
                        "selector": ".menu-vendors"
                     }
                  },
                  {
                     "type": "consent",
                     "consents": [
                        {
                           "type": "A",
                           "matcher": {
                              "type": "checkbox",
                              "parent": {
                                 "selector": ".vendor-item",
                                 "textFilter": "Functional cookies"
                              },
                              "target": {
                                 "selector": "input"
                              }
                           },
                           "toggleAction": {
                              "type": "click",
                              "parent": {
                                 "selector": ".vendor-item",
                                 "textFilter": "Functional cookies"
                              },
                              "target": {
                                 "selector": "label"
                              }
                           }
                        },
                        {
                           "type": "F",
                           "matcher": {
                              "type": "checkbox",
                              "parent": {
                                 "selector": ".vendor-item",
                                 "textFilter": "Advertisement cookies"
                              },
                              "target": {
                                 "selector": "input"
                              }
                           },
                           "toggleAction": {
                              "type": "click",
                              "parent": {
                                 "selector": ".vendor-item",
                                 "textFilter": "Advertisement cookies"
                              },
                              "target": {
                                 "selector": "label"
                              }
                           }
                        }
                     ]
                  }
               ]
            }
         },
         {
            "name": "SAVE_CONSENT",
            "action": {
               "type": "click",
               "target": {
                  "selector": ".save-consent-btn"
               }
            }
         }
      ]
   }
}