Google ReCaptcha (v2) dynamisch per Javascript nachladen

Beim Einsatz von Google ReCaptcha werden im Hintergrund auch Google Fonts verwendet. Angesichts der jüngsten Abmahnwellen wegen der Nutzung von Google Fonts besteht hier ein potentielles Risiko. Dieses Problem lässt sich jedoch durch eine Kombination aus Cookie-Management und einer angepassten Datenschutzerklärung lösen.

Voraussetzung, um ReCaptcha dynamisch einzubinden, ist ein Cookie-Management mit einer DSGVO-konformen Datenschutzerklärung. In unserer Lösung setzen wir auf dieses Cookie-Management und laden ReCaptcha nur, wenn die Cookies entweder akzeptiert worden sind oder bereits akzeptiert wurden.

Schritt 1

Wie in der Dokumentation von Google brauchen wir einen Container, in dem wir das Ergebnis der Prüfung speichern.

<form action="?" method="POST">
      <div id="captcha" class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
</form>

Wir haben dem Container eine ID hinzugefügt, um beim Laden zu prüfen, ob dieser Container vorhanden ist und ob wir Google ReCaptcha auf der aktuellen Seite nutzen.

Schritt 2

Eine Javascript-Funktion, die das Skript zur Überprüfung des Nutzers dynamisch lädt. Beachten Sie, dass für diesen Schritt jQuery erforderlich ist:

function loadRecaptcha() {
	// Überprüfen, ob ein Container mit der ID "captcha" existiert. Wenn nicht, nichts tun.
	if (
		document.getElementById("captcha") == undefined ||
		document.getElementById("captcha") == null
	) {
		return;
	}

	// Google ReCaptcha Skript laden
	$.getScript("https://www.google.com/recaptcha/api.js")
           .done(function(script, textStatus) {
		console.log("Recaptcha loaded");
	    }); 
}

Schritt 3

Passen Sie die Stellen im Code an, an denen die Zustimmung zu den Cookies geprüft oder diese akzeptiert werden.

Beispiel für das Setzen des Cookies:

function setCookie(...) {
	/*
	Your Code
	*/
	loadRecaptcha();
}

Beispiel Abfrage des Cookies:

...

if (getCookie('cookieName')) {
	loadRecaptcha();
}

...

Schritt 4

In der Datenschutzerklärung sollten Sie explizit auf die Nutzung von Google Fonts hinweisen.

Sollten Sie noch Fragen haben oder eine Beratung wünschen, können Sie gerne mit uns Kontakt aufnehmen oder unsere Webseite besuchen.

Gerne können Sie hier auch andere Artikel zum Thema Webentwicklung anschauen.