{"id":484,"date":"2018-08-19T10:54:51","date_gmt":"2018-08-19T08:54:51","guid":{"rendered":"https:\/\/sebastian.fam-knopp.de\/?p=484"},"modified":"2018-08-19T10:56:24","modified_gmt":"2018-08-19T08:56:24","slug":"visky-web-visuelle-kryptografie-mit-angular","status":"publish","type":"post","link":"https:\/\/sebastian.knopp.it\/?p=484","title":{"rendered":"VisKy-Web – Visuelle Kryptografie mit Angular"},"content":{"rendered":"\n

Aufgabenstellung<\/h4>\n\n\n\n

Als Nebenjob habe ich von Mai bis Juli eine Stelle beim „Bonn-Aachen International Center for Information Technology (b-it)“<\/em> angenommen. Hier wurde ich als SHK mit der Neuimplementierung eines Webtools zur Berechnung von VisKy-Bildern betraut. Das alte Tool lief noch auf Javabasis mit etwas PHP und Python und sollte daher austauscht werden. Das Tool sollte rechtzeitig zum Sommerfest der Universit\u00e4t fertig werden, wo ich es dann f\u00fcr die G\u00e4ste an einem Stand auch pr\u00e4sentieren und erl\u00e4utern sollte. Man gab mir also gute zwei Monate Zeit.<\/p>\n\n\n\n

Ein VisKy-Bild setzt sich zusammen aus zwei verschl\u00fcsselten Teilbildern, dem Schl\u00fcssel<\/strong> und der Nachricht<\/strong>, welche \u00fcbereinander gelegt wieder ein normales Bild ergeben. Jedes Teilbild f\u00fcr sich genommen sieht aus wie reines Bildrauschen und ist bestenfalls ohne erkennbare Muster. Es l\u00e4sst sich also mit nur einem Teilbild, egal ob Schl\u00fcssel oder Nachricht, kein Anderes rekonstruieren.<\/p>\n\n\n\n

Auswahl der Frameworks und Libraries<\/h4>\n\n\n\n

Die Anforderung war, das alte Tool, welches Bilder als Upload entgegennahm und dann mittels ImageMagick und Python serverseitig weiterverarbeitete, zu ersetzen und ein rein im Browser arbeitendes Tool zu bauen, welches die Teilbilder gemeinsam in einer generierten PDF ausgibt.<\/p>\n\n\n\n

Ich ben\u00f6tigte also ein JS-Framework f\u00fcr den Browser, einen JS-Ersatz f\u00fcr ImageMagick und ein JS-Tool zum Erzeugen von PDF-Dateien.<\/p>\n\n\n\n

Aufgrund vorangegangener guter Erfahrungen mit Angular stand dieses Framework quasi gleich zu Anfang schon fest. Die dort bereitgestellten Services und die Modularisierung stellten sich sp\u00e4ter als gro\u00dfe Hilfe dar.<\/p>\n\n\n\n

F\u00fcr die Bildbearbeitung habe ich mit diversen JS-Frameworks experimentiert. Alle decken immer die etwa gleichen Grundfunktionen mit 2-3 spezifischen Extras ab, aber keines bot mir einfache Methoden zur Umrechnung des Bildes in Schwarz-Wei\u00df (nicht Graustufen), Skalierung und Wei\u00dfwertberechnung. Ich entschied mich also dazu diese drei Features mittels eines eigenen Angular-Services neu zu implementieren.<\/p>\n\n\n\n

Des weiteren nutzte ich pdfmake<\/a>\u00a0zur Generierung von PDFs mittels einfacher JSON-Bl\u00f6cke. Eine geniale Library, bei der man zwar manchmal etwas rumprobieren muss, die aber dann auch sehr saubere PDFs erzeugen kann und das ohne, dass es wie ein laienhaftes Textdokument aussieht. Sie scheint auch in Ministerien und dergleichen Einsatz zu finden, zumindest gab es bei der Recherche einige interessante Beispiel-PDFs auf StackOverflow.<\/p>\n\n\n\n

Bildauswahl und Vorbereitung<\/h4>\n\n\n\n