Link

Webtexte schreiben mit Markdown

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!
Wenn Sie selbst einen Blog betreiben, oder regelmäßig eine Seite im Internet mit redaktionellen Texten bestücken kennen Sie das Problem womöglich bereits: Der Schreibfluss mag nicht so recht zusammenkommen, da er durch die Handhabung des WYSIWYG-Editors, oder noch schlimmer durch das Schreiben von reinem HTML-Code gestört wird. In diese Bresche springt das, unter der BSD-Lizenz verfügbare, Tool [Markdown](http://daringfireball.net/projects/markdown/ "Markdown") von John Gruber. Vorteile --- Markdown ist für eine Vielzahl von Anwendungsgebieten verfügbar. So steht zum Beispiel mit [MarkdownPad](http://markdownpad.com/ "MarkdownPad") auch ein Stand-alone Editor für Windows bereit. Auch in PHP und anderen Programmiersprache steht diese Eingabemethode zur Verfügung und sogar für viele Content-Management-Systeme stehen Plugins bereit. So schreibe ich diesen Artikel auch schon in Markdown in meinen Drupal-CMS. Der größte Vorteil stellt aber die einfache und leicht zu lernende Syntax bereit, die im Gegensatz zu HTML auch wirklich intuitiv „erraten werden könnte“. So werden die Absätze automatisch mit den entsprechenden `

`-Tags ausgestattet und beispielsweise H2-Überschriften mit `##Überschrift` erstellt. Dadurch kann der „Quelltext“ des Artikels oder der Seite vom Menschen viel besser gelesen und auch später wieder leichter verstanden werden. Beispiele --- Das Beispiel >The quick brown *fox* jumps over the lazy **dog** kann ganz einfach über folgende Eingabe erstellt werden: The quick brown \*fox\* jumps over the lazy \*\*dog\*\* Mit einem Sternchen vor und nach einem Wort kann es kursiv geschrieben werden und durch zwei Sternchen fett. >In diesem Text gibt es einen [Link](# "Titel"). In diesem Text gibt es einen \[Link](# "Titel") Ein Link in der Markdown-Syntax wird über solch ein Konstrukt eingefügt und gleich (optional) mit einem Titel versehen. >* ein Punkt * noch ein Punkt * ein Punkt * noch ein Punkt Nur durch Sternchen vor jedem Aufzählungspunkt wird eine `

    `-Liste erstellt. >1. Punkt eins 2. Punkt zwei 1. Punkt eins 2. Punkt zwei Fazit --- Ich habe das Tool erst heute kennengelernt, bin aber bereits jetzt begeistert davon. Es wird dadurch wirklich viel komfortabler einen Artikel zu schreiben. Außerdem geht einem das Ausstatten mit dem entsprechenden Markup viel schneller von der Hand. Nach kurzer Einarbeitungszeit mag ich Markdown wirklich nicht mehr missen. Die [vollständige Dokumentation](http://daringfireball.net/projects/markdown/basics "Markdown Basics") finden Sie auf der offiziellen Seite. Den Quelltext dieses Artikels können Sie [hier](http://dl.dropbox.com/u/4696129/homepage_download/artikel.markdown "artikel.markdown") herunterladen. **Update:** Ah, ja: Gefunden hab ich das Thema drüben beim [Schockwellenreiter](http://www.schockwellenreiter.de "Schockwellenreiter")
Entwicklung

Erste Schritte in Processing

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!
Processing stellt eine einfache Entwicklungsumgebung für den Einstieg in die Programmierung dar. Auch für fortgeschrittene Programmieren hält die IDE eine Möglichkeit für die rasche und einfache Umsetzung einer Idee bereit. Übersicht --- Processing verwendet eine vereinfachte Syntax von Java und beeinhaltet eine simple IDE für die Entwicklung in dieser Sprache. Seine Stärken spielt die Sprache vor allem beim Erstellen von grafischen Programmen, also vor allem bei Zeichnungen und (auch interaktiven) Grafiken. ![Processing IDE]({{site.baseurl}}/assets/img/picture_60.png) Das Ergebnis wird als exe-Datei ausgegeben, die auch außerhalb des verwendeten Systems lauffähig ist. Außerdem kann das Programm als Java-Applet exportiert werden. Da die Verwendung von Applets in Zeiten von HTML5 eher zu vermeiden ist, können die Programme auch mit [Processing.js](http://processingjs.org) in JavaScript mit Hilfe des canvas-Elements dargestellt werden. Zusammen mit der IDE werden auch Beispiele für die Processing-Sprache mitgeliefert. Eines davon ist [dieses Beispiel](http://demo.johannes-mittendorfer.com/processing/circles.html) in dem Kreise mit der Maus gezeichnet werden, oder auch [dieser Würfel](http://demo.johannes-mittendorfer.com/processing/cube.html). Download ------- Die komplette IDE kann auf der [offiziellen Website](http://processing.org) heruntergeladen werden und steht dort in Versionen für Windows, Mac OSX und Linux bereit. Wenn man bereits das Java SDK installiert hat, kann man auch die Version „Windows (Without Java)“ verwenden, was natürlich Größe einspart. Nach dem Download, das bei einer DSL-Leitung nur etwa 2 Minuten dauert, und dem Entpacken startet man die IDE ohne Installation durch Ausführen von processing.exe. Aufbau eines Programmes ------- Ein Programm wird in Processing „Sketch“ genannt und besitzt immer die folgende Grundstruktur: {% highlight cpp %} void setup(){ } void draw(){ } {% endhighlight %} Im Abschnitt „setup“ werden die grundlegenden Einstellungen wie die Fenstergröße oder Startwerte von Variablen einmalig angegeben. Dieser Abschnitt wird nur einmal am Anfang des Programmes ausgeführt. Der Teil namens „draw“ wird immer wieder für jeden Frame im Laufe des Programmes aufgerufen. Hier hinein wird auch der Hauptinhalt geschrieben, der das eigentliche Programm ausmacht. Um beispielsweiße eine einfache Linie von einer Ecke in die andere Ecke zeichnen zu lassen, braucht man folgendes: {% highlight cpp %} void setup(){ size(200,200); line(0,0,200,200); } void draw(){ } {% endhighlight %} Mit 'size(200,200)' wird die Größe des Fenster angegeben und mit 'line(0,0,200,200)' die Linie gezeichnet. Die ersten beiden Werte geben die x und y-Position des Startpunktes an und die beiden letzten Zahlen die Korrdinaten des Endpunktes. Interaktivität ------- Um ein Processing-Programm interaktiv zu machen kann man zum Beispiel die Position der Maus abrufen. In den Variablen 'mouseX' und 'mouseY' sind die aktuellen Koordinaten des Mauszeigers enthalten. Um nun die Linie an der Position der Maus starten zu lassen, muss die Position natürlich laufend abgerufen werden. Dazu muss diese Logik in den „draw“-Bereich wandern: {% highlight cpp %} void setup(){ size(200,200); } void draw(){ line(mouseX,mouseY,200,200); } {% endhighlight %} Natürlich gibt es noch viel mehr Beispiele und Verwendungmöglichkeiten, doch die ersten Schritte mit der Programmiersprache und der IDE habe ich mit diesem Artikel hoffentlich leicht verständlich vermittelt.
Security

Spambots mit Sonderzeichen im Captcha täuschen

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!
Sie sind die wohl nervigsten Nebenerscheinungen beim Betrieb einer Homepage bzw. eines Blogs: Spambots. Was sind Spambots? ------- Spambots sind Computerprogramme die mehr oder weniger automatisch Formulare im Internet finden und diese mit vordefinierten Text befüllen. Meist werden in den Nachrichten in den Kommentaren oder bei Kontaktformularen Tabletten und/oder Potenzmittel angeboten. Mit der Zeit kann die Überprüfung von solchen Kommentaren und ihrer Freischaltung eine große Menge Zeit in Anspruch nehmen. Captchas ------- Lange Zeit waren mehr oder weniger komplizierte [Captchas](http://de.wikipedia.org/wiki/CAPTCHA) (**C**ompletely **A**utomated **P**ublic **T**uring test to tell **C**omputers and **H**umans **A**part) das Mittel der Wahl um eine automatische Absendung von Formularen zu verhindern. Mit einem wechselnden Text, der in ein Bild geschrieben wird, wird ausgenutzt, dass die Erkennung von Text beim Menschen weitaus besser funktioniert als bei Computerprogrammen. So kann das Formular nur abgeschickt werden wenn das Bild korrekt erkannt wurde. Das funktioniert(e) ganz gut solange die Spambots noch keine Texterkennung eingebaut haben. Inzwischen können diese einfache Captchas erkennen und die Formulare dann trotzdem abschicken. In Folge dessen werden Captchas immer komplizierter und stellen so langsam auch für den Menschen Probleme bei der Erkennung dar. Ein Beispiel dafür ist der Dienst [reCAPTCHA](http://www.google.com/recaptcha) von Google.  ![Django Captcha]({{site.baseurl}}/assets/img/picture_35.jpeg) Meine Idee ------- Da diese Computerprogramme stets für eine große Anzahl von Websiten verwendet werden und wohl kaum auf einzelne Seiten abzielen habe ich mir gedacht, dass man nur das typische Schema des Captcha-Textes ändern müsste. So probierte ich einfach die Captchas auf meiner Homepage nur mehr aus Umlauten und Sonderzeichen zusammenzusetzen. ![Recaptcha]({{site.baseurl}}/assets/img/picture_36.jpeg) Und siehe da: Seit ich auf dieser Seite diese Art von Captchas verwendet wurde kein einziger neuer Spam-Kommentar abgeschickt und auch das Kontaktformular nicht mehr missbraucht. Laut den Logs erkennen die Spam-Bots im obigen Beispiel nur mehr „ooa”. Fazit ------- Ich weiß, dass auch das kein Wundermittel ist. Man kann sich jedoch schon einmal auf die Eigenarten der deutschen Sprache bzw. der Sonderzeichen verlassen. Auf jeden Fall erhöht sich der Aufwand für Spambots im Gegensatz zur Schwierigkeit der Erkennung für den Menschen sehr viel mehr. Was halten Sie von dieser Lösung? Ist die Erkennung für den Menschen schwieriger als sonst? Würden Sie diese Art auch verwenden?
Security

Das WhatsApp-Registrierungsprotokoll

Dieser Artikel ist älter als zwei Jahre und womöglich veraltet!
Da ich aus den Suchanfragen die auf meiner Homepage landen schließe, dass hier Interesse besteht, möchte ich hiermit nocheinmal kurz den Registrierungsvorgang bei WhatsApp mit den dafür verwendeten REST Urls beschreiben. ![Whatsapp Logo]({{site.baseurl}}/assets/img/picture_75.jpeg) Überprüfen, ob schon registriert ---------- Beim Starten der App und nach der Eingabe der Rufnummer wird zunächst überprüft, ob diese Nummer bereits bei WhatsApp registriert ist. {% highlight text %} https://r.whatsapp.net/v1/exist.php?cc=43&in=664XXXXXXX&udid=d59d27f4d300d595.. {% endhighlight %} Bestätigungs-SMS verschicken ---------- Um die Rufnummer zu bestätigen wird im nächsten Schritt eine SMS an die angegebene Nummer verschickt. {% highlight text %} https://r.whatsapp.net/v1/code.php?method=sms&to=43664XXXXXXX&in=664XXXXXXX&cc=43&lg=de c=AT&mcc=000&mnc=000 {% endhighlight %} Registrierung ------- Zur entgültigen Registrierung wird nun folgende Anfrage mit dem Bestätigungscode aus der SMS abgeschickt: {% highlight text %} https://r.whatsapp.net/v1/register.php?cc=43&in=664XXXXXXX&udid=d59d27f4d300d595...&code=774 {% endhighlight %} Nach diesem Vorgang ist die Registrierung für ein WhatsApp-Konto abgeschlossen und der Benutzer kann von anderen Anwendern der App gefunden werden. Wie dieser und andere Vorgänge bei der Verwendung der App funktionieren, beschreibe ich im Folgenden: Kontake hochladen ------- Um diese Kontakte zu finden werden die Telefonnummern der Kontakte auf einen WhatsApp-Server übertragen. Den Vorgang habe ich außerdem schon [hier](http://johannes-mittendorfer.com/artikel/2011/12/whatsapp-erlaubt-bruteforce-auf-telefonnummern) beschrieben und [hier](http://futurezone.at/produkte/7319-schwere-sicherheitsluecken-in-messenger-apps.php) gibt es einen Artikel darüber. {% highlight text %} https://sro.whatsapp.net/client/iphone/iq.php?cd=1&c=43&u[]=0664XXXXXXX&u[]=0699XXXXXXX {% endhighlight %} ![Whatsapp App]({{site.baseurl}}/assets/img/picture_76.png) Status ändern ------- Seinen aktuellen Status kann man über folgende Abfrage ändern. Aber nicht nur seinen eigenen Status. {% highlight text %} POST https://s.whatsapp.net/client/iphone/u.php cc=43&me=+43664XXXXXXX&s=Hey%20there!%20I%20am%20using%20WhatsApp {% endhighlight %} Bild-Upload ---------- Um Bilder an seine Kontake zu verschicken werden diese durch folgende Abfrage hochgeladen. Wie der Name "89b49902234aa5afc2bdff95bfa0c3fd.jpg" zustande kommt ist mir noch nicht ganz klar. {% highlight text %} POST http://mms.whatsapp.net/client/iphone/upload.php ------WebKitFormBoundaryCPJPtl1Gsxx5Dr12 Content-Disposition: attachment; name="file" filename="89b49902234aa5afc2bdff95bfa0c3fd.jpg" Content-Type: image/jpeg {% endhighlight %} Bilder-Download ---------- Das hochgeladene Bild kann nun über diese Adresse wieder erreicht werden: {% highlight text %} https://mms401.whatsapp.net/d4/31/06/3/7/37b1703abfdc2a9c6e1f005e3134c271.jpg {% endhighlight %} Die Bilder werden jedoch [augenscheinlich](https://mms401.whatsapp.net/d4/31/06/3/7/37b1703abfdc2a9c6e1f005e3134c271.jpg) nach einiger Zeit wieder gelöscht. Hinweis ------- Ich rufe hiermit ausdrücklich **nicht** zu einem Missbrauch des Dienstes aus und verfolge mit diesem Artikel nur über die Sicherheit der übertragung persönlicher Daten zu informieren. Update (10. Februar 2012) ---------- Angeblich wurden mehrere Sicherheitslücken von WhatsApp inzwischen gestopft.