YouTube-Videos datenschutzkonform und ohne Third-Party-Requests einbinden mit Cloudflare

An und für sich ist Ghost eine recht datenschutzfreundliche Plattform: So werden für die eingebauten Statistiken keine IP-Adressen gespeichert und Cookies werden nur dann gesetzt, wenn es technisch notwendig ist (z.B. beim Login).

Schwierig wird es allerdings, wenn man Inhalte Dritter einbinden möchte. Ein häufiger Anwendungsfall: YouTube-Videos. Fügt man den Link zu einem YouTube-Video im Editor ein, bettet dieser automatisch einen Player ein. Das Problem dabei: Dieser wird bei jedem Seitenaufruf automatisch geladen – inklusive Third-Party-Cookies. Holt man sich dafür vorher keine Einwilligung der Besucherin ein – beispielsweise mit einem nervigen Cookie Banner –, ist das ein Verstoß gegen die DSGVO.

Wer sich schon einmal tiefer in dieses Rabbit Hole gegraben hat, wird nun vielleicht anbringen, dass man das Video stattdessen mit einem datenschutzfreundlicheren youtube-nocookie.com-iFrame einbinden könnte. Doch auch diese Methode hat ihre Tücken. Denn auch dann werden beim Aufruf der Seite Daten an Google übertragen. Nicht nur für den Player an sich, sondern auch zum Laden der Fonts, die dieser verwendet. Holt man sich dafür keine Einwilligung, so urteilte das Landgericht München am 20. Januar 2022, verstößt auch das gegen die DSGVO.

Einbindung von Google Fonts ist rechtswidrig

Wer Schriftarten von Google-Servern ohne Zustimmung einbindet, verstößt gegen die DSGVO. Die Gerichtsentscheidung betrifft aber auch andere CDNs.

Moritz Tremmel

Wirklich datenschutzfreundlich ist es also nur, wenn der Besucher selbst entscheiden kann, ob ein eingebettetes Video von YouTube geladen werden soll oder nicht.

Mit diesem kleinen Hack bindet man YouTube-Videos datenschutzfreundlich ein

Da man bisher keine eigenen Cards für den Ghost-Editor programmieren kann, wendet Spectre einen kleinen Hack an. Alles, was es dafür braucht, ist ein HTML-Block. Dieser enthält ein DIV-Element mit der ID des YouTube-Videos, das eingebunden werden soll. Beim Laden der Seite erkennt Spectre das DIV, lädt das entsprechende Video-Thumbnail direkt von https://i.ytimg.com und zeigt dieses als Vorschau an. Erst wenn die Besucherin auf das Video klickt und damit das Laden von Drittanbieter-Inhalten bestätigt, wird ein Player mithilfe eines youtube-nocookie.com -iFrames geladen.

So sieht das dann aus:

Drei einfache Schritte

Um ein YouTube-Video auf diese Weise einzubetten, braucht man lediglich die ID des Videos. Das ist die Buchstaben- und Zahlenkombination hinter dem GET-Parameter v in der Video-URL. Beispiel: Wenn die Video-URL https://www.youtube.com/watch?v=5jYJWSF9IRI ist, lautet die ID 5jYJWSF9IRI.

Wir gehen in drei Schritten vor:

1. YouTube-Video-ID kopieren (z.B. 5jYJWSF9IRI)
2. Im Editor einen HTML-Block an der Stelle einfügen, wo das Video platziert werden soll
3. Den folgenden Code in den HTML-Block einfügen und VideoID durch die kopierte ID ersetzen: <div class="youtube-player" data-id="VideoID"></div>

In diesem Beispiel wäre der fertige Code dann also:

<div class="youtube-player" data-id="5jYJWSF9IRI"></div>

Tip: Einbettungscode als Snippet speichern

Um beim Einbetten von YouTube-Videos nicht jedes Mal den entsprechenden Code nachschlagen zu müssen, empfiehlt es sich, den fertigen HTML-Block mit dem Einbettungscode als Snippet abzuspeichern. Wie das geht, steht in der Ghost-Dokumentation.

Creating reusable snippets

Snippets allow any staff user to reuse content and cards across posts and pages. Creating & using snippet To save a snippet, highlight the content you’d like to transform into a template, then click the snippet icon in the toolbar to save your selection with a name. To insert a snippet

Ghost Help CenterGhost

Das Snippet findet sich dann direkt im Kontextmenü des Ghost-Editors. Nur die Video-ID muss man austauschen:

Third-Party-Requests komplett eliminieren

Ruft man eine Seite auf, in die ein YouTube-Video datenschutzfreundlich eingebettet wurde, wird das Thumbnail mit einem Request an https://i.ytimg.com geladen. Lädt man mit einem Klick das eingebettete Video, wird ein JSON-Objekt mit den Video-Metadaten mit einem Request an https://www.youtube-nocookie.com geladen.

Diese Requests sollten aus Datenschutzperspektive an sich unproblematisch sein. Für diejenigen von euch, die ihre Website mit Cloudflare cachen, habe ich trotzdem eine Lösung entwickelt, um auch diese zu eliminieren: Ein Proxy, realisiert als Cloudflare Worker. Das hat zwei Vorteile:

1. Wenn der Worker unter einer Route mit der selben Domain wie die Ghost-Instanz zur Verfügung gestellt wird (z.B. im Unterverzeichnis /yt-proxy/), wird die Seite wird minimal schneller geladen, weil keine Verbindung zu einem weiteren Server aufgebaut werden muss (dessen IP eventuell zuerst aufgelöst werden muss)
2. Die IP-Adresse der Besucherin bleibt dem angefragten Server hinter dem Proxy komplett verborgen.

Cloudflare Worker erstellen

Bei Cloudflare unter Workers & Pages einfach einen neuen Worker erstellen, ihn irgendwie benennen und deployen. Der Worker kann danach direkt über das Web-Interface konfiguriert werden (Klick auf Edit Code). Dann meinen Worker-Code dort einfügen (darin wird der Proxy im Unterverzeichnis /yt-proxy/ zur Verfügung gestellt).

This Cloudflare Worker proxies and caches requests for privacy-friendly light-yt.js YouTube video embeds.

This Cloudflare Worker proxies and caches requests for privacy-friendly light-yt.js YouTube video embeds. - light-yt-request-proxy.worker.js

Gist262588213843476

Wenn es keine Fehler gibt, auf Deploy klicken und über den Link links oben auf die Worker-Übersichtsseite wechseln. Dort im Tab Settings unter Domains & Routes eine neue Route für den Hostname anlegen, unter dem auch die Ghost-Instanz zu finden ist: z.B. example.com/yt-proxy/* .

Proxy-URLs im Ghost-Site-Header hinterlegen

Nun müssen wir die URL unseres Proxys nur noch dem Skript übergeben, das die Videos datenschutzfreundlich einbindet. Dazu müssen wir diese vier Zeilen in den globalen Site Header einfügen (Ghost Settings -> Code Injection -> Site Header):

<!-- privacy-friendly YouTube embeds -->
<script>
  // load YouTube video data via proxy
  const YT_DATA_URL_PREFIX = "/yt-proxy/data";
  // load YouTube Thumbnails via proxy
  const YT_THUMBNAIL_URL_PREFIX = "/yt-proxy/thumbnail";
</script>

(Wenn der Proxy wie in diesem Beispiel über eine Route in einem Unterverzeichnis zu erreichen ist, können auch relative Pfade verwendet werden.)

Das war’s!