Chrome Web Store (также для браузеров на Chromium)

Большинство современных веб-сайтов хотят обрабатывать ваши данные и запрашивают согласие с помощью баннеров cookies. Хотя эти баннеры призваны дать вам контроль, на практике они часто приводят к повторяющимся и трудоёмким кликам — особенно если ваш браузер очищает cookies при закрытии. Тот же баннер появляется снова, и вам приходится снова и снова делать один и тот же выбор.

Consent-O-Matic — это расширение для браузера, разработанное для решения этой проблемы. Созданное Центром передовой визуализации и взаимодействия (CAVI) Орхусского университета, это средство автоматически обрабатывает баннеры согласия от вашего имени. После того как вы установите свои предпочтения во время установки, Consent-O-Matic будет распознавать множество распространённых баннеров Consent Management Platform (CMP), применять ваш выбор и подтверждать это маленькой галочкой рядом со значком расширения.

Поскольку Consent-O-Matic — это проект с открытым исходным кодом, любой желающий может внести свой вклад в его улучшение, добавляя новые правила, обновляя старые или обновляя документацию. Такой совместный подход гарантирует, что расширение будет идти в ногу с постоянно меняющимся ландшафтом онлайн-баннеров согласия — и облегчит каждому защиту своих данных с меньшими хлопотами.

Дополнительная информация

Академические статьи

Другие упоминания

Совместимые CMP

На данный момент Consent-O-Matic работает с более чем 200 CMP (полный список здесь), включая такие крупные платформы, как UserCentrics, CookieBot, OneTrust, а также с баннерами cookies для конкретных сайтов.

Конфиденциальность

После установки Consent-O-Matic использует в браузере следующий набор разрешений:

Доступ для чтения всех страниц — он ищет на каждой посещаемой вами странице всплывающие окна, связанные с согласием, с которыми умеет работать
Информация об URL-адресах вкладок — вы можете включать/отключать расширение для каждой страницы отдельно, нажав на значок. Чтобы проверить, включено ли оно, ему нужен адрес просматриваемой вами страницы
Хранилище — ваши настройки и параметры хранятся непосредственно в вашем браузере

Расширение связывается с сетью только в двух случаях:

При загрузке и обновлении списков правил
Когда вы сообщаете о неработающем сайте через меню значка расширения (кнопка Сообщите нам!)

