Wie kann der Datenschutz auf Webseiten durch eingebundene Tools, iFrames und APIs praxisnah verbessert werden? Hier stellen wir Ihnen die Problematiken, kurze Handlungsempfehlungen und Anleitungen zur Verfügung.
WebFonts
Web-Schriftarten können durch Verantwortliche auf Webseiten eingesetzt werden. Zum Anzeigen dieser Schriftarten baut der Browser eine Verbindung zu einem Dritt-Server auf, um die Web-Schriftarten nachzuladen. Bei einem solchen Aufbau werden grundsätzlich auch personenbezogene Daten der Besucher an die Dritt-Server übermittelt. Dies geschieht in der Regel, ohne eine vorherige Einwilligung beim Besucher eingeholt zu haben und auch ohne eine sog. vernünftige Erwartung der betroffenen Personen. Häufig stehen diese Dritt-Server in den USA und seitens der Anbieter werden keine und nur wenige Zugeständnisse seitens des Datenschutzes gemacht. Ein milderes Mittel wäre es also, wenn die Schriftarten ohne Verbindungen zu Dritt-Servern direkt auf dem Webserver des Verantwortlichen eingebunden wären. Dies hat den Vorteil, dass das gewünschte Schriftbild – welches evtl. zum Corporate Design gehört – nicht leidet. Alternativ ist es natürlich auch möglich, dass der Verantwortliche auf die Webschriftarten verzichtet und stattdessen andere Schriftarten verwendet, die auf ihrem/seinen Server liegen.
Anleitung – Google WebFonts
- Auf der Seite https://fonts.google.com/ suchen Sie sich Ihre benötigte Schriftart und laden Sie sie herunter. Alternativ können Sie die Web-Schriftarten auch von der Seite https://google-webfonts-helper.herokuapp.com/ herunterladen
- Laden Sie nun mittels der von Ihnen verwendeten FTP-Software die Schriftarten auf Ihren Webspace in einen Unterordner (beispielsweise „/fonts/“).
- Nun müssen Sie mittels einem Text-Editor die Datei „style.css“, die sich im Theme-Ordner befindet, anpassen.
- Am Anfang der „style.css“ fügen Sie folgenden Code ein (Beispiel für die Schriftfamilie „allerta“, die sich im Unterordner „/fonts“ befindet). Im Anschluß müssen Sie noch die bisherige Schnittstelle aus der „style.css“ entfernen.
/* allerta-stencil-regular - latin */
@font-face {
font-family: 'Allerta Stencil';
font-style: normal;
font-weight: 400;
src: url('/fonts/allerta-stencil-v11-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Allerta Stencil Regular'), local('AllertaStencil-Regular'),
url('/fonts/allerta-stencil-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/allerta-stencil-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/allerta-stencil-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/fonts/allerta-stencil-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/allerta-stencil-v11-latin-regular.svg#AllertaStencil') format('svg'); /* Legacy iOS */
}Maps-Einbindungen
Vergleichbar zu der Einbindung von Web-Schriftarten bauen Einbindungen von Maps – also Kartenausschnitte – Verbindungen zu Dritt-Servern auf. Auch dabei werden personenbezogene Daten der Besucher zu den Anbietern der Karten übermittelt. Auch hier befinden sich einige der Anbieter in den USA. Zusätzlich kommt hinzu, dass durch die Einbindung der Maps-API teilweise auch Cookies gesetzt werden; nach Urteil des EuGH und BGH sind allerdings nur technisch unbedingt notwendige Cookies von einer Opt-In-Einwilligung befreit. Einen anderen datenschutzkonformen Weg als die Verarbeitung auf eine vorab eingeholte, freiwillige, informierte, granulare, dokumentierte und widerrufbare Einwilligung zu stützen, ist nach heutigem Stand nicht möglich.
Anleitung Google Maps 2-Klick-Einwilligung
Für eine unter MIT-Lizenz auf GitHub veröffentlichte Methode, praktische 2-Klick-Einwilligungen umzusetzen, unternehmen Sie folgende Schritte:
- Sie bauen das Script https://github.com/01-Scripts/2Click-Iframe-Privacy/blob/master/dist/2ClickIframePrivacy.min.js in Ihrer Webseite ein
- Danach fügen Sie den folgenden Code in Ihre CSS-Datei ein:
<style type="text/css">
div.privacy-msg p {
width:200px;
border: 1px solid black;
padding: 5px;
text-align:center;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
</style>- Danach initialisieren Sie die Funktion mit dem
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', _2ClickIframePrivacy.init(''));
</script>
- Im Anschluß können Sie die Attribute im Code der Webseite ändern. Dazu ersetzen Sie es mit
<iframe src="" data-2click-type="map" data-src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d2684819.3977904147!2d11.4079934!3d48.91741285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sde!2sde!4v1526416354209" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
- Im Anschluß sollte statt der Google-Maps-API ein Hinweis erscheinen und erst nach einem Klick auf die Schaltfläche „Inhalt anzeigen“ die Karte geladen werden
Videos
Auch bei der Einbindung von Videos handelt es sich – wie bei den Karten – um Verarbeitungen von personenbezogene Daten die ohne Einwilligung des Besuchers durchgeführt werden. Auch hier ist der Markt von US-amerikanischen Anbietern dominiert, sodass davon ausgegangen werden muss, dass auch personenbezogene Daten in den USA verarbeitet werden. Ebenfalls wird ein Anbieter Videos nicht ohne die Zuhilfenahme von nicht-technisch-notwendigen Cookies ausspielen können.
Anleitung YouTube „Erweiterter Datenschutzmodus“
Beim Einsatz von YouTube sollte in erster Linie zunächst der „erweiterte Datenschutzmodus“ aktiviert sein. Dieser bewirkt, dass nicht bereits beim Betreten der Seite personenbezogene Daten an YouTube übermittelt werden und dass keine Cookies gesetzt. Hierzu gehen Sie wie folgt vor:
- Wählen Sie das YouTube-Video aus, welches Sie einbetten wollen
- Unterhalb des Videos befindet sich die Schaltfläche „Teilen“
- Nun wählen Sie die Methode „Einbetten“ aus
- In diesem neuen Fenster erhalten Sie den iFrame-Code, welchen Sie auf Ihrer Webseite integrieren möchten.
- Hier wählen Sie – bevor Sie den Code kopieren – die Funktion „Erweiterten Datenschutzmodus aktivieren“ aus. Nun ändert sich der iFrame-Code
- Diesen können Sie ohne Perfomance-Einbußen auf Ihrer Webseite einbinden.
Zwar kann nun argumentiert werden, dass ein Klick auf das Play-Symbol die Einwilligung des Besuchers in die Verarbeitung darstellt, allerdings sollten Sie um 100 prozentig auf der datenschutzrechtlich sicherern Seite zu sein, die Verarbeitung mittels YouTube zusätzlich in Ihren Consent-Manager einbauen. Warum? Eine Einwilligung muss – wie oben beschrieben – widerrufbar sein, eine Widerrufsmöglichkeit bietet der „erweiterte Datenschutzmodus“ allerdings nicht, Ihr Consent-Manager allerdings schon.
Weitere Informationen
Bezüglich des Trackings und der Notwendigkeit der Einholung einer Einwilligung mittels Cookie-Banner auf Websites haben wir auch einen Blogbeitrag und eine Checkliste erstellt, die Sie hier einsehen können.