blog.marekventur.de

<update>
Inzwischen habe ich eine Antwort der DH bekommen, dass das Thema im nächsten IT-Ausschuss (was und wann auch immer das ist) besprochen wird. Auch wurde mir getwittert, dass die Noten für die Zeugnisse in einer sicheren Datenbank liegen, also Änderungen keine Zeugnisse verfälscht haben.
</update>

In unserem aktuellen Semester an der DHBW Mannheim war die Vorlesung “IT-Security” mit einem entsprechenden Projekt gekoppelt. Unsere Gruppe entschied sich, die eGroupware der DHBW Mannheim (über die die Noten und Mails der Semester 2008 und älter verwaltet wurden) einem Sicherheitscheck zu unterziehen.

Da wir verständlicherweise nicht direkt am DH-System testen durften, haben wir uns aus dem SVN der Entwickler die verwendete Version ausgecheckt und diese auf einem Testserver installiert. Dass wir irgendwas finden würden, war schnell klar: Die verwendete Version war 6 Jahre alt und wurde nie aktualisiert.

Wir vermuteten, ein paar SQL-Injections und ein paar XSS-Lücken zu finden. Unsere Erwartungen wurde jedoch übertroffen: Durch einfaches Str+F in dem Commit-Log der Entwickler konnte wir einen Fix finden, der mit “Critical” und “Security” getaggt war. Wenig später war klar, dass es sich um einen Exploit in der Library “XMLRPC for PHP” handelte, der bereits 2005 gefixt wurde und es Angreifern erlaubte, beliebigen PHP-Code via eval() auszuführen.

Höflich, wie wir sind, haben wir das Rechenzentrum der DH in einer E-Mail darauf hingewiesen. Die erste Mail wurde ignoriert, die zweite (zwei Wochen später) relativ schnell beantwortet: Ein Admin teilte mir mit, dass die betroffene Datei entfernt wurde und somit das akute Sicherheitsloch geschlossen sei. Es sei also wieder alles in Ordnung.

WTF? Welcher verantwortungslose Admin lässt ein 5 Jahre lang sperrangelweit offenes System einfach so weiterlaufen? Das System ist doch zu 95% bereits kompromittiert. Wir sind doch nicht die ersten Studenten der DH, die Commit-Logs durchsuchen können!

Ich werfe zur weiteren Erheiterung mal ein paar Fakten in den Raum:

• Es wurden 5 Jahre lang keine Updates eingespielt, nicht mal ein “CRITICAL security update” wie das betreffende 1.0.0.009-2.
• Die eGroupware verwaltete E-Mails von tausenden Studenten und somit personenbezogene Daten nach §3 BdsG. Das alleine ist ausreichend für den Gesetzgeber besondere Sorgfalt bei der Sicherheit zu verlangen. Ich bin kein Jurist, aber ich lese das Ganze so: Laut §42 (a) müssen die Betroffenen (also hier die Studenten) informiert werden. Laut §43 drohen bei Versäumnis Bußgelder bis 300.000 €.
• Die Noten aller Studenten <= 2008 wurden über dieses System ausgelesen. Es konnte also irgendeine PHP-Routine die Noten anfordern und somit konnte es auch ein Angreifer.
• Ob man damit Noten verändern konnte und — wenn ja — ob diese dann Grundlage für das Zeugnis waren, lässt sich nicht sagen (Siehe Update). Bei all der Schlamperei würde es mich aber nicht wundern.
• Die Passwörter der eGroupware-Benutzer werden auch für andere System der DHBW (wie Moodle, das WLAN und das neuere E-Mail-System) verwendet. Um an diese Passwörter zu kommen, reicht es, einen simplen Form-Logger in den Login-Prozess einzubauen oder (wenn der Angreifer das nötige Know-How hatte) diese mit Rainbow-Tables und dem einfach auszulesenden Security-Salt via Amazon ECS für ca. 1$/Passwort errechnen zu lassen. (Siehe dazu c’t 2/2011, Seite 151)
• In den meisten E-Mail-Postfächern werden wohl noch die Zugangsdaten für MSDNAA gelegen haben. Microsoft würde sich freuen, wen sie erführen, dass Angreifer dadurch Zugriff auf tausende von Lizenzkeys hatten.

Fazit: Es wurde ordentlich bei der IT-Sicherheit geschlampt und in Folge dessen war es 5 Jahre lang möglich, Mails von DHBW-Studenten zu lesen, fremde Noten abzufragen, eventuell Noten zu verändern, Lizenzen für Microsoft-Produkte anzufordern und das Benutzerpasswort der Studenten auszulesen. Nebenbei könnte die ganze Situation für die DH sogar rechtliche Folgen nach sich ziehen.