URL-адрес сайта, о котором сообщается через значок расширения, отправляется на сайт, размещённый Орхусским университетом, в виде URI-кодированной строки запроса (например, LinkedIn будет отправлен как https://gdprconsent.projects.cavi.au.dk/report.php?url=www.linkedin.com).

Установка

Мы настоятельно рекомендуем устанавливать расширение напрямую через официальный магазин расширений вашего браузера (упомянутый в начале). Установка через официальные каналы автоматически будет обновлять вас до новых версий по мере их выхода.

Также возможно получить расширение другими способами.

Установка из архива релиза

В качестве альтернативы магазинам расширений вы можете вручную загрузить и извлечь одну из опубликованных версий со страницы Releases на Github.

В этом случае вам придётся использовать функцию разработчика в браузере: Загрузить распакованное (Chrome) или Загрузить временное дополнение (Firefox) и указать на manifest.json в распакованном zip-каталоге.

Сборка из исходного кода

Наконец, если вы намерены просмотреть или изменить код, вы можете собрать и установить расширение непосредственно из исходного кода:``` git clone https://github.com/cavi-au/Consent-O-Matic.git cd Consent-O-Matic npm install

а затем выполните одну из ```npm run build-firefox``` или ```npm run build-chromium``` или ```npm run build-safari```

Для Firefox или Chromium теперь можно действовать как описано выше для установки архивов релизов, но указать браузеру на папку `build` или папку, в которую вы извлекли zip из build/dist/. Для Safari требуется загрузить проект XCode для дальнейшей сборки приложения.

Мы не рекомендуем установку из исходного кода.

## Расширение Consent-O-Matic

Если вашего любимого CMP нет в текущем списке, вы можете создать собственный список и добавить его (нажмите на значок расширения в браузере, нажмите «Дополнительные настройки дополнения», нажмите «Списки правил» и введите URL вашего пользовательского списка). Если вы **действительно** хотите внести вклад, не стесняйтесь создать Pull Request.

Пользователи могут отправлять отчеты, когда правила для определенных веб-сайтов не работают. Полный список сообщенных URL доступен [здесь](https://gdprconsent.projects.cavi.au.dk/reports.php). Число указывает, сколько раз был сообщен URL. Этот список в настоящее время не показывает, были ли проверены/скорректированы правила для URL, поэтому всегда проверяйте, все ли еще правило сломано/отсутствует, прежде чем начать работу.


### Элементы правил

* [Базовая структура](#basic-structure)
   * [Детекторы](#detectors)
   * [Методы](#methods)
* [Выбор DOM](#dom-selection)
* [Действия](#actions)
   * [Нажатие](#click)
   * [Список](#list)
   * [Согласие](#consent)
   * [Слайдер](#slide)
   * [Если CSS](#if-css)
   * [Ожидание CSS](#wait-for-css)
   * [Для каждого](#for-each)
   * [Ожидание](#wait)
   * [Скрыть](#hide)
   * [Закрыть](#close)
* [Сопоставители](#matchers)
   * [CSS](#css)
   * [Флажок](#checkbox)
* [Согласие](#consent-1)
   * [Категории согласия](#consent-categories)
* [Полный пример](#full-example)

### Базовая структура

Список правил для Consent-O-Matic представляет собой JSON-структуру, содержащую правила для обнаружения CMP (Consent Management Provider) и взаимодействия с всплывающим окном CMP при его обнаружении.

Каждый CMP является именованной записью и содержит 2 части: `detectors` и `methods`. Имя в идеале должно быть фактическим именем базового CMP (правильно написанным с заглавными буквами и пробелами) или именем веб-сайта, если оно уникально для этого домена. Имя будет отображаться в разделе «О программе» в настройках расширения, поэтому сделайте его удобным для пользователя.```json
{
   "MyCMP": {
      "detectors": [ ... ],
      "methods": [ ... ]
   },
   "AnotherCMP": {
      "detectors": [ ... ],
      "methods": [ ... ]
   },
}

Если к CMP добавлено более 1 детектора, CMP считается обнаруженным, если срабатывает любой из детекторов.

Детекторы

Детекторы — это часть, которая определяет, следует ли применять определённый набор правил. По сути, если детектор срабатывает, методы будут применены.

Структура детектора:```json { "presentMatcher": [{ ... }], "showingMatcher": [{ ... }] }

Матчер присутствия используется для обнаружения того, присутствует ли CMP на странице.

Некоторые CMP по-прежнему вставляют HTML-код всплывающего окна в DOM даже при повторном посещении страницы, где вы уже дали согласие ранее. Мы хотим обрабатывать форму согласия только в том случае, если она действительно отображается на странице. Для этого используется матчер отображения.

Оба матчера — присутствия и отображения — следуют общей структуре [`Matchers`](#matchers).

Оба матчера (присутствия и отображения) могут быть множественными, запуская детектор только в том случае, если применяются все матчеры (соответственно для присутствия и отображения).

#### Методы

Методы — это коллекции действий. Consent-O-Matic поддерживает 4 метода: `OPEN_OPTIONS`, `DO_CONSENT`, `SAVE_CONSENT`, `HIDE_CMP`

Все методы необязательны, и, если они присутствуют, методы будут выполняться в порядке, указанном ниже, при срабатывании детектора.```
HIDE_CMP
OPEN_OPTIONS
HIDE_CMP
DO_CONSENT
SAVE_CONSENT

Методы принимают следующую форму:```json { "name": " ... ", "action": { ... } }

где name — один из 4 поддерживаемых методов, а action — это [действие](#actions), которое нужно выполнить.

---

### Выбор DOM

Большинство действий и матчеров имеют некоторую цель, к которой они применяются. По этой причине Consent-O-Matic имеет механизм выбора DOM, который может легко помочь с выбором правильного DOM-элемента.```json
"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": {}
}

Есть 2 части: parent и target. parent необязателен, но если он существует, он будет разрешён первым и использован как отправная точка для target. Это позволяет создавать очень сложные выборки элементов, которые иначе были бы невозможны с помощью одного простого CSS-селектора. Один из примеров — выборка внутри теневого DOM (shadow DOM), где использование родителя для нацеливания на элемент с тенью позволяет запрашивать его дочерние элементы с помощью селектора.

Все параметры parent и target, кроме selector, необязательны.

