It’s #FrontendFriday – Canvas Fingerprinting: Tracking deines digitalen Fingerabdrucks

Wie jeden 2. Freitag ist heute wieder #FrontendFriday!

Das heimliche Tracking im Internet hat (leider) schon eine lange Tradition. Spätestens seit der DSGVO ist jedem bekannt, was über Cookies technisch möglich ist und wie man sich dagegen schützen kann.

In diesem #FrontendFriday möchten wir jedoch nicht die klassische Methode des Trackings durch das Internet beleuchten, sondern eine alternative, unbekanntere Methode: das Canvas Fingerprinting.Mehr

It’s #FrontendFriday – Einheiten in CSS

CSS bietet eine Reihe unterschiedlicher, typografischer Einheiten. Grundsätzlich wird zwischen relativen und absoluten Maßeinheiten unterschieden. Solche Größen bemessen Elemente eines Layouts, Abstände sowie Schriftgrade. Vor allem im Bereich des „Responsive Webdesigns“ ist das grundlegende Verständnis, über die Funktionsweise der CSS-Längenangaben, entscheidend. Der folgende Beitrag konzentriert sich nur auf die in CSS (Cascading Style Sheets) verwendete Einheiten für virtuelle Medien. Buchschriftsätze sind zusätzlich aus dem Betrachtungsfokus ausgenommen.

Mehr

It’s #FrontendFriday – Neue Features in Angular Material 7

Angular Material

Angular gehört zu den verbreitetsten Frontend Frameworks auf dem Markt. Angular bietet die Option ihre Layout-Library „Angular Material“ zu verwenden.

Angular Material steht unter MIT-Lizenz und adaptiert die Standards des Material Designs für Angular. Dabei erscheint eine Nutzeroberfläche im Stil des Material Designs.

Angular Material bietet viele vordefinierte UI Elemente wie beispielsweise: DatepickerTabellenCardsMenüsSlideruvm.

Mehr

It’s #FrontendFriday – WebAssembly: die Zukunft der Webapps?

Vielleicht haben Sie schon von WebAssembly (kurz: Wasm) gehört, denn immerhin gibt es zumindest die WebAssembly Community Group (W3C) schon seit April 2015. Inzwischen ist Wasm in der Version 1.0 verfügbar.
Doch was ist Wasm genau und wofür braucht man das? In diesem Blogbeitrag erfahren Sie alles dazu!

Was ist WebAssembly?

WebAssembly is a binary instruction format for a stack-based virtual machine.
Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

Kurz gesagt: WebAssembly ist ein neuer Typ Code. Er ermöglicht es Webanwendungen in C/C++ oder Rust zu implementieren und diese (fast – in einer Sandbox) nativ im Browser auszuführen. Dabei kann es auch in Kombination mit HTML/CSS verwendet werden [1].

Warum möchte man Webapps in einer maschinennahen Sprache implementieren und ausführen?

Gute Frage! Denn um Logik auf Webseiten zu implementieren, gibt es doch schon JavaScript? Wie wir aber alle wissen, ist JavaScript vergleichsweise leider sehr langsam. Das macht sich vor allem bei komplexen Webanwendungen wie z.B. bei der 3D Visualisierung im Browser bemerkbar.

Deshalb sind vor allem folgende Gründe dafür verantwortlich, dass es Wasm gibt:

  • Performance
  • Performance
  • Performance
  • und Performance [2] [3]

 

In folgender Demoanwendung kann man sehr gut selbst den Unterschied sehen, spüren und ausprobieren: WebAssembly VS JavaScript

  1. Link öffnen und oben rechts auf den Debug-Monitor klicken, bis die blaue FPS-Anzeige zu sehen ist
  2. Über das DropDown oben rechts kann zwischen Wasm und JS gewechselt werden
  3. Darunter kann die Anzahl der animierten Menschen erhöht/verringert werden

Im aktuellen Google Chrome Canary (Version 72.0.3610.0) erhalte ich z.B. bei 20 Menschen mit JS gerade mal ~13 FPS, mit Wasm ~30 FPS. Das sind mehr als 100% Performance-Steigerung!

Wie funktioniert WebAssembly im Browser?

Um den geschriebenen C/C++ Code zu WebAssembly zu kompilieren, gibt es emscripten. Mit emscripten kann über folgenden Befehl der Code zu Wasm kompiliert werden:

emcc hello.c -s WASM=1 -o hello.html

Um das ganze im Browser auszuführen, muss die jeweilige Browserengine auch Wasm unterstützen. In Chrome übernimmt das Ausführen von Wasm beispielsweise der Chrome Native Client in einer Sandbox.

Wer noch tiefer einsteigen möchte: https://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/

Welche Browser bzw. Browserengines unterstützen WebAssembly?

WebAssembly Browserunterstützung

Man mag es kaum glauben, aber da sind sich alle (wichtigen) Browser (nicht Internet Explorer) einig: https://caniuse.com/#feat=wasm

Wird WebAssembly der Nachfolger von JavaScript?

Nein. Wasm ist als „schnelle Ergänzung“ für JavaScript gedacht [4].
Wasm wird in Zukunft parallel existieren und voraussichtlich nur bei besonders komplexen Webanwendungen zum Einsatz kommen (Rechenintensive Anwendungen, 3D, etc.).

 

Quellen:

[1] https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71

[2] https://www.lucidchart.com/techblog/2017/05/16/webassembly-overview-so-fast-so-fun-sorta-difficult/

[3] https://medium.com/samsung-internet-dev/performance-testing-web-assembly-vs-javascript-e07506fd5875

[4] https://de.wikipedia.org/wiki/WebAssembly

It’s #FrontendFriday – Einsatz der Content Security Policy (CSP)

Die Content Security Policy (CSP) ist ein Sicherheitskonzept, um Cross-Site-Scripting-Attacken (XSS) und andere Angriffe in Browsern zu verhindern. XSS beschreibt das Einbetten eines schädlichen Codes in einen anderen vermeintlich sicheren Kontext.

Durch die CSP werden beim Ausliefern der Webseite oder Webanwendung zusätzliche Meta-Tags übermittelt, die festlegen, welche „Vorgänge“ verhindert werden sollen. So kann z.B. das Ausführen von JavaScript-Dateien oder das Einbinden von Bildern, wenn diese nicht vom selben Server oder nicht von einer bestimmten Quelle stammen, unterbunden werden. Welche Inhalte gesperrt und welche erlaubt sind, wird durch die Angabe der Content-Security-Policy und dessen Parametern definiert.

Mehr