Inzwischen ist der eGroupware-Server abgeschaltet. Betreffend meiner zweiten, etwas direkteren Mail warte ich immer noch auf Antwort. Es bleibt also nur folgende Frage zu klären: Wie um alles in der Welt kann ein Haufen Admins in Hörweite zu IT-Security Vorlesungen es 5 Jahre lang versäumen, eine kritische Webanwendung mit Updates zu versorgen? Habt ihr euer Fachwissen im Lotto gewonnen?

Ein netter Effekt, den ich auf html5boilerplate.com gefunden habe:

Der Effekt funktioniert (natürlich) nicht im Internet Explorer, aber wen stört das schon?

Hier der CSS-Code:

font-family: MolotRegular, Arial, sans-serif; /* Am besten eignet sich eine kantige Schriftart */
text-shadow: black 1px 1px 0px, #476871 2px 2px 0px, #476871 3px 3px 0px, #476871 4px 4px 0px, #476871 5px 5px 0px, #476871 6px 6px 0px, #476871 7px 7px 0px; /* Netter Trick, nicht? */
text-transform: uppercase; /* Verschandle nicht dein HTML mit Großbuchstaben */

Die Schrift ist übrigens auf FontSquirrel zu finden, aber passt bei dieser Lizenz bitte höllisch auf!

wie Ihnen inzwischen vielleicht schon aufgefallen ist, sehen viele meiner Webseiten in ihrem Browser nicht besonders schön aus, funktionieren nicht oder beschweren sich über ominöse Script-Fehler. Ich möchte Ihnen hiermit den Grund mitteilen, woher diese Probleme kommen:

Ihr Browser gehört zu den ältesten noch anzutreffenden Versionen und stammt aus dem Jahr 2001. Die aktuelle Ausgabe trägt die Versionsnummer 8 und der Hersteller Microsoft ist kurz davor die Version 9 fertigzustellen. Aus diesem Grund werden viele Techniken und Standarts, auf die das heutige Internet aufbaut von diesem alten Browser nicht unterstützt. Schlimmer noch: Der Internet Explorer 6 ist in der Vergangenheit eines der offensten Einfallstore für Viren und Trojaner gewesen, zeitweise wurde sogar von Regierungsebene davor gewarnt ihn einzusetzten.

Leider ist die diese alte Version auch heute noch der Standardbrowser vieler Benutzer, den er ist Teil des Windows XP Betriebssystems – Viele innovative Entwickungen wurden in den letzten Jahren durch die noch zu große Verbreitung der 6er Version erschwert. Viele Webentwickler und Firmen, unter anderem YouTube und einige Google Dienst, sind inzwischen dazu übergegangen, den Internet Explorer 6 nicht mehr zu unterstüzzene. Auch ich habe mich entschlossen, in der 6er Version nicht mehr zu testen, den viele Fehler sind meistens schwer zu lokalisieren und erfordern einen enormen Zeitaufwand sie zu beheben.

Ich bitte Sie daher, sich kurz die Zeit zu nehmen (wir sprechen hier von nur zirka 5 Minuten) um Ihren Browser zu updaten. Wollen sie bei einer Microsoft-Entwicklung bleiben, können sie hier den Internet Explorer 8 downloaden. Vielleicht kann ich Sie aber auch davon überzeugen, sich eine der (in vielerlei Hinsicht dem Microsoft Produkt überlegenen) Alternativen Mozilla Firefox oder Google Chrome anzuschauen – Sie werden bald feststellen, dass das Surfen im Internet auf einmal viel schneller, prakischer und angenehmer sein kann. Alle drei Browser sind kostenfrei verfügbar und sorgen beim Installieren dafür, dass ihre Lesezeichen automatisch übernommen werden.

Sollten Sie Fragen oder Bedenken haben, können Sie sich jederzeit gerne an mich wenden. Ich helfe ihnen auch gerne bei jedglichen Problem, die durch den Umstieg entstehen sollten. Meine E-Mail-Adresse ist: mail@marekventur.de

Mit freundlichen Grüßen,
Marek Ventur

Wie ich vor kurzem schrieb habe ich die Startseite meiner Haus-und-Hof-Domain von “http://de.marekventur.de” (es gab auch einen englischen Pedant dazu) auf “http://marekventur.de” umgestellt. Das erschien mir sinnvoll, da ich so nicht mehr 2 Seiten pflegen musste und die Zahl derer, die mit den paar englischen Wörtern nicht klar kommen doch wohl ziemlich gegen null geht.