Метод выборки работает путём использования CSS-селектора из selector, а затем фильтрации полученных DOM-узлов с помощью различных доступных фильтров:

textFilter фильтрует все узлы, которые не содержат заданный текст. Также может быть задан в виде массива "textFilter":["filter1", "filter2"], и тогда он фильтрует все узлы, которые не содержат ни один из заданных текстовых фильтров.
styleFilter фильтрует на основе вычисленных стилей (computedStyles). option — это опция стиля для сравнения, например position, value — это значение для сравнения, а negated определяет, должно ли значение опции совпадать с заданным значением или нет.
displayFilter можно использовать для фильтрации узлов на основе того, скрыты ли они через display или нет.
iframeFilter фильтрует узлы на основе того, находятся ли они внутри iframe или нет.
childFilter — это полностью новая выборка DOM, которая затем фильтрует исходную выборку на основе того, была ли сделана выборка с помощью childFilter или нет.

Вот пример выборки DOM:```json "parent": { "selector": ".myParent", "iframeFilter": true, "childFilter": { "target": { "selector": ".myChild", "textFilter": "Gregor" } } }, "target": { "selector": ".myTarget" }

Этот селектор сначала пытается найти `parent`, который является DOM-элементом с классом `myParent`, находящимся внутри iframe, и имеет дочерний DOM-элемент с классом `myChild`, содержащий текст "Gregor".

Затем, используя этот parent в качестве "root", он пытается найти DOM-элемент с классом `myTarget`.

После этого он может быть целью действия или матчера.

---

### Действия

Действия — это часть Consent-O-Matic, которая фактически выполняет работу. Некоторые действия что-то делают с целевым выделением (target selection), другие связаны с управлением потоком.

#### Click

Это действие симулирует щелчок мыши по своей цели.

Пример:```json
{
   "type": "click",
   "target": {
      "selector": ".myButton",
      "textFilter": "Save settings"
   },
   "openInTab": false
}

openInTab при значении true вызовет ctrl+shift+click вместо обычного клика, что должно открыть ссылку (если она есть) в новой вкладке и переключиться на эту вкладку.

В этом примере мы используем простой target с textFilter, но поддерживается и полный выбор DOM.

List

Это действие выполняет список действий по порядку.

Example:```json { "type": "list", "actions": [] }

`actions` — это массив действий, которые будут выполнены по порядку.

#### Согласие

Действие согласия принимает массив согласий и пытается применить выбранные пользователем настройки согласия.

Пример:```json
{
   "type": "consent",
   "consents": []
}

consents это массив типов Consent

Слайдер

Некоторые формы согласия используют слайдер для установки уровня согласия; это действие поддерживает имитацию перемещения такого слайдера.

Пример:```json { "type": "slide", "target": { "selector": ".mySliderKnob" }, "dragTarget": { "target": { "selector": ".myChoosenOption" } }, "axis": "y" }

`target` — это целевой DOM-элемент для имитации движения слайда.

`dragTarget` — это DOM-элемент, используемый для определения расстояния слайда.

`axis` выбирает, должен ли слайдер двигаться по горизонтали "x" или по вертикали "y".

Событие слайда будет имитировать перетаскивание мышью `target` на расстояние от `target` до `dragTarget` по заданной оси `axis`.

#### Если CSS

Это действие используется как управляющий поток, запуская другое действие в зависимости от того, находит ли выборка DOM элемент или нет.

Пример:```json
{
   "type": "ifcss",
   "target": {
      "selector": "",
   },
   "trueAction": {
      "type": "click",
      "target": {
         "selector": ".myTrueButton"
      }
   },
   "falseAction": {
      "type": "click",
      "target": {
         "selector": ".myFalseButton"
      }
   }
}

trueAction — это действие, которое будет выполнено, если DOM-выбор находит элемент. falseAction будет выполнено, если DOM-выбор не находит элемент.

Ожидание CSS

Это действие ожидает, пока DOM-селектор найдет соответствующий элемент DOM. В основном используется, если что-то в форме согласия загружается медленно и требуется подождать.

Пример:```json { "type": "waitcss", "target": { "selector": ".myWaitTarget" }, "retries": 10, "waitTime": 200, "negated": false }

`retries` — количество попыток проверки целевого элемента DOM. По умолчанию: 10.

`waitTime` определяет время между повторными попытками. По умолчанию: 250.

`negated` заставляет "Wait For CSS" ждать, пока целевой элемент НЕ будет найден.

#### Для каждого

Если некоторый набор действий необходимо выполнить несколько раз, но с разными узлами DOM в качестве корня, можно использовать действие «для каждого». Оно выполняет своё действие 1 раз для каждого элемента DOM, выбранного его выбором DOM; все действия, выполняемые внутри цикла «для каждого», будут видеть DOM, начиная с текущего выбранного узла.

Пример:```json
{
   "type": "foreach",
   "target": {
      "selector": ".loopElement"
   },
   "action": {}
}

action — это действие, выполняемое для каждого найденного элемента DOM.

Ожидание

Это действие ожидает заданное количество миллисекунд перед продолжением.

Пример:```json { "type": "wait", "waitTime": 250 }

#### Скрыть

Это действие устанавливает CSS-класс 'ConsentOMatic-CMP-Hider' на выбранный DOM-элемент. Затем стандартные CSS-правила установят opacity в 0 для этого элемента.

Пример:```json
{
   "type": "hide",
   "target": {
      "selector": ".myHiddenClass"
   }
}

Close

This action closes the current tab, useful for consent providers like Evidon, which likes to open new tabs with the consent dashboard inside.

Example:```json { "type": "close" }

### Сопоставители

Сопоставители используются для проверки наличия некоторой выборки DOM или состояния некоторой выборки DOM.

#### CSS

Этот сопоставитель проверяет наличие выборки DOM и возвращает совпадение, если она существует.

Пример:```json
{
   "type": "css",
   "target": {
      "selector": ".myMatchingClass"
   }
}

Checkbox

Этот сопоставитель проверяет состояние элемента <input type='checkbox' /> и возвращает совпадение, если флажок установлен.

Пример:```json { "type": "checkbox", "target": { "selector": ".myInputCheckbox" } }

---

### Согласие

Это то, что используется внутри [Consent Actions](#consent) и определяет фактическое согласие, которое пользователь должен дать или не дать.

Каждое согласие имеет тип, который соответствует категориям согласия внутри Consent-O-Matic, поэтому, если пользователь переключил первую категорию согласия в положение ON, (Type A) и согласие имеет тип "A", то согласие будет включено.

Обычно согласие дается либо в виде переключателя, либо в виде набора кнопок вкл/выкл. Поэтому `consent` имеет механизм для каждого из этих случаев.

Пример:```json
{
   "type": "A",
   "toggleAction": {},
   "matcher": {},
   "trueAction": {},
   "falseAction": {}
}

type — это тип категории согласия, который определяет данное правило, и определяет, должно ли это согласие быть включено или выключено в зависимости от выбора пользователя для данного типа категории.

toggleAction — это действие используется для выбора согласия, если во всплывающем окне используется переключатель (toggle) или тумблер (switch) для обозначения согласия. Действие будет выполнено, если сопоставитель (matcher) сообщает, что согласие находится в состоянии, отличном от того, которое запросил пользователь; в противном случае оно не будет выполнено.

matcher — это сопоставитель, используемый для проверки состояния согласия. Для сопоставителя флажков (checkbox matcher), согласие считается данным, если флажок установлен. Для CSS-сопоставителя (CSS matcher), согласие считается данным, если сопоставитель находит элемент DOM.

trueAction и falseAction — это действия, используемые в случае, если согласие должно быть дано нажатием одной из двух кнопок, а не переключаться вкл/выкл. Они будут выполняться в зависимости от выбора пользователя. Если пользователь дал согласие для данного типа категории, будет выполнено trueAction, а falseAction будет выполнено, если пользователь не дал согласие на этот тип категории.

Если toggleAction и matcher присутствуют в конфигурации содержимого, будет использоваться toggleAction. Если один из них отсутствует, вместо них будут использоваться trueAction/falseAction.

Категории согласия

Как видно в настройках дополнения, в том же порядке:

D: Хранение и доступ к информации
A: Настройки и функциональность
B: Производительность и аналитика
E: Выбор контента, доставка и отчетность
F: Выбор рекламы, доставка и отчетность
X: Другие цели

Полный пример

Собирая все вместе, вот полный пример CMP "MyCMP", в котором есть 2 категории согласия для переключения.```json { "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" } } } ] } }

Consent-O-Matic

Популярное