Google-Fonts Datenschutz-freundlich verwenden

Posted on by Dirk Steinkopf

Beim der mühsamen (aber meines Erachtens sinnvollen) Durchforsten meiner Webseite nach Datenschtz-Lecks bin – so wie viele andere auch – auf die Google-Fonts gekommen, die das von mir verwendete WordPress-Theme einbindet. Dadurch lädt der Browser des Benutzers beim Verwenden meiner Seite CSS- und Font-Daten von Google. Damit hinterlässt der Benutzer ungewollt und unbemerkt eine Datenspur bei Google. Da ich aber nicht so ohne weiteres auf den Font verzichten wollte, habe ich eine andere Lösung gesucht und gefunden, die ich inzwischen auch umgesetzt habe:

Da es ja aus Datentschutz-Sicht nicht grundsätzlich verkehrt ist, einen Google-Font zu verwenden, wäre es eine Möglichkeit, die Daten bei mir direkt abzulegen. Dazu müsste ich aber allerlei Verweise manuell anpassen und außerdem die Daten ggf. aktualisieren.

Daher ist nun meine Grundidee die: Mein ohnehin verwendeter Reverse-Proxy dient auch als Reverse-Proxy für die Google-Fonts. Und damit das auch benutzt wird, werden Verweise auf die Google-Font-Seite beim Ausliefern der CSS und HTML-Files entsprechend umgebaut:

Hinweis: In allen Beispielen habe ich vor die jeweilige Domain ein XX- eingefügt, weil sonst genau der hier beschriebene Ersetzungsmechanismus auch bei der Anzeige dieser Beispiele zuschlagen würde.

Quelltext-Umbau

Aus https://XX-fonts.gstatic.com/foobar wird im ausgelieferten Quelltext https://nerdblog.steinkopf.net/fonts.gstatic.com/foobar. Für die Google-Fonts muss man das gleiche noch mit fonts.googleapis.com machen.

In der Apache-Konfig sieht das so aus:

AddOutputFilterByType SUBSTITUTE text/html application/rss+xml text/plain text/xml text/html;charset=utf-8 text/css
AddOutputFilter SUBSTITUTE php
Substitute "s|//XX-fonts.googleapis.com|//nerdblog.steinkopf.net/fonts.googleapis.com|i"
Substitute "s|//XX-fonts.gstatic.com|//nerdblog.steinkopf.net/fonts.gstatic.com|i"

Wichtig sind in diesem Kontext wohl nur die FIlter-Typen text/html und text/css. Ich verwende SUBSTITUTE aber noch für andere Dinge, daher steht bei mir mehr drin.

Proxying der Aufrufe

Aufrufe an https://nerdblog.steinkopf.net/fonts.gstatic.com/foobar werden nun umgekehrt an https://nerdblog.steinkopf.net/fonts.gstatic.com/foobar weitergeleitet.

Apache-Konfig:

    ProxyRequests Off
    SSLProxyEngine on

    <Location /fonts.googleapis.com/>
        ProxyPreserveHost Off
        SetEnvIf Referer "nerdblog\.steinkopf\.net" localreferer
        Require env localreferer
        ProxyPass "https://XX-fonts.googleapis.com/"
    </Location>
    <Location /fonts.gstatic.com/>
        ProxyPreserveHost Off
        SetEnvIf Referer "nerdblog\.steinkopf\.net" localreferer
        Require env localreferer
        ProxyPass "https://XX-fonts.gstatic.com/"
    </Location>

Man beachte ProxyPreserveHost Off. Das ist hier wichtig, damit der vom Browser aufgerufene Hostname nicht so an den aufgerufenen Google-Host weitergeleitet wird. (Dies ist in anderem Kontext aber sehr wohl wichtig – zumindest bei mir.)

Damit nicht nun jeder von irgendwoher Google-Fonts über meine Webseite abrufen kann, sorgen die beiden Zeilen mit SetEnvIf und Require dafür, dass das Ganze nur funktioniert, wenn der Referer meine Webseite ist. (Hier wird die Idee dazu beschrieben und dazu benutzt „Hotlinking“ durch andere Seiten zu verhindern.)

Weitere Möglichkeiten der Nutzung dieser Idee

Neben der Verwendung für die Google-Fonts sind mir noch andere Möglichkeiten eingefallen:

  • s.w.org für die die Anzeige von Smileys.
  • www.gstatic.com
  • Gravatar-Aufrufe (habe ich aber noch nicht ausprobiert).
  • u.v.a.m.