Leider hatte ich diese Rechnung ohne Google gemacht: Bisher war bei der Suche nach meinem Namen (und das war auch so irgendwie das Ziel) nicht Facebook oder Twitter ganz oben, sondern “http://de.marekventur.de” – Ich muss ja nicht jedem potenziellen Arbeitgeber die Suche nach vorzeigbaren Infos schwerer machen als nötig. Blöd nur, dass die Crawler sich renitent weigern, die neue Domain zu indizieren, und dass obwohl ich die Regeln (301-Weiterleitung, Sitemap einreichen, Backlinks setzten, …) befolgt habe.

Technisch problematische erscheint mir dieser Umzug eigentlich in keinster Weise, jedoch scheint sich Google (und Bing ist übrigens kaum besser…) nicht bequemen zu wollen, mal kurz vorbeizukommen und ihren Index anzupassen. Grml!

An dieser Stelle möchte ich daher einen dicken Dank an Kevin Niehage alias Weizenspreu richten, der mir jetzt mit 2 dicken Backlinks (u.A. von seinem Blog WeizenSpr.eu) kräftige Schützenhilfe gibt.

Aus diesem Grund ein Rat an Alle, die mit dem Gedanken spielen auch irgendwann mal einen Domainumzug durchzuführen: Überlegt es euch zweimal; Suchmaschinen können manchmal sehr dickköpfig sein.

Bei der Suche nach frei verwendbaren Schriftarten verhält es sich ähnlich kompliziert wie bei Icons: Viele kann man zwar downloaden, darf sie dann aber nur unter einigen Bedingungen und oft nicht kommerziell einsetzten. Ich habe mir daher mal die Mühe gemacht und meine Linksammlung an guten Fontquellen zusammengefasst:

Google Font Directory
Hauptsächlich für die @font-face-Verwendung gedacht hostet Google seit kurzem eine immer größer werdende Menge an freien Schriftarten. Man kann nach dem Umfang der Glyphen filtern, die Schriften direkt im Browser testen oder direkt das passende Stylesheet für ein Webprojekt verlinken. Ein ZIP mit den (in der ersten Phase freigegebenen, also nicht mehr ganz aktuellen) Schriften als TTF findet ihr hier.

Font Squirrel
Momentan finden sich dort 622 freie Schriften. Zu jedem findet man die jeweilige Lizenz, es wird aber angegeben, dass alle “frei für kommerzielle Nutzung” sind. Sich trotzdem davon vor der Verwendung noch einmal selbst zu überzeugen kann natürlich nicht schaden. Wollt ihr die gefunden Schrift dann online einsetzten empfiehlt sich der geniale FontFace-Generator.

The league of moveable type
Hier finden sich nicht annähernd so viele Schriften wie bei den beiden vorhergehenden Seiten, dafür sind sie aber alle von bester Qualität – allein die Vorschaubilder machen Lust auf ein paar kreative Experimente.

Es gibt nichts schlimmeres als nervige Gif-Animationen. Es sei, ich setzte sie ein.

Daher habe ich mir überlegt, statt einem langweiligen Favicon mal was bewegtes zu verwenden. Leider musste ich mir sagen lassen, dass nur Opera und Firefox diese unterstützen. Google und Apple meinen es wohl gut mit unserem Sehnerv und akzeptieren nur unbewegte Bilder.

So dachte ich auf jeden Fall, bis ich auf “Defender of the Favicon” stieß. Dort hat jemand wirklich Defender in einem Favicon spielbar gemacht – was sowohl in Chrome und Opera funktioniert.

Die Idee ist eigentlich relativ einfach: Man nehme ein 16x16px Canvas, male beliebigen Inhalt darauf, lese das PNG als Data-URL aus und weise es dem passenden <link>-tag zu.

Auf HTML-Seite sieht das ganze so aus:

<head>
...
<link rel="shortcut icon" href="favicon.png" id="favicon" type="image/png" />
...
</head>
<body>
...
<canvas id="favicon_canvas" width="16" height="16" style="display: none;"></canvas>
</body>

Das Javascript sieht folgendermaßen aus:

var ctx = document.getElementById('favicon_canvas').getContext('2d'); 
var icon = document.getElementById('favicon');
 
 
function setFavicon() {
	ctx.fillStyle = 'blue';  
	ctx.fillRect (0, 0, 16, 16);
	// Die Ecken "abrunden"
	ctx.clearRect(0,0,1,1); 
	ctx.clearRect(15,0,1,1);
	ctx.clearRect(0,15,1,1);
	ctx.clearRect(15,15,1,1);
	icon = document.getElementById('favicon');
	(newIcon = icon.cloneNode(true)).setAttribute('href',ctx.canvas.toDataURL());
	icon.parentNode.replaceChild(newIcon,icon);
}

