Filtern und Bereinigen von HTML mit jsoup

Immer wieder stößt man auf den Anwendungsfall, dass Benutzereingaben, die HTML enthalten dürfen, bereinigt werden müssen. Besonders hinsichtlich dem Schutz vor XSS Angriffen führt kein Weg an einem solchen Schritt vorbei. In PHP gibt es hierfür mehrere Bibliotheken wie HTML Purifier Bibliothek oder htmLawed.

Besteht die Anforderung, dass bestimmte HTML Eingaben erlaubt sein sollen, so ist der Einsatz einer Bibliothek an dieser Stelle unbedingt notwendig. Es gibt zahlreiche Angriffsmöglichkeiten, mit der ein Filter zurecht kommen muss und so kann man nur davon abraten selbst etwas zu bauen (z.b. Textersetzung mittels Regulären Ausdrücken).

Für Java habe ich eine sehr einfache und gute Bibliothek gefunden, die ich an dieser Stelle nur weiterempfehlen kann. jsoup heißt die schlanke Library, die unter der MIT Lizenz zur Verfügung steht und auch für die Manipulation von HTML Dokumenten zahlreiche Funktionen mit bringt. Zudem wird HTML5 und auch invalides HTML unterstützt.

Die Funktionsweise ist schnell erklärt. Will man jegliches HTML entfernen, so geschieht das mit folgenden Aufruf

String userText = "Beispieltext <script>alert('xyz');
        </script> Beispieltext";
String cleanText = Jsoup.clean(userText, Whitelist.none());
// cleanText == "Beispieltext  Beispieltext"

Wie man sieht, dient ein Whitelist Objekt zur Definition, was erlaubt ist und was nicht. So kann man genau festlegen, welche Tags und welche Attribute zugelassen werden und welche nicht. Folgendes Beispiel erlaubt nur <i> und <b> Tags:

String userText = "<a href='beispiel.de'>xyz</a>
          Bla <i>Blub</i> Bl<b>ub</b>";
String[] allowedTags = {"i","b"};
Whitelist whitelist = new Whitelist();
whitelist.addTags(allowedTags);
String cleanText = Jsoup.clean(userText, whitelist);
// cleanText == "xyz Bla <i>Blub</i> Bl<b>ub</b>"

Die Dokumentation und das JAR File sind auf der Webseite von jsoup zu finden:
jsoup Website

Hintergründe zu selfoss

In einem Gastbeitrag bei phphatesme schreibe ich über selfoss. Dort stelle ich auch die verschiedenen Bibliotheken vor, die ich für den RSS Reader verwende. Also für Interessierte: schaut einfach rein.

Herzlichen Dank an Nils, dass er mir die Möglichkeit gegeben hat, selfoss in seinem Blog vorzustellen.

selfoss 1.0 final

So, endlich ist es vollbracht. selfoss 1.0 ist verfügbar. Dazu gibt es jetzt auch eine eigene Webseite, wo natürlich die Werbetrommel ordentlich angeheizt wird und mit Buzzwords nur so um sich geworfen wird.

Neu verfügbar ist nun neben MySQL ein Datenbankbackend für Sqlite und MongoDB (danke Harald). Zudem habe ich noch ein paar Bugs entfernt. Vielen Dank an alle Betatester. Euer Feedback war echt super!

Auf selfoss.aditu.de ist nun auch eine Dokumentation zu finden. Dort ist auch eine kurze Erklärung, wie eigene spouts, also andere Anwendungen und Quellen an Selfoss angeschlossen werden können. Dazu habe ich hier im Blog ja auch schon einmal ein Tutorial geschrieben.

Tja, sonst kann ich nur sagen: schaut euch selfoss einfach einmal an. Ich nutze es ja schon seit einigen Monaten und schätze die schlichte und übersichtliche Art, News zu lesen sehr.

Selfoss: Eigene Datenquellen erstellen

Letzte Woche habe ich ja den neuen RSS Reader selfoss als Beta Version veröffentlicht. Ein Vorteil von dem Reader ist die Erweiterbarkeit hinsichtlich der Quellen. So können nicht nur RSS Feeds verarbeitet, sondern auch beliebige Quellen angezapft werden (z.B. Logfiles, Email Accounts, Webseiten ohne RSS Feed, Facebook OpenGraph).

Manchmal möchte man aber auch nur einzelne Einträge von RSS Feeds um zusätzliche Informationen anreichern. Ich mache das beim RSS Feed von heise, wo der Inhalt des News Beitrages nicht mitgeliefert wird. Diesen lade ich dann einfach in einer speziellen Datenquelle, die sich um diese Funktion von einem gewöhnlichen RSS Feed unterscheidet, nach.

Nun gibt es eine Schritt-für-Schritt Anleitung, wie so eine Datenquelle erstellt werden kann.

Eine Datenquelle, eine Klasse

selfoss stellt ein kleines Framework zur Verfügung, das es erlaubt recht einfach neue Datenquellen hinzuzufügen. Dazu muss nur eine einzelne PHP Datei unter
/spouts/your_spouts/your_spout.php
abgelegt werden (your_spouts und your_spout kann frei durch einen anderen Namen ersetzt werden). Diese PHP Datei muss eine einzelne Klasse enthalten, welche von der abstrakten Klasse \spouts\spout abgeleitet ist (man beachte, dass selfoss PHP 5.3 voraussetzt und \spouts der Namespace für alle Datenquellen ist).

Datenelemente der Klasse

Die eigene Klasse muss drei Datenelemente definieren:

  • name: der Name der Datenquelle
  • description: eine Beschreibung
  • params: hier werden die Optionen der Datenquelle festgelegt. Soll z.B. ein Benutzername eingegeben werden, so kann dies hier vorgegeben werden.

Folgend gleich ein Beispiel für so eine Klasse. Natürlich fehlen hier noch die Methode, auf die ich gleich eingehe. Es wird eine Datenquelle für einen Email Account via IMAP definiert. Der Benutzer muss, wenn er eine solche neue Email IMAP Quelle definiert, die Email Adresse, das Passwort und den Server eintragen. $params beschreibt diese drei Parameter, legt fest, was für ein Typ diese darstellen und wie die Eingabe des Benutzers validiert wird.

<?PHP
namespace spouts\mail;
class imap extends \spouts\spout {
    public $name = 'Email';
    public $description = 'email imap account as source';
    public $params = array(
            "email" => array(
            "title"      => "Email",
            "type"       => "text",
            "default"    => "",
            "required"   => true,
            "validation" => array("email")
        ),
        "password" => array(
            "title"      => "Password",
            "type"       => "password",
            "default"    => "",
            "required"   => true,
            "validation" => array("notempty")
        ),
        "host" => array(
            "title"      => "URL",
            "type"       => "text",
            "default"    => "",
            "required"   => true,
            "validation" => array("notempty")
        )
    );
}

Methoden der Klasse

Durch die abstrakte Elternklasse \spouts\spout muss die Datenquelle einige Funktionen implementieren. Diese werden dann im laufenden Betrieb von selfoss aufgerufen. Folgendes UML Diagramm gibt einen Überblick über die Struktur:

Die Klasse muss drei Dinge implementieren:

  • Sie muss eine Funktion load($params) für das Laden der Informationen zur Verfügung stellen. Diese wird während der Aktualisierung einmal aufgerufen und erhält als Parameter die aktuellen Einstellungen. load($params) muss von der Datenquelle implementiert werden und holt die Daten von der entfernten Quelle (z.B. führt einen IMAP Zugriff aus und lädt aktuelle Emails).
  • Sie muss das Interface Iterable implementieren. selfoss iteriert, nachdem load() ausgeführt wurde, dann über die einzelnen Einträge (mit Hilfe der Funktionen, die das Interface Iterable vorgibt: rewind, current, key, next, valid). Die einzelnen Einträge könnten z.B. neue Emails sein.
  • Während selfoss über die einzelnen Einträge iteriert, werden dann die Informationen dieser einzelnen Einträge abgerufen. Dies geschieht über Funktionen, welche durch die abstrakte Klasse \spouts\spout vorgegeben werden. Informationen sind z.B. Betreff einer Email, Email Body usw.

Der Ablauf ist dann folgender:

  1. Im Beispiel würde load($params) von selfoss mit der vom Benutzer eingegebenen Email, Passwort und Host aufgerufen.
  2. Diese Methode würde dann die Emails vom IMAP Account herunterladen und zwischenspeichern.
  3. selfoss iteriert über die einzelnen Emails (mit rewind, current, key, next, valid).
  4. Bei jedem einzelnen Iterationsschritt (also für jede Email) werden die Email-Informationen abgerufen (Inhalt, Betreff, Datum usw.) und zwar mit Hilfe der Funktionen: getId(), getTitle(), getContent(), getIcon(), getLink(), getDate().
  5. Um den Rest kümmert sich selfoss (prüfen ob es den Eintrag schon gibt, alte Einträge löschen usw.)

Eine Implementierung für diese Funktionen liegt natürlich völlig in der Hand des Entwicklers einer Datenquelle. Daher verweise ich an dieser Stelle auf die vorhandenen Datenquellen. \spouts\spout\feed (\spouts\rss\feed.php) stellt ein gutes Beispiel dar. Wer diese als Vorlage nimmt, kommt recht schnell sehr weit, denn dort werden alle Funktionen genutzt. Soll nur ein Standard RSS Feed um Funktionen erweitert oder angepasst werden, dann verweise ich auch die Klasse \spouts\spout\heise (\spouts\rss\heise.php). Hier wird lediglich die getContent() überschrieben und ansonsten verhält sich die Datenquelle wie ein gewöhnliches RSS Feed.

Thumbnails

Soll anstelle eines Textes ein Vorschaubild angezeigt werden, so muss die Methode getThumbnail() implementiert werden. Diese liefert für einen einzelnen Eintrag das Vorschaubildchen (die URL auf das Bild). \spouts\spout\images (\spouts\rss\images.php) ist ein Beispiel dafür. Diese Datenquelle geht von einem gewöhnlichen RSS Feed aus, durchsucht es nach Bilder (entweder ausgezeichnete Thumbnails im XML des Beitrages, oder das erste Bild im Content des Beitrages) und liefert die URL an selfoss. Das Laden, Verkleinern, Speichern und Aufräumen der Bilder übernimmt selfoss.

Los gehts…

Das war sie, die kurze und knackige Einführung, wie Datenquellen für selfoss entwickelt werden können. Gerne könnt ihr mir dazu Fragen stellen und bei Problemen schreiben (am besten hier im Blog, so dass auch andere von den Antworten profitieren können). Sehr freue ich mich auch über fertige Datenquellen. Gerne nehme ich neue in selfoss auf.

PDF Dateien mit Java rendern

Besonders im Web-Umfeld ist das PDF Format ein beliebtes Mittel, da die Unterstützung durch Clients hervorragend ist. Häufig kommt man dann auch in die Verlegenheit mit PDF Dateien umzugehen und z.B. Dokumente on-the-fly zu erstellen oder zu editieren. In einem aktuellen Anwendungsfall sollen von PDF Dateien Vorschaubilder erzeugt und ausgegeben werden.

Hierfür habe ich die hervorragende Java Bibliothek Pdf-renderer entdeckt. Die unter LGPL stehende OpenSource Library ermöglicht es, PDF Dateien zu rendern und als Bild auszugeben. Ursprünglich wurde die Bibliothek von Sun Labs entwickelt, welche einen PDF Viewer für ihre mit OpenOffice erzeugten Ausgaben benötigten. 2007, als der Pdf-renderer nicht mehr benötigt wurde, hat man sich entschlossen das Projekt als OpenSource Lösung zu veröffentlichen (Quelle).

Einbinden

Der Pdf-renderer kann einfach als Maven Dependency eingebunden oder als JAR Datei heruntergeladen werden.

<dependency>
	<groupId>org.swinglabs</groupId>
	<artifactId>pdf-renderer</artifactId>
	<version>1.0.5</version>
</dependency>

PDF laden und Bild erzeugen

Ein kurzes Codebeispiel zeigt, wie einfach aus einem PDF ein Bild erzeugt werden kann. In einem ersten Schritt wird aus der Datei als java.io.File Objekt ein ByteBuffer erzeugt. Dieser dient als Grundlage für den Zugriff auf den Inhalt der PDF Datei durch die pdf-renderer Klasse PDFFile.

import com.sun.pdfview.PDFFile;
import com.sun.pdfview.PDFPage;
…
File file = new File("c:\\tmp\\test.pdf");
RandomAccessFile raf = new RandomAccessFile(file, "r");
FileChannel channel = raf.getChannel();
ByteBuffer buf = channel.map(FileChannel.MapMode.READ_ONLY, 0,
channel.size());
PDFFile pdffile = new PDFFile(buf);

EIn PDFFile Objekt liefert Informationen über die PDF Datei (Metadaten, Anzahl Seiten usw.). In einem zweiten Schritt kann dann auf die einzelnen Seiten zugegriffen werden.

int numPgs = pdffile.getNumPages();

PDFPage page = pdffile.getPage(0);
Rectangle rect = new Rectangle(
	0,
	0,
	(int) page.getBBox().getWidth(),
	(int) page.getBBox().getHeight()
);
Image img = page.getImage(rect.width, rect.height,
	rect,
	null, // null = kein ImageObserver
	true, // Hintergrund weiß
	true // synchron
);

Es wird die erste Seite geholt und ein Image aus der Java 2D API erzeugt. Dieses kann dann beliebig weiter verarbeitet werden.

Zum Download der Bibliothek: http://java.net/projects/pdf-renderer

Modernizr: mit und ohne HTML5 & CSS3

Modernizr ist mittlerweile kein Geheimtipp mehr, nachdem ich es aber das erste Mal einsetze und das Skript überzeugen konnte, will ich es vorstellen.

Das Prinzip von diesem JavaScript Skript ist recht simpel: Wo es geht, soll man aufgrund von Kompatibilität nicht auf neue Features von HTML5 und CSS3 verzichten. Aber es sollen auch nicht Besucher ausgeschlossen werden, die nicht mit den neuesten Browser-Versionen ausgestattet sind (dabei denke ich nicht an IE6 Benutzer, sondern auch an alternative Browser; accessibility ist hier ein Thema). Die Idee ist also, dass Benutzer, welche mit aktueller Software eine Seite besuchen, alle Effekte und Funktionen zu sehen bekommen, wohingegen bei fehlenden Features einfach auf eine Fallbacklösung zurückgeschalten wird.

Ein Beispiel aus meinem aktuellen Projekt: Besitzt der Benutzer ein Touch-Device, dann werden zusätzliche Elemente geladen, wodurch ein Touch-Display besser unterstützt wird.

Dabei kann man sehr einfach feststellen, welche Features unterstützt werden. Modernizr setzt beim Aufruf der Seite für das html Element CSS Klassen, die beschreiben, was möglich ist und was nicht:

Zusätzlich steht auch ein JavaScript Objekt zur Verfügung. Aus meiner Sicht eine feine Sache. Manchmal kann man durchaus auf die neuen Features verzichten und dann ist Modernizr eine ganz gute Lösung.

http://www.modernizr.com/

iScroll 4

Mit dem Boom der Smartphones und Tablet kommt man beim Entwickeln von Webseiten natürlich mittlerweile nicht mehr um das Thema herum. Ein Problem, das dabei immer wieder auftaucht, ist das Scrollen innerhalb von Elementen fester Größe.

Eine super Lösung, die sowohl unter iOS als auch Android läuft, ist iScroll. Auf meinem Android Phone läuft es zwar nicht besonders smooth (scheinbar ist es doch etwas anspruchsvoller, was die Ressourcen angeht), aber auf dem iPad funktioniert es super. Vielleicht also ganz nützlich für den ein oder anderen Leser von diesem Blog: zur Webseite von iScroll

« ältere Beiträge