Mehr Kontrolle bei externen Plugins
Ich habe mich nun in letzter Zeit ein bisschen mit dem Schutz vor externen Plugins beschäftigt. Damit meine ich solche Plugins wie reCaptcha, bzw Like, +1 usw. Buttons. Die Lösung, welche Heise[1] vorgestellt hat, finde ich eigentlich sehr gut. Denn Bevor der Nutzer nicht einwilligt, werden keine Daten an den Dienst dahinter gesendet. Vorbildlich!
Nun hatte ich ein kleineres Web-Projekt. Dies umfasste auch ein kleines Kontaktformular. Da ich dies vor Spam-Angriffen mittels eines Captcha-Dienstes schützen wollte entschied ich mich relativ schnell für Googles reCaptcha. Nach einiger Zeit und einem besonderen Anlass habe ich mich dann über die Weitergabe der IP-Adresse belesen. Problem dabei ist es das es sich um einen Graubereich handelt. Es gibt Gerichtsurteile[2] dazu. Jedoch sind das nur kleinere Gerichte. Also, gehe ich lieber auf Nummer sicher und habe da ein kleines Script geschrieben.
So, nun aber erst einmal zu den Vorüberlegungen. Also, zum einen muss ich das JavaScript für Google dynamisch nachladen. Dies darf aber erst geschehen, wenn der Benutzer eingewilligt hat. Hat er das nicht, darf keine Verbindung zu dem externen Plugin (reCaptcha) aufgebaut werden. Da nicht jeder Benutzer JavaScript im Browser aktiviert hat, sollte es aber trotzdem auch für diese funktionieren. Die Aufklärung der Benutzer muss also vor(!) Gebrauch des Plugins zugestimmt haben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Disclaimer</title>
</head>
<body>
<h1>Besondere Datenschutzbestimmungen</h1>
<object data="./disclaimer.html" type="text/html" width="100%" height="350px" style="margin-top: 5px; border: #C8C8C8 solid 1px; border-right: #FFFFFF none 1px;">
<p>Ihr Browser kann die besonderen Datenschutzbedingungen leider nicht anzeigen.</p>
<p>Bitte öffnen Sie dieses Dokument: <a href="./disclaimer.html">Besondere Datenschutzbestimmungen</a></p>
</object>
<p style="text-align: center"><a href="./index.html">nicht akzeptieren</a> <a href="./form.html">akzeptieren</a></p>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$( document ).ready( function() {
window.location.href = "./form.html";
} );
/* ]]> */
</script>
</body>
</html>
Via der disclaimer.html wird dann der Text der Datenschutzbedingungen angezeigt (Welche Daten werden übermittelt und welche Bedingungen gelten). Weiterhin habe ich eine kleine JS-Weiterleitung eingerichtet. Ist also JS aktiviert, wird gleich weiter geleitet und der User muss auf der nächsten Seite die Datenweitergabe bestätigen. Das können wir uns nun anschauen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Formular</title>
<link rel="stylesheet" type="text/css" href="./colorbox.css">
</head>
<body>
<form enctype="multipart/form-data" action="http://tools.seplog.org/src/modules/MailForm.php" method="post">
<table style="width: 500px; margin-left: -10px">
<tr id="check" style="display: none">
<td> </td>
<td>
<div style="float: left; padding-right: 5px; vertical-align: top;"><input type="checkbox" name="accept" style="padding: 2px;" tabindex="6"></div>
<div id="cbcaptcha"><a class="inline" href="#inline_content">Datenschutzbestimmungen</a> akzeptieren.<span style="font-size: 8pt; vertical-align: bottom"><a href="#note" style="text-decoration: none">*</a></span></div>
<div style="clear: left;"></div>
</td>
</tr>
<tr id="trCaptcha">
<td></td>
<td>
<div style="margin: 0px -6px" id="captcha">
<noscript>
<p><object data="https://www.google.com/recaptcha/api/noscript?k=6LcyfMgSAAAAAM_bDsCdDD2si3Q9oq5KCtSxShFz" type="text/html" height="300px" width="320px"></object></p>
<p><textarea name="recaptcha_challenge_field" style="width: 295px; height: 100px" rows="5" cols="46" tabindex="14"></textarea></p>
<p><input type="hidden" name="recaptcha_response_field" value="manual_challenge"></p>
</noscript>
</div>
</td>
</tr>
<tr>
<td></td>
<td><input class="button" type="submit" name="submit" value="Absenden" tabindex="15"><input class="button" type="reset" name="reset" value="Zurücksetzen" tabindex="16" style="margin-left: 5px"></td>
</tr>
</table>
</form>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<h1>Besondere Datenschutzbestimmungen</h1>
<object data="./disclaimer.html" type="text/html" width="100%" height="300px" style="margin-top: 5px; border: #C8C8C8 solid 1px; border-right: #FFFFFF none 1px;">
<p>Ihr Browser kann die besonderen Datenschutzbedingungen leider nicht anzeigen.</p>
<p>Bitte öffnen Sie dieses Dokument: <a href="./disclaimer.html">Besondere Datenschutzbestimmungen</a></p>
</object>
<p style="text-align: center"><a href="./index.html">nicht akzeptieren</a> <a id="acceptLabel" href="#">akzeptieren</a></p>
</div>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
</body>
</html>
Wie wir hier sehen ist die checkbox normalerweise nicht sichtbar. Diese wird erst durch das JavaScript angezeigt. Denn wenn ein User JS nicht aktiviert hat, hatte er den Datenschutzbestimmungen ja schon zugestimmt. Ebenso ist nur der noscript-Block vom reCaptcha enthalten. Dies wird also auch nur ausgeführt wenn JS nicht aktiv ist. Der Rest geschieht nacher in der Script.js Datei. Dort wird das reCaptcha Plugin dynamisch nachgeladen, sobald der Haken für die Datenschutzbestimmungen aktiviert wird.
Das ganze JavaScript schaut dann so aus:
var loadReCaptcha = false;
function activateRecaptcha( show ) {
if( loadReCaptcha === false && show === true ) {
$( '#captcha' ).append( "Plugin reCaptcha wird geladen..." );
$.getScript( "https://www.google.com/recaptcha/api/js/recaptcha_ajax.js", function() {
Recaptcha.create( "public_key", "captcha", {
theme: "white",
lang: "de",
callback: Recaptcha.focus_response_field
} );
} );
loadReCaptcha = true;
}
if( show ) {
$( '#trCaptcha' ).show();
}
else {
$( '#trCaptcha' ).hide();
}
}
$( document ).ready( function() {
$( '#check' ).show();
$( '#trCaptcha' ).hide();
if( $( 'input[name=\'accept\']' ).is( ':checked' ) === true
&& $( '#trCaptcha' ).is( ':visible' ) === false ) {
activateRecaptcha( true );
}
$( 'form' ).submit( function() {
if( $( 'input[name=\'accept\']' ).is( ':checked' ) === false ) {
alert( "Sie müssen die Datenschutzbestimmungen akzeptieren!" );
return false;
}
} );
$( 'input[name=\'accept\']' ).change( function() {
activateRecaptcha( $( 'input[name=\'accept\']' ).is( ':checked' ) === true );
} );
$( '.inline' ).colorbox( { inline: true, width: "650px", height: "500px" } );
$( '#acceptLabel' ).click( function() {
$( '.inline' ).colorbox.close();
if( $( 'input[name=\'accept\']' ).is( ':checked' ) === false ) {
$( 'input[name=\'accept\']' ).attr( 'checked', true );
activateRecaptcha( true );
}
} );
} );
So bin ich nun erst einmal aus dem Schneider. Die Weiterreichung der IP-Adressen, Referer und eines Zeitstempels geschieht erst nach der Einwilligung des Benutzers. Für alle Benutzer welche den Dienst nicht in Anspruch nehmen entsteht somit auch kein Nachteil. Ein kleineres Problem gibt es nur noch zur Zeit. Ich rufe das reCaptcha-JavaScript per https auf. Jedoch werden die anderen JS-Dateien welche das Plugin nachlädt ganz normal via http übertragen. Ist eigentlich nicht so schön. Aber erst einmal funktioniert alles so.
Insgesamt bin ich eigentlich nur darauf gekommen, weil ich meine Seite für Suchmaschinen optimieren wollte und bin dabei einige viele Erkenntnisse zu gewinnen. Das Theme, welches ich verwende sollte XHTML 1.1 konform sein. War es aber nicht. Zum einen liegt dies an einigen Artikeln von mir. Wovon ich ja nun nicht allzu viele habe! ^^ Jedoch auch zum Teil an Wordpress. Bestes Beispiel ist das Einbinden von externen Links im Blogroll. So werden diese jeweils wie folgt dargestellt.