Und schon hat man ein blaues Favicon mit leicht abgerundeten Ecken. Packt man das ganze jetzt noch in ein setInterval() hat man ein ähnlichen Effekt wie bei dem animierten GIF im Firefox.

Auf marekventur.de habe ich jetzt alle drei Favicon-Arten kombiniert: Der IE sieht nur ein statisches Bild, Firefox spielt ein animiertes GIF und Opera und Chrome zeigen eine Welle, die wie der Schriftzug die Farbe und den “Wasserstand” wechselt. Safari macht leider gar nichts. C’est la vie.

This tutorial is on how to archieve a color changing liquid effect (like this one) with jQuery. It’s actually quite easy to implement, altough there is a small trap. It’s made with plain CSS2 and will run in every modern browser (note: I don’t consider IE6 as a “modern browser”).

The trick is to use three layers: The first is the symbol or the text, with the essential parts left transparent, the second is a gray layer with a transparent wave at the bottom an the last is a solid CSS-background-color. With some jQuery-magic to animate the second layer you can create an effect of wavy liquid.
read more »

Nachdem meine erste Version für marekventur.de ziemlich überladen war (und irgendwann durch ein falschen “rm -R” ins Daten-Nirvana ging) war bis letzte Woche noch eine schnell erstellte 30-Minuten Seite online. Nun hab ich mir mal die Zeit genommen, ein bisschen zu basteln und habe eine neue Version online gestellt.

Über das technische werde ich später noch ein wenig bloggen, bis dahin muss es reichen in den Raum zu werfen, dass die Seite auf CSS2 und jQuery basiert und im IE6 richtig schön gegen die Wand fährt…

Btw: Es gibt jetzt auch kein de.marekventur.de bzw. en.marekventur.de, sondern die Second-Level-Domain ist jetzt standartmäßig englisch – die Zahl derer, die die Halbsätze auf so einer Seite nicht verstehen geht wohl so ziemlich gegen null.

Wer -wie ich- einen leichten(?) Faible für Schriften hat, der kommt beim Webdesign nicht mehr um @font-face herum. Google macht seit einigen Monaten die Sache mit Font Directory noch ein wenig leichter und besser indem es eine immer größer werdende Auswahl an freien Schriftarten auf ihren Servern hostet. Das hat (wie auch bei JS-Libraries via Google CDN) nicht nur den Vorteil, dass die Schriften immer aktuell sind und sie rasend schnell ausgeliefert werden, sondern auch dass die HTTP-Request auf eine fremde Domain verweisen und so von einigen älteren Browsern schneller dargestellt werden, da diese sich oft noch an die antiquierte Grenze von 2 parallelen Request pro Domain halten. Auch der Vorteil durch Caching sollte bei einem Anbieter wie Google nicht vergessen werden, den wer schon einmal auf einer Seite war, die Google Font Directory einsetzt, dessen Browser wird bei der nächsten Begegnung mit der Schriftart nur noch im Cache kramen.

Vor zwei Tagen fiel mir auf, dass Google das Directory weiter ausgebaut hat (es gibt jetzt wieder ein paar Schriften mehr und internationale Glyphen werden unterstützt) und dabei einen neuen Google-Dienst einsetzt der sich Moderator nennt. Moderator ist ein kostenloser, bisher werbefreier Dienst der ursprünglich nur intern verfügbar war, nun über App-Engine gehostet wird und es beliebigen Nutzern (mit und ohne Google Account) erlaubt, Vorschläge zu einem Thema abzugeben und über die Ideen anderer abzustimmen. Das ganze ist schön schlank gehalten, begrenzt Vorschläge auf 160 Zeichen länge (wohl damit die ganze Sache übersichtlich bleibt) und ist Google-typisch technisch auf einem hohen Niveau. Enstanden ist es übrigens während der 20% Arbeitszeit, die Google-Mitarbeiter für eigene Projekte aufwenden dürfen.

Während die bei Font Directory verlinkte Variante inzwischen einfrig genutzt wird um neue Schriften vorzuschlagen kann der Service “Moderator” an sich für beliebige Seiten verwendet werden. Der Dienst erlaubt es jedem einen eigene “Serie” zu erstellen und diese für eigene Projekte zu nutzten. Ambitioniert z.B. ist “Ask a world leader”, unter anderem mit Fragen an Angela Merkel.

PS: Als “Test” könnt ihr gerne meinen Vorschlag ein wenig hochvoten

“Animation easing” makes animating with jQuery much nicer. Instead of just changing an attribute linearly from x to y you can use build-in easing-functions to make make your animation acelerate, bounce and much more – they often look more convincing this way (at least I think so).

To get a glance at the graphs of the functions you can have a look here. You can find everything on how to use them in the jQuery manual.