cavi-au/consent-o-matic쿠키 팝업을 사용자의 선호도에 따라 자동으로 채워주는 브라우저 확장 프로그램
|
|
오늘날 대부분의 웹사이트는 귀하의 데이터를 처리하려 하며, 쿠키 배너를 통해 동의를 요청합니다. 이러한 배너는 귀하에게 통제권을 부여하기 위한 것이지만, 실제로는 특히 브라우저를 닫을 때 쿠키가 지워지는 경우 반복적이고 시간 소모적인 클릭을 초래하는 경우가 많습니다. 같은 배너가 다시 나타나며, 매번 같은 선택을 반복하게 됩니다.
Consent-O-Matic은 이 문제를 해결하기 위해 설계된 브라우저 확장 프로그램입니다. 오르후스 대학교(Aarhus University)의 고급 시각화 및 상호작용 센터(CAVI)에서 개발한 이 도구는 귀하를 대신하여 동의 배너를 자동으로 처리합니다. 설치 중에 기본 설정을 지정하면 Consent-O-Matic은 일반적인 동의 관리 플랫폼(CMP) 배너를 인식하고, 귀하의 선택을 적용하며, 확장 프로그램 아이콘 옆에 작은 체크 표시를 표시합니다.
Consent-O-Matic은 오픈 소스 프로젝트이므로 누구나 새 규칙 추가, 기존 규칙 업데이트 또는 문서 업데이트를 통해 개선에 기여할 수 있습니다. 이러한 협업 방식은 확장 프로그램이 끊임없이 변화하는 온라인 동의 배너 환경에 발맞추어 나가도록 하며, 모두가 더 적은 번거로움으로 데이터를 보호할 수 있게 해줍니다.
Consent-O-Matic은 현재 200개 이상의 CMP(전체 목록은 여기에서 확인)에서 작동하며, UserCentrics, CookieBot, OneTrust와 같은 주요 플랫폼과 특정 웹사이트의 쿠키 배너를 포함합니다.
Consent-O-Matic은 설치 시 브라우저에서 다음과 같은 권한 세트를 사용합니다.
확장 프로그램이 웹과 통신하는 경우는 다음 두 가지 상황뿐입니다.
확장 프로그램 아이콘을 통해 보고된 웹사이트의 URL은 URI 인코딩된 쿼리 문자열 형식으로 오르후스 대학교가 호스팅하는 웹사이트로 전송됩니다(예: LinkedIn은 https://gdprconsent.projects.cavi.au.dk/report.php?url=www.linkedin.com으로 보고됨).
브라우저의 공식 확장 프로그램 스토어(상단에 언급)를 통해 직접 설치하는 것을 적극 권장합니다. 공식 채널을 통해 설치하면 새 버전이 출시될 때 자동으로 업데이트됩니다.
다른 방법으로도 확장 프로그램을 얻을 수 있습니다.
확장 프로그램 스토어의 대안으로 Github의 릴리스 페이지에서 게시된 버전 중 하나를 수동으로 다운로드하여 추출할 수 있습니다.
이렇게 하는 경우 브라우저의 개발자 기능을 사용하여 압축 해제된 확장 프로그램 로드(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-firefox``` 또는 ```npm run build-chromium``` 또는 ```npm run build-safari```
Firefox 또는 Chromium의 경우 위에서 릴리스 아카이브를 설치할 때와 동일하게 진행하되, 브라우저를 `build` 폴더 또는 build/dist/에서 zip을 추출한 폴더로 지정하세요. Safari는 XCode 프로젝트를 로드하여 앱을 추가로 빌드해야 합니다.
소스에서 설치하는 것을 권장하지 않습니다.
## Extending Consent-O-Matic
현재 목록에서 원하는 CMP가 누락된 경우, 직접 추가할 수 있는 사용자 정의 목록을 만들 수 있습니다(브라우저에서 확장 프로그램 아이콘을 클릭하고 '추가 기능 설정 더 보기'를 클릭한 다음 '규칙 목록'을 클릭하고 사용자 정의 목록의 URL을 입력하세요.). **정말** 기여하고 싶다면, 풀 리퀘스트를 생성해 주세요.
사용자는 특정 웹사이트에 대한 규칙이 작동하지 않을 때 보고서를 보낼 수 있습니다. 보고된 URL의 전체 목록은 [여기](https://gdprconsent.projects.cavi.au.dk/reports.php)에서 확인할 수 있습니다. 숫자는 해당 URL이 보고된 횟수를 나타냅니다. 이 목록은 현재 URL에 대한 규칙이 확인/조정되었는지 여부를 표시하지 않으므로, 작업을 시작하기 전에 규칙이 여전히 깨져 있거나 누락되었는지 항상 확인하세요.
### Rule elements
* [기본 구조](#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)
### Basic Structure
Consent-O-Matic의 규칙 목록은 CMP(Consent Management Provider)를 탐지하고 탐지된 CMP 팝업을 처리하는 규칙을 포함하는 JSON 구조입니다.
각 CMP는 명명된 항목이며 `detectors`와 `methods`의 두 부분으로 구성됩니다. 이름은 이상적으로 기본 CMP의 실제 이름(올바른 대소문자와 공백 사용)이거나 해당 도메인에 고유한 경우 웹사이트 이름이어야 합니다. 이름은 확장 프로그램 설정의 정보 섹션에 표시되므로 사용자 친화적으로 만드세요.```json
{
"MyCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
"AnotherCMP": {
"detectors": [ ... ],
"methods": [ ... ]
},
}
만약 CMP에 2개 이상의 탐지기가 추가되면, 탐지기 중 하나라도 트리거되면 CMP는 탐지된 것으로 간주됩니다.
탐지기는 특정 규칙 집합이 적용되어야 하는지 여부를 탐지하는 부분입니다. 기본적으로 탐지기가 트리거되면 메서드가 적용됩니다.
탐지기 구조:```json { "presentMatcher": [{ ... }], "showingMatcher": [{ ... }] }
현재 매처는 페이지에 CMP가 존재하는지 감지하는 데 사용됩니다.
일부 CMP는 이전에 동의를 제공한 페이지를 다시 방문할 때도 팝업 HTML을 DOM에 삽입합니다. 우리는 동의 양식이 실제로 페이지에 표시되는 경우에만 처리하려고 합니다. 이것이 바로 showing 매처가 사용되는 이유입니다.
present 및 showing 매처 모두 [`Matchers`](#matchers)의 공통 구조를 따릅니다.
present 및 showing 매처는 여러 개의 매처가 될 수 있으며, 각각 present와 showing에 대해 모든 매처가 적용될 때만 감지기가 트리거됩니다.
#### Methods
메서드는 작업의 모음입니다. 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은 실행할 [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": {}
}
parent와 target의 두 부분이 있습니다. parent는 선택 사항이지만, 존재할 경우 먼저 해석되어 target의 시작점으로 사용됩니다. 이를 통해 단일 일반 CSS 선택자로는 불가능했던 매우 복잡한 요소 선택을 구성할 수 있습니다. 한 가지 예로 shadow DOM 내부를 선택하는 경우가 있습니다. 이때 parent를 사용하여 shadow가 있는 요소를 대상으로 지정하면, 해당 요소의 자식들을 선택자로 쿼리할 수 있습니다.
parent와 target의 모든 매개변수 중 selector를 제외한 나머지는 선택 사항입니다.
선택 방식은 selector의 CSS 선택자를 사용한 다음, 다양한 필터를 통해 결과 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" }
이 선택자는 먼저 iframe 내부에 있고 클래스가 `myParent`인 DOM 요소이면서 클래스가 `myChild`인 자식 DOM 요소를 포함하며 그 자식이 "Gregor" 텍스트를 포함하는 `parent`를 찾으려고 시도합니다.
그런 다음, 이 parent를 "root"로 사용하여 클래스가 `myTarget`인 DOM 요소를 찾으려고 시도합니다.
그러면 이것은 액션 또는 매처의 대상이 될 수 있습니다.
---
### 액션
액션은 Consent-O-Matic에서 실제로 작업을 수행하는 부분입니다. 일부 액션은 대상 선택에 대해 작업을 수행하고, 다른 액션은 제어 흐름과 관련이 있습니다.
#### 클릭
이 액션은 대상에 마우스 클릭을 시뮬레이션합니다.
예시:```json
{
"type": "click",
"target": {
"selector": ".myButton",
"textFilter": "Save settings"
},
"openInTab": false
}
openInTab가 true로 설정되면, 클릭 대신 ctrl+shift+click을 트리거하여, 링크가 있는 경우 새 탭에서 열리고 해당 탭에 포커스를 맞춥니다.
이 예제에서는 간단한 target과 textFilter만 사용했지만, 전체 DOM 선택이 지원됩니다.
이 액션은 액션 목록을 순서대로 실행합니다.
예시:```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`을 주어진 `axis`에서 `target`에서 `dragTarget`까지의 거리만큼 드래그하는 것을 시뮬레이션합니다.
#### If CSS
이 작업은 제어 흐름으로 사용되며, DOM 선택이 요소를 찾는지 여부에 따라 다른 작업을 실행합니다.
예시:```json
{
"type": "ifcss",
"target": {
"selector": "",
},
"trueAction": {
"type": "click",
"target": {
"selector": ".myTrueButton"
}
},
"falseAction": {
"type": "click",
"target": {
"selector": ".myFalseButton"
}
}
}
trueAction는 DOM 선택이 요소를 찾을 경우 실행되는 액션입니다.
falseAction는 DOM 선택이 요소를 찾지 못할 경우 실행됩니다.
이 액션은 DOM 선택자가 일치하는 DOM 요소를 찾을 때까지 기다립니다. 이는 주로 동의 양식의 일부가 느리게 로드되어 기다려야 할 때 사용됩니다.
예시:```json { "type": "waitcss", "target": { "selector": ".myWaitTarget" }, "retries": 10, "waitTime": 200, "negated": false }
`retries`는 대상 DOM 요소를 확인하는 횟수입니다. 기본값은 10입니다.
`waitTime`은 재시도 사이의 대기 시간을 결정합니다. 기본값은 250입니다.
`negated`는 "Wait For CSS"가 대상이 발견되지 않을 때까지 대기하도록 합니다.
#### For Each
일련의 작업을 여러 번 실행해야 하지만 각각 다른 DOM 노드를 루트로 사용해야 하는 경우 for each 작업을 사용할 수 있습니다. 이 작업은 DOM 선택에 의해 선택된 각 DOM 요소에 대해 1회씩 작업을 실행합니다. for each 루프 내에서 실행되는 모든 작업은 현재 선택된 노드를 시작점으로 DOM을 보게 됩니다.
예시:```json
{
"type": "foreach",
"target": {
"selector": ".loopElement"
},
"action": {}
}
action은 발견된 각 DOM 요소에 대해 실행할 작업입니다.
이 작업은 지정된 밀리초(ms) 동안 기다린 후 계속 진행합니다.
예시:```json { "type": "wait", "waitTime": 250 }
#### Hide
이 작업은 DOM 선택에 'ConsentOMatic-CMP-Hider' CSS 클래스를 설정합니다. 기본 CSS 규칙은 요소의 투명도를 0으로 설정합니다.
예시:```json
{
"type": "hide",
"target": {
"selector": ".myHiddenClass"
}
}
이 작업은 현재 탭을 닫습니다. Evidon과 같은 동의 제공자에게 유용하며, 이들은 동의 대시보드가 포함된 새 탭을 열기를 좋아합니다.
예시:```json { "type": "close" }
### 매처
매처는 일부 DOM 선택의 존재 또는 일부 DOM 선택의 상태를 확인하는 데 사용됩니다.
#### CSS
이 매처는 DOM 선택의 존재를 확인하고, 존재하는 경우 일치함을 반환합니다.
예시:```json
{
"type": "css",
"target": {
"selector": ".myMatchingClass"
}
}
이 매처는 <input type='checkbox' />의 상태를 확인하여 체크박스가 선택된 경우 일치한다고 반환합니다.
예시:```json { "type": "checkbox", "target": { "selector": ".myInputCheckbox" } }
---
### 동의
이는 [동의 작업](#consent) 내부에서 사용되는 것으로, 사용자가 제공하거나 제공하지 않아야 할 실제 동의를 정의합니다.
각 동의에는 Consent-O-Matic 내 동의 카테고리와 일치하는 유형이 있습니다. 예를 들어, 사용자가 첫 번째 동의 카테고리를 ON으로 토글한 경우(유형 A) 동의 유형이 "A"이면 동의가 활성화됩니다.
일반적으로 동의는 토글 또는 on/off 버튼 세트로 제공됩니다. 따라서 `consent`는 각 경우에 대한 메커니즘을 가지고 있습니다.
예시:```json
{
"type": "A",
"toggleAction": {},
"matcher": {},
"trueAction": {},
"falseAction": {}
}
type은 이 규칙이 정의하는 동의 카테고리의 유형이며, 사용자가 해당 카테고리 유형에 대해 선택한 내용에 따라 이 동의가 켜져야 할지 꺼져야 할지를 결정합니다.
toggleAction 이 작업은 팝업이 동의를 전달하기 위해 토글 또는 스위치를 사용하는 경우 동의를 선택하는 데 사용됩니다. 매처가 동의가 사용자가 요청한 상태와 다른 상태에 있다고 판단하면 이 작업이 실행되고, 그렇지 않으면 실행되지 않습니다.
matcher는 동의가 어떤 상태에 있는지 확인하는 데 사용되는 매처입니다. 체크박스 매처의 경우 체크박스가 선택되어 있으면 동의가 주어진 것입니다. CSS 매처의 경우 매처가 DOM 선택을 찾으면 동의가 주어진 것입니다.
trueAction과 falseAction은 동의를 켜고 끄는 대신 두 개의 버튼 중 하나를 눌러 동의를 표시해야 하는 경우 사용되는 작업입니다. 이들은 사용자의 동의 선택에 따라 실행됩니다. 사용자가 이 카테고리 유형에 동의한 경우 trueAction이 실행되고, 사용자가 이 카테고리 유형에 동의하지 않은 경우 falseAction이 실행됩니다.
콘텐츠 설정에 toggleAction과 matcher가 모두 있는 경우 toggleAction이 사용되고, 둘 중 하나라도 없으면 trueAction/falseAction이 대신 사용됩니다.
애드온 설정에서 보이는 것과 동일한 순서:
모든 것을 종합하면, 토글할 2개의 동의 카테고리가 있는 CMP "MyCMP"의 전체 예시입니다.```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" } } } ] } }