export Lizenzkonformität Web-Design

Ein sauberer Cookie-Dialog — mit bootScore

/ von Karsten Reincke | Kommentar schreiben

Wir dür­fen Coo­kies nicht ein­fach so auf die Fest­plat­te einer Lese­rin schrei­ben (las­sen). Denn die gehört ihr, nicht uns. Für die Coo­kies, die tech­nisch not­wen­dig sind, hat sie mit dem Abruf unse­rer Sei­te zwar kon­klu­dent ihr Ein­ver­ständ­nis gege­ben. Denn sie woll­te unse­ren Blog­bei­trag ja lesen. Die ande­ren Coo­kies dür­fen wir jedoch nur dann auf ihrem Rech­ner spei­chern, wenn unse­re Lese­rin es uns expli­zit erlaubt hat. Und bevor sie das tut, muss sie abfra­gen kön­nen, was die Coo­kies tun. Dazu dient uns ein sau­be­rer Coo­kie-Dia­log.

[ de | en ]

Den brau­chen wirt nicht selbst zu ent­wi­ckeln . Denn bootS­core lie­fert uns mit sei­nem Plug­in bsCoo­kie einen kon­fi­gu­rier­ba­ren Dia­log auf der Höhe der Zeit:

Lösung

  • Lade bsCoo­kie her­un­ter.
  • Instal­lie­re die Zip-Datei über das Plug­in-Manage­ment Dei­nes Word­Press-Backends.
  • Ermitt­le die Coo­kies, die Du auf dem Rech­ner Dei­ner Lese­rin instal­lie­ren willst.((Wir müs­sen dabei beden­ken, dass auch unse­re Plug­ins Coo­kies able­gen las­sen kön­nen. Es reicht also nicht, nur nach den ent­spre­chen­den Java­Script-Befeh­len in unse­ren eige­nen Posts und Pages zu suchen.))
  • Ord­ne jeden die­ser Coo­kies der Grup­pe ’neces­sa­ry’((Coo­kies, die wir die­ser Grup­pe zuord­nen, wer­den zuletzt auch ohne expli­zi­te Zustim­mung auf der Fest­plat­te unse­rer Lese­rin abge­legt, eben weil sie tech­nisch not­wen­dig sind. So müs­sen wir not­falls auch bewei­sen kön­nen, dass die­se Coo­kies tat­säch­lich tech­nisch not­wen­dig sind.)), ‘adver­ti­sing’ oder ‘ana­ly­tics’ zu.
  • Zie­he im Dia­log ‘Appearance/Widgets’ ein Wid­get ‘Cus­to­mer HTML’ in die Wid­get-Grup­pe Footer‑4
  • Tra­ge dort die Script­zei­len ein, wie sie die bsCoo­kie-Doku­men­ta­ti­on offe­riert.
  • Erzeu­ge für jedes Dei­ner Plug­ins in der ent­spre­chen­den Sek­ti­on einen Ein­trag.
  • Ver­lin­ke Dei­ne Daten­schutz­sei­te in den Dia­log, indem Du #your­pri­va­cy­po­li­cy ent­spre­chend ersetzt.
  • Über­set­ze die Tex­te in die Spra­che Dei­ner Site (bzw. erzeu­ge einen zusätz­li­chen Ein­trag gemäß Dei­ner Mehr­spra­chig­keits­stra­te­gie)

Hintergrund

Das Schrei­ben der Coo­kies über einen Dia­log erlau­ben zu las­sen, ist nur die eine Sei­te der Medail­le. Denn Coo­kies kön­nen auch (per­so­nen-bezo­ge­ne) (Wie­der­erken­nungs-) Daten spei­chern, die auf Ser­ver­sei­te akku­mu­liert und an exter­ne Stel­len wei­ter­ge­reicht wer­den. Des­halb müs­sen wir sol­che Coo­kies außer­dem in unse­rem Daten­schutz­kon­zept erwäh­nen. Damit unse­re Lese­rin dies auch direkt aus dem Coo­kie-Zustimmugs­dia­log her­aus aus­ru­fen kann, bie­tet der bsCoo­kie-Dia­log­text einen Link, des­sen Wert #your­pri­va­cy­po­li­ce wir ent­spre­chend (um)setzen dür­fen.

Es ist mitt­ler­wei­le gute Tra­di­ti­on, Coo­kies funk­ti­ons­be­zo­gen zu grup­pie­ren und für die Grup­pen als sol­che zu fra­gen, ob die ihr zuge­ord­ne­ten Coo­kies lokal abge­legt wer­den dür­fen. Recht­lich not­wen­dig ist so ein Clus­tern nicht. Wir könn­ten unse­re Lese­rin die Nut­zung von Coo­kies auch ganz gene­rell erlau­ben oder ableh­nen lassen.((Eine stär­ke­re Gra­nu­la­ri­tät liegt aber in unse­rem Inter­es­se. Denn möch­te eine Lese­rin das eine nicht — z.B. Adver­ti­sing -, könn­te sie das ande­re — z.B. Ana­ly­tics — immer noch erlau­ben. Damit wür­den wir wenigs­tens noch einen Teil des­sen erfah­ren, was wir ins­ge­samt zu erfah­ren hoff­ten.)) Oder wir könn­ten jeden ein­zel­nen Coo­kie an- oder abwähl­bar machen — und den Dia­log damit über­frach­ten.

Wie dem auch sei: Erst­mal müs­sen wir natür­lich wis­sen, wel­che Coo­kies unse­re Site schreibt und was die­se tat­säch­lich tun. Wel­che es sind, kön­nen wir uns über die Brow­ser anzei­gen las­sen. Etwa mit­tels sei­nes ‘Pri­va­cy and Security’-Dialoges. Oder mit Hil­fe eines Browser-Plugins((z.B. mit dem Coo­kie Edi­tor)), das direkt für jede auf­ge­ru­fe­ne Site/Seite anzeigt, wel­che Coo­kies von ihr geschrie­ben wor­den sind. Was unse­re Coo­kies tun, müs­sen wir dage­gen geson­dert ermit­teln.

Haben wir die­se Coo­kies dann funk­tio­nal sor­tiert, brau­chen wir im bsCoo­kie-Dia­log nur noch die ent­spre­chen­den Grup­pen als Sek­tio­nen anzu­le­gen und in die­se für jedes zuge­hö­ri­ge Coo­kie einen Ein­trag zu erzeu­gen. Für die drei gän­gi­gen Grup­pen ’neces­sa­ry’, ‘adver­ti­sing’ und ‘ana­ly­tics’ bringt bsCoo­kie die nöti­gen Code­grup­pen immer schon mit. Hier reicht es mit­hin, die Coo­kies in und mit den Ein­zel­ein­trä­gen zu beschrei­ben. Gesetzt, wir woll­ten die drei Coo­kies bsNec­es­saryCook­ie, bsAdver­tis­ing­Cook­ie, und bsAnal­iz­ing­BCook­ie geset­zes­kon­form able­gen las­sen, müss­te der Code für den bsCoo­kie-Dia­log so aus­se­hen:

<script>
  // Init
  window.addEventListener('load', function () {

    // obtain plugin
    var cc = initCookieConsent();

    // run plugin with your configuration
    cc.run({
      current_lang: 'de',
      autoclear_cookies: true,
      page_scripts: true,

      languages: {
        'de': {
          consent_modal: {
            title: 'Cookie-Zumstimmung:',
            description: 'Wir nutzen Cookies, um Deine Entscheidungen bei zukünftigen Besuche wiederzuverwenden. Wenn Du auf "Alle akzeptieren" klickst, dürfen wir alle Cookies verwenden, die technisch notwendigen und die funktionell hilfreichen. Wenn Du auf "nur notwendige" klickst, untersagst Du uns, die  funktionell hilfreichen Cookies zu verwenden. Eine feinere Auswahl bieten Dir unsere expliziten <a data-bs-toggle="modal" href="#bs-cookie-modal">Cookie-Einstellungen</a>.',
            primary_btn: {
              text: 'alle akzeptieren',
              role: 'accept_all'
            },
            secondary_btn: {
              text: 'nur notwendige',
              role: 'accept_necessary'
            }
          },

          settings_modal: {
            title: 'Cookie-Einstellungen',
            save_settings_btn: 'Auswahl sichern',
            accept_all_btn: 'alle akzeptieren',
            reject_all_btn: 'nur notwendige',
            close_btn_label: 'schließen',
            cookie_table_headers: [
              { col1: 'Name' },
              { col2: 'Domain' },
              { col3: 'Verfall' },
              { col4: 'Beschreibung' }
            ],
            blocks: [
              {
                title: 'Cookie-Nutzung',
                description: 
'Wir verwenden Cookies, um zentrale Funktionen unserer Website bereitzustellen und Dein Leseerlebnis zu verbessern. Du kannst für jede Cookie-Gruppe entscheiden, ob Du sie zulässt oder nicht. Weitere Einzelheiten zu Cookies und anderen sensiblen Daten findest Du in unserem <a href="http://karsten-reincke.de/datenschutz">Datenschutzkonzept</a>.'
              }, {
                title: 'Notwendige',
                description: 
'Diese Cookies sind essentiell für unsere Website. Ohne sie würde die Site nicht richtig funktionieren.',
                toggle: {
                  value: 'necessary',
                  enabled: true,
                  readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
                },
                cookie_table: [
                  {
                    col1: 'bs_cookie_settings',
                    col2: 'bootScore.me',
                    col3: 'wird gelöscht wenn Deine Session beendet wird',
                    col4: 
'Darin speichert bootScore bzw. das Plugin "bsCookies" Deine Cookie-Einstellungen',
                    is_regex: false
                  },
                  {
                    col1: 'bsNec­es­saryCook­ie', 
                    col2: 'http://karsten-reincke.de/',
                    col3: 'nach 100 Tagen',
                    col4: 'Demo-Cookie für "pimp your BootScore"',
                    is_regex: false
                  },                 
                ]
              }, {
                title: 'Analytics',
                description: 
'Diese Art der Cookies erlaubt es uns, Deine Entscheidungen beim nächsten Mal wiederzuverwenden.',
                toggle: {
                  value: 'analytics',     // your cookie category
                  enabled: false,
                  readonly: false
                },
                cookie_table: [           // list of all expected cookies
                  {
                    col1: 'bsAnal­iz­ing­Cook­ie',         
                    col2: 'http://karsten-reincke.de/',
                    col3: 'nach 10 Tagen',
                    col4: 'Demo-Cookie für "pimp your BootScore"',
                    is_regex: false
                  }
                ]
              }, {
                title: 'Advertising',
                description: 
'Solche Cookies vermerken, wie Du unsere Website verwendest, welche Seiten Du besuchts und welche Links Du anklickst. Alle Informationen sind anonymiziert und können nicht benutzt werden, um Dich zu identifizieren.',
                toggle: {
                  value: 'advertising',
                  enabled: false,
                  readonly: false
                },
                cookie_table: [             // list of all expected cookies
                  {
                    col1: 'bsAdver­tis­ing­Cook­ie',
                    col2: 'http://karsten-reincke.de/',
                    col3: '2 Wochen',
                    col4: 'Demo-Cookie für "pimp your BootScore"',
                    is_regex: false
                  }
                ]
              }, {
                title: 'Weitere Informationen',
                description: 
'Bei weiteren Fragen zu unserem Daten-Management, kontaktiere <a href="http://karsten-reincke.de/impressum">uns</a> einfach.',
              },

            ]
          }

        }
      }

    });
  });
</script>

Die Infor­ma­tio­nen in den Coo­kie-Zustim­mungs­dia­logs ein­zu­bau­en, ist das eine. Sei­nen Code zu akti­vie­ren, das ande­re. Den ange­pass­ten bs-coo­kie-set­tings-Java­Script-Code tra­gen wir dazu in ein Cus­tom-HTML-Ele­ment ein, das wir dem Wid­get Foo­ter 4 hin­zu­ge­fügt haben. Prin­zi­pi­ell könn­ten wir das Cus­tom-HTML-Ele­ment auch in ande­re Wid­gets ein­bet­ten. bsCoo­kie schlägt Foo­ter 4 vor, weil der Java­Script-Code so eher am Ende einer Sei­te ein­ge­bet­tet und damit direkt aus­ge­führt wird. Wie auch immer, der Coo­kie-Zustim­mungs­dia­log wird dann beim Auf­ruf all der Sei­ten ange­zeigt, deren Tem­pla­tes den Foo­ter 4 ver­wen­den. Das Pro­blem der ‘Deep-Links’((Es reicht nicht aus, nur unse­re Ein­stiegs­sei­te den Zustim­mungs­dia­log anzei­gen zu las­sen. Denn gele­gent­lich rei­chen unse­re Lese­rin­nen auch Links auf tie­fer ein­ge­bet­te­te Sei­ten her­um. Unse­re Site muss auch in dei­sen Fäl­len erst um Erlaub­nis bit­ten, bevor sie die Coo­kies ablegt.)) ist also gelöst, wenn jede Sei­te ein Tem­p­la­te ver­wen­det, das den ent­spre­chen­den Java­Script-Code ent­hält.

Blie­ben uns noch drei letz­te Auf­ga­ben:

  • Zum ers­ten wer­den wir unse­ren Zustim­mungs­dia­log oft auch sprach­lich anpas­sen wol­len. Auch das geht über die ‘Umpro­gram­mie­rung’ des erwähn­ten Java­Script-Codes.
  • Zum zwei­ten wer­den wir den Dia­log optisch anpas­sen müs­sen. Per default((zumindest bis bsCoo­kies, ver­si­on 5.3.0)) wird der Dia­log näm­lich trans­pa­rent über den bestehen­den Text gelegt. Damit ist oft weder der Text, noch der Dia­log les­bar. Optisch desi­gnen kön­nen wir den Zustim­mungs­dia­log, indem wir fol­gen­de Zei­len in die Datei _bscore_custom.scss ein­fü­gen (und anpas­sen): 
    
// design the bsCookie-Dialog
#c-inr {
  border-color: darkblue;
  border-width: 2px;
  border-style: solid;
  background-color: #eef;
  color: blue($color: #000000);
  padding: 5px;
}

#c-p-bn {
  border-color: darkblue;
}

#c-s-bn {
  border-color: darkblue;
}
  • Zum drit­ten müs­sen wir die Seman­tik des Coo­kie-Zustim­mungs­dia­lo­ges imple­men­tie­ren. Wenn wir mehr als nur reden wol­len, müs­sen wir unse­ren ‘Schrei­be-Coo­kie-Java­Script-Code’ so anle­gen, dass er ohne Zustim­mung nur die tech­ni­schen not­wen­di­gen Coo­kies schreibt und dass er ansons­ten nur die Coo­kies aus den Grup­pen ablegt, für die eine Zustim­mung vor­liegt.

Die­sen letz­ten Punkt wer­de ich in einem geson­der­ten Post auf­grei­fen …

Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, zuletzt muss die Web-Desi­gne­rin im Rah­men ihrer Anpas­sun­gen auch recht­li­che Vor­ga­ben beach­ten, sei­en es die der DSGVO, die für eine Coo­kie-Zustim­mung und deren Beach­tung oder die zur Erstel­lun­gen einer Daten­schutz­er­klä­rung. In die­sen Kon­text gehö­ren dann auch die Fra­gen nach dem Zweck eines Bild­ver­zeich­nis­ses, nach einem adäqua­ten Impres­sum oder nach einer hin­rei­chen­den Open-Source-Lizenz­er­fül­lung. Dies ins rech­te Licht zu rücken, will auch die­ser Post unter­stüt­zen.

Im Übri­gen: Män­ner sind mit­ge­meint.

To top