Ich hoffe, dass sich meine Webseite, damit „rundrum“ korrekt verhält. Wenn nicht, bitte ich um freundliches Feedback 🙂

Anhang: Der ganze Config-Ausschnitt

    ProxyRequests Off 
    SSLProxyEngine on

    <Location /fonts.googleapis.com/>
        ProxyPreserveHost Off
        SetEnvIf Referer "nerdblog\.steinkopf\.net" localreferer
        Require env localreferer
        ProxyPass "https://XX-fonts.googleapis.com/"
    </Location>
    <Location /fonts.gstatic.com/>
        ProxyPreserveHost Off
        SetEnvIf Referer "nerdblog\.steinkopf\.net" localreferer
        Require env localreferer
        ProxyPass "https://XX-fonts.gstatic.com/"
    </Location>
    <Location /www.gstatic.com/>
        ProxyPreserveHost Off
        SetEnvIf Referer "nerdblog\.steinkopf\.net" localreferer
        Require env localreferer
        ProxyPass "https://XX-www.gstatic.com/"
    </Location>
    <Location /s.w.org/>
        ProxyPreserveHost Off
        SetEnvIf Referer "nerdblog\.steinkopf\.net" localreferer
        Require env localreferer
        ProxyPass "https://XX-s.w.org/"
    </Location>

    AddOutputFilterByType SUBSTITUTE text/html application/rss+xml text/plain text/xml text/html;charset=utf-8 text/css
    AddOutputFilter SUBSTITUTE php

    Substitute "s|//XX-fonts.googleapis.com|//nerdblog.steinkopf.net/fonts.googleapis.com|i"
    Substitute "s|//XX-fonts.gstatic.com|//nerdblog.steinkopf.net/fonts.gstatic.com|i"
    Substitute "s|//XX-www.gstatic.com|//nerdblog.steinkopf.net/www.gstatic.com|i"
    Substitute "s|//XX-s.w.org|//nerdblog.steinkopf.net/s.w.org|i"
    Substitute "s|././XX-s.w.org|\/\/nerdblog.steinkopf.net\/s.w.org|i"

8 thoughts on “Google-Fonts Datenschutz-freundlich verwenden”

  1. Edit: Ich habe noch die Beschränkung auf den korrekten Referer und den Anhang mit der ganzen Config ergänzt. Außerdem in den Beispielen XX- eingefügt, um zu verhindern, dass schon hier der Ersetzungsmechanismus alles „zerstört“.

    Antworten

  2. Hallo Dirk,

    vielen Dank für deinen Beitrag.

    Ich bin gerade auch auf der Suche nach einer bequemen Möglichkeit die Google-Fonts z.B DSGVO-konform zu nutzen (ohne alle > 900 Fonts einzeln herunterladen zu müssen, um diese selbst zu hosten).

    Hab ann spontan mal nach Google Fonts Proxy gegooglet und bin bei dir gelandet.

    Nun habe ich gerade deine Seite im Firefox-Inspektor geöffnet und unter „Netzwerkanalyse“ > „Schriften“ nachgesehen und dort sehe ich (leider), dass der Font Open-Sans wohl zusätzlich nochmals von Google direkt geholt wird?

    Grüße,
    Patrick

    Antworten

    1. Hallo Patrick,

      danke für den Hinweis. Ich selber habe genau das schon einmal bemerkt und „nachbessern“ müssen. Das ist etwas „tückisch“. Leider kann ich heute das von Dir beschriebene Problem aber nicht nachvollziehen. Auf welcher Seite hast Du das beobachtet? (Ich habe nur ein paar, wenige Stichprobem gemacht und alles kam „brav“ via nerdblog.steinkopf.net…)

      Allerdings setze ich auch nicht mehr die hier beschriebene Methode ein, sondern setze seit einiger Zeit auf Kong+Konga – so wie hier beschrieben. Trotzdem wäre ich Dir dankbar, wenn du mir noch einen Hinweis geben könntest, damit ich den Fehler finden kann.

      Schöne Grüße,
      Dirk

      Antworten

  3. Hallo Dirk,

    herzlichen Dank für das super Tutorial. Leider kann ich bisher nur feststellen, dass der Stylesheet via dem reverse proxy geladen wird. die Fonts selbst aber noch via Google. Hast du ne Ahnung woran das liegen könnte?

    wq.skylayer.de

    ProxyRequests Off
    SSLProxyEngine on

    ProxyPreserveHost Off
    SetEnvIf Referer „wq.skylayer.de“ localreferer
    Require env localreferer
    ProxyPass „https://nerdblog.steinkopf.net/fonts.googleapis.com/“

    ProxyPreserveHost Off
    SetEnvIf Referer „wq.skylayer.de“ localreferer
    Require env localreferer
    ProxyPass „https://nerdblog.steinkopf.net/fonts.gstatic.com/“

    AddOutputFilterByType SUBSTITUTE text/html application/rss+xml text/plain text/xml text/html;charset=utf-8 text/css
    AddOutputFilter SUBSTITUTE php
    Substitute „s|//nerdblog.steinkopf.net/fonts.googleapis.com|//wq.skylayer.de/fonts.googleapis.com|i“
    Substitute „s|//nerdblog.steinkopf.net/fonts.gstatic.com|//wq.skylayer.de/fonts.gstatic.com|i“

    Ich wäre über jede Hilfe dankbar!

    Liebe Grüße,
    Daniel

    Antworten

    1. Hier die tatsächliche Config, verzeihung:

      ProxyRequests Off
      SSLProxyEngine on

      ProxyPreserveHost Off
      SetEnvIf Referer „wq.skylayer.de“ localreferer
      Require env localreferer
      ProxyPass „https://nerdblog.steinkopf.net/fonts.googleapis.com/“

      ProxyPreserveHost Off
      SetEnvIf Referer „wq.skylayer.de“ localreferer
      Require env localreferer
      ProxyPass „https://nerdblog.steinkopf.net/fonts.gstatic.com/“

      ProxyPreserveHost Off
      SetEnvIf Referer „wq.skylayer.de“ localreferer
      Require env localreferer
      ProxyPass „https://nerdblog.steinkopf.net/www.gstatic.com/“

      AddOutputFilterByType SUBSTITUTE text/html application/rss+xml text/plain text/xml text/html;charset=utf-8 text/css
      AddOutputFilter SUBSTITUTE php
      Substitute „s|//nerdblog.steinkopf.net/fonts.googleapis.com|//wq.skylayer.de/fonts.googleapis.com|i“
      Substitute „s|//nerdblog.steinkopf.net/fonts.gstatic.com|//wq.skylayer.de/fonts.gstatic.com|i“
      Substitute „s|//nerdblog.steinkopf.net/www.gstatic.com|//wq.skylayer.de/www.gstatic.com|i“

      Antworten

    2. Freut mich, wenn’s schonmal soweit geholfen hat. Aus dem Kopf weiß ich nur noch, dass das eine große Fummelei war, bis wirklich alles gepasst hat.

      Eine Sache, die mich selber lange gekostet hat, war, dass die Kommunikation zwischen Proxy und Google komprimiert war und die String-Ersetzung auf den komprimierten Daten (halt auf dem Stream) stattfindet und daher nichts ersetzt hat. Das führt dann dazu, dass das CSS zwar korrekt via Proxy läuft, aber alles, was darin referenziert wird, unverändert bleibt und direkt URLs direkt abgerufen werden.

      Da ich inzwischen ja mit kong als reverse proxy arbeite, war die Lösung dann im verwenden Plugin kong-response-string-replace einzubauen: Dort werden nun komprimierte Daten erst ausgepackt.

      Gib mir mal Bescheid, ob das auch Dein Problem war/ist 🙂

      Antworten

  4. Hallo Dirk,

    nun ich bin vermutlich ganz so talentiert wie du was das ganze anbelangt. Ich nutze Plesk, entsprechend gibt’s dort auch immer wieder Ausnahmen und Umwege die man gehen muss.

    Vermutlich hast du recht, ich weiß jetzt nur leider nicht exakt wie ich das Problem umgehen kann. Gibt es denn eine Möglichkeit an den Stream zu kommen?

    Liebe Grüße,
    Daniel

    Antworten

    1. Puh. Da kann ich dir auch nicht helfen, glaube ich. Ich habe bei Problemen immer mit ganz einfachen Webseiten und ganz einfach Ersetzungsmustern experimentiert. Also z.B. Hallo durch huhu ersetzen. Dann siehst du schonmal, ob’s grundsätzlich klappt. Danach schritt weise umbauen und immer schauen, ob’s immer noch klappt.

      Was mir in deiner Konfig auffällt, ist natürlich das nerdblog.... Das musst du natürlich anpassen. Aber das ist dir vermutlich klar.

      Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert