Sonntag, 31. Mai 2020

Clickjacking - Schutz mit Hilfe von Content Security Policy (CSP) oder X-Frame-Options

Bei Clickjacking versucht eine böswillige dritte Website die eigentliche Website des Nutzers in einem unsichtbaren Rahmen zu laden bzw. zu überlagern (z.B. per iframe). Der Benutzer wird dann dazu verleitet, Aktionen auf der ursprünglichen (böswilligen) Website auszulösen ohne dass er sich dessen bewusst ist.


Hintergrund: Clickjacking ist ein konzeptionelles Problem von JavaScript und Webanwendungssicherheit. (Quelle: https://de.wikipedia.org/wiki/Clickjacking)
 

Welche Gegenmaßnahmen gibt es?


Um so einen Angriff zu verhindern, sollte man eine explizite Whitelist von Seiten definieren, die die aktuelle Seite über die Direktive für Frame-Vorfahren in die Content Security Policy (CSP) einbetten können.

Damit auch ältere Browser unterstützt werden, kann der (veraltete) Header X-Frame-Optionen zusätzlich auf DENY oder SAMEORIGIN gesetzt werden. Die Option DENY verhindert, dass Browser die Website in einem iframe anzeigt.

Header set X-Frame-Options "DENY"

Wird der Header auf SAMEORIGIN gesetzt, kann die Website in iframes auf anderen Seiten derselben Domain eingebettet werden, verhindert jedoch das Einbetten in Websites von dritten.

Header always set X-Frame-Options "SAMEORIGIN"

Wichtig: X-Frame-Options funktioniert nur durch den HTTP-Header, und NICHT per meta-tag! Daher muss die Einstellung direkt im Apache vorgenommen oder per .htaccess gesetzt werden.

Dienstag, 26. Mai 2020

Leaflet.js - draggable marker und Ausgabe der Koordinaten (lat, lng)

In dem Beitrag "Webseite mit interaktiver Karte ohne Google Maps? Leaflet.js" hatte ich beschrieben, wie man Leaflet.js auf seiner Webseite als gute Alternative zu Google Maps einbindet. 


In diesem Beispiel geht es darum einen "ziehbaren" Marker zu erstellen und die Koordinaten in zwei Feldern (lat, lng) anzuzeigen.


Es wird die Dragend-Methode für den Marker verwendet um lat und lng abzufangen:

<script type="text/javascript">
    function showMap() {
      
        var map = L.map('map_leaflet').setView([50.9033081, 9.5924615], 14);
        var my_divicon = L.divIcon({
            className: 'arrow_box'
        });
        var marker = L.marker([50.9033081, 9.5924615], {
            draggable:true
        });
        function addToTextBox(lt,ln){
            document.getElementById('lat').innerHTML = lt;
            document.getElementById('lng').innerHTML = ln;
          
        }
        marker.on('dragend', function(event){
            //alert('drag ended');
            var marker = event.target;
            var location = marker.getLatLng();
            var lat = location.lat;
            var lon = location.lng;
            addToTextBox(lat,lon);
            //alert(lat);
            //retrieved the position
          });
       
        // load a tile layer
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                attribution: 'Map data © OpenStreetMap and contributors CC-BY-SA',
                maxZoom: 18,
                minZoom: 9
            }).addTo(map);
          
        // initialize the map
        //var map = L.map('map_leaflet', { layers: osm, tap: false } );
        L.control.scale({imperial:false}).addTo(map); // metrisch

        marker.addTo(map);
    }
</script>



Samstag, 23. Mai 2020

JavaScript - Fetch API File Upload: Apache 403 Forbidden error SecFilterEngine

Für eine Erweiterung meiner Webcamseiten, benötigte ich ein Formular mit Bild-Upload-Funktion. Das Hochladen von Dateien ist eine der häufigsten Funktionen für eine Webanwendung. Ich verwende in meinem Beispiel KEINE der vielen JavaScript-Bibliotheken, sondern die Fetch-API (eine native JavaScript Funktion).


Als erstes benötigt man auf der Webseite ein HTML Formular mit einem Eingabeelement:

...
    <form action="xyz.php" name="melderForm" method="post" enctype="multipart/form-data">
...
        <input id="formMelderImage-file" class="form-control" type="file">
...
    </form>


Mit dem folgenden JavaScript Code wird ein Event-Listener hinzugefügt, wenn der Benutzer eine Datei auswählt. Mit der Methode fileUpload () wird ein Dateiobjekt als Eingabe empfangen und es mit fetch () auf den Server hochgeladen (inklusive einer Überprüfung des Dateityps (nur Bilder) und der Dateigröße (< 10MB).

<script>
    // Datei vom Formular
    const fileInput = document.getElementById('formMelderImage-file');

    // event listener
    fileInput.addEventListener('change', () => {
        fileUpload(fileInput.files[0]);
    });
   
    const fileUpload = (file) => {
        // Check des Dateityps
        if(!['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'].includes(file.type)) {
            console.log('Es sind nur Bilder erlaubt!');
            return;
        } else if(file.size > 10 * 1024 * 1024) { // Check der Groesse (< 10MB)
            console.log('Die Datei muss kleiner 10MB sein!');
            return;
        } else {
            // Datei zum FormData object hinzufügen
            const fd = new FormData();
            fd.append('formMelderImage-file', file);

            // `POST` request senden
            fetch('/upload/image', {
                method: 'POST',
                body: fd
            })
            // Abfangen von Fehlern
            .then(res => res.json())
            .then(json => console.log(json))
            .catch(err => console.error(err));
        }
    }
</script>

SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data" - 403 Forbidden


404- oder 403-Fehlern nach dem Senden eines Formulars können an der mod_security-Einstellung in Apache auf dem Server liegen. Das Apaches-Modul mod_security hat standardmäßig ein Upload-Limit von 60 KB, sodass bei jedem größeren Upload ein 403-Fehlercode ausgegeben wird.

Man kann versuchen diese zu deaktivieren, und folgendes zu der .htaccess-Datei hinzuzufügen, man wird aber vermutlich keinen Erfolg mehr haben (support for .htaccess files was discontinued in 2.x as it raised too many security issues https://stackoverflow.com/questions/19093542/how-to-disable-mod-security-and-mod-security2-in-htaccess/19196856#19196856)

<IfModule mod_security.c>
  SecFilterEngine Off
</IfModule>

Oder wenn man direkten Zugriff auf die Apache Einstellungen hat, geht dies auch direkt unter nano  /etc/httpd/conf.d/mod_security.conf .

<IfModule mod_security.c>

    # Turn the filtering engine On or Off
    SecFilterEngine Off

Freitag, 24. April 2020

Raspberry Pi - Adafruit Mini PiTFT 135x240 Color TFT Add-on [Programmierung]

In dem Betrag Raspberry Pi - Adafruit Mini PiTFT 135x240 Color TFT Add-on wurde das Display bereits näher beschrieben. In diesem Beitrag möchte ich das Display als Erweiterungsoption für die Raspberry Pi - zero : Wetterstation incl. OLED-Display vorstellen. Zur Anzeige von WLAN-, Sensor- und Speicherplatzinformationen. Zusätzlich kann direkt ein Upload des Webcam Bildes und ein Reboot per Tastendruck erfolgen.


Hinweis: Als Basis wurden die Beispiele von Adafruit für das Display verwendet.

Im ersten Schritt wurden die Befehle/Funktionen definiert, welche den jeweiligen Status anzeigen sollen oder per Buttondruck aufgerufen werden sollen.


cmdWlanSsid = "iwconfig wlan0 | grep ESSID | awk -F: '{print $2}'"
cmdHostName = "hostname -I | cut -d' ' -f1"
cmdCam = "vcgencmd get_camera | cut -d' ' -f2" #supported=1 detected=1 => OK
cmdDisk = 'df -h | awk \'$NF=="/"{printf "Disk: %d/%d GB  %s", $3,$2,$5}\''
cmdWebcam = '/home/pi/webcam/webcam.sh'
cmdReboot = 'sudo reboot'

def is_connected():
    try:
        # connect to the host -- tells us if the host is actually
        # reachable
        socket.create_connection(("www.google.com", 80))
        return "online"
    except OSError:
        pass
    return "offline"


# Temperatursensor ermitteln
SensorPfad = "/sys/bus/w1/devices/" # Pfad
SensorNames = open("/sys/bus/w1/devices/w1_bus_master1/w1_master_slaves" ,"r")
Sensor = SensorNames.readline()
if Sensor:
    SensorNames.close() 


Anschließend werden diese Informationen an das Display in einer "while" Schleife gesendet.


while True:
     
        # Draw a black filled box to clear the image.
        draw.rectangle((0, 0, width, height), outline=0, fill=(0, 0, 0))
     
        #Show WLAN
        WLAN = subprocess.check_output(cmdWlanSsid, shell=True).decode("utf-8")
...
        # Write lines of text.
        y = top
        draw.text((x, y), WLAN, font=font, fill="#FFFFFF")
...
        # Display image.
        display.image(image, rotation)
        time.sleep(0.1)


 

Mit Hilfe von buttonA = digitalio.DigitalInOut(board.D23) kann das Drücken der Taste abgefangen werden. 


So erfolgt beim Drücken des "Button A" ein "Upload des Webcam Bildes" mit dem bekannten Script (https://sebastianhemel.blogspot.com/2019/11/raspberry-pi-camera-modul-v21.html) und beim Drücken des "Button B" die Anzeige eines "Copyright". Werden beiden Tasten gleichzeitig gedrückt, erfolgt ein Reboot des Pi.

...
        if buttonB.value and not buttonA.value:  # just button A pressed
...
            y = top
            text = "Webcam Upload..."
            draw.text((x, y), text, font=font, fill="#FFFFFF")
            y += font.getsize(text)[1]
            # Display image.
            display.image(image, rotation)
            subprocess.check_output(cmdWebcam, shell=True).decode("utf-8")
            draw.text((x, y), "...finished!", font=font, fill="#FFFFFF")
...



Anbei das komplette Python Script (rgb_display_stats-picture.py), welches man am Besten direkt beim Booten starten sollte.

sudo nano /etc/rc.local

Und die folgende Zeile hinzufügen:

sudo python3 /home/pi/rgb_display_stats-picture.py &

vor dem "exit 0" in der Datei.

Freitag, 17. April 2020

Big Data - Was ist das?

Big Data (dt. "Massdaten / große Datenmengen") ist die Bezeichnung für extrem große und komplexe Datenmengen. Diese Menge an Daten können die Grenzen und Möglichkeiten der normalen SQL-Datenbanken übersteigen.


Die Datenmengen werden sich in den kommenden Jahren immer weiter vervielfachen. Wichtig: Mit "Big Data" sind alle Daten gemeint, nicht nur personenbezogene Daten, sondern auch Sensordaten z.B. Messwerte.

In der Definition spricht man in der Regel von fünf Vs des Big Data:

Volume (Umfang, Datenvolumen)
Bedeutet das sehr große Datenvolumen, mehrmals täglich produziert werden.

Variety (Bandbreite der Datentypen und -quellen)
Definiert die Verschiedenartigkeit der Daten aus unterschiedlichen Quellen.

Velocity (Geschwindigkeit, mit der die Datenmengen generiert und transferiert werden)
Bezeichnet die Geschwindigkeit von Daten. Das Verarbeiten passiert oftmals in der Regel von wenigen Sekunden.

Veracity (Echtheit von Daten)
Bedeutet die Glaubwürdigkeit, Zuverlässigkeit und Genauigkeit von Daten.

Value (unternehmerischer Mehrwert)
Konzentriert sich auf den unternehmerischen Mehrwert, der aus den generierten Daten geschaffen werden kann (Business Value).

Montag, 13. April 2020

HTTPS - Weiterleitung per .htaccess

Mit Hilfe einer .htaccess Datei lassen sich verschiedene Einstellungen eines Apache Webservers vornehmen. Darunter fallen zum Beispiel Weiterleitungen oder auch ein Passwort geschützter Bereich. In dem Beitrag beschreibe ich kurz das Vorgehen zur Einrichtung einer Weiterleitung auf HTTPS.


Hat man für seine Webseite nur ein Webhosting-Paket bestellt, lässt sich keine direkte Konfiguration am Apache Webserver selber vornehmen. Um z.B. eine Weiterleitung per HTTP zu HTTPS mit Hilfe der Apache Virtual Host Konfiguration vorzunehmen.

Mit HTTPS werden alle Daten zwischen dem Browser und dem Webserver verschlüsselt und somit sicher übertragen. Bevor eine HTTP zu HTTPS-Umleitung für die Domain erfolgen kann, muss ein SSL-Zertifikat installiert und aktiviert werden. Dies geht mittlerweile bei den meisten Webhostern relativ einfach z.B. mit kostenfreien Let’s Encrypt Zertifikaten.

Domain auf verschlüsselte Verbindung (HTTPS) weiterleiten

Die Weiterleitung erfolgt mit Hilfe einer .htaccess Datei. Das notwendige Apache Modul mod_rewrite ist bei den Hosting Angeboten in der Regel immer aktiv.

Verwende ich einen eigenen Server, muss ich das Modul mit dem folgenden Befehl aktivieren und anschließend den Webserver neustarten.
sudo a2enmod rewrite
Hinweis: Sollte man auf Inhalte der Webseite z.B. per HTML-Wrapper-App noch mit HTTP zugreifen, sollten die Verlinknungen innerhalb der App auf HTTPS umgestellt werden. Ansonsten öffnet sich direkt ein Browser Dialog wegen der Weiterleitung auf HTTPS.

Jetzt muss nur noch die .htaccess Datei im Domain-Stammverzeichnis erstellt werden und die nachfolgenden Zeilen eingefügt werden, um HTTP zu HTTPS umzuleiten.


# Weiterleitung (Redirect) https
RewriteEngine On

RewriteCond %{SERVER_PORT} !^443$

# 301: Die Weiterleitung ist dauerhaft
RewriteRule (.*) https://%{HTTP_HOST}/$1 [R=301,L]


Samstag, 11. April 2020

Digitalisierung - The Six D's of Disruption

Die 6 D's der Disruption von Dr. Peter Diamandis (Singularity University co-founder) ist ein sehr gutes Modell, um zu verstehen, wie Technologien bzw. Digitalisierung uns beeinflussen. 


Das 1. "D" steht für Digitalisierung, oder "Digitization"

Ein analoges Produkt wird digitalisiert. Als bekannste Beispiel wird meist die erste digitale Kamera von Kodak verwendet. Sie hatte 0,01 Megapixel und konnte nur Bilder in Schwarz und Weiß auf einer Kassette aufnehmen und wog ca. 4 kg.

=> Ab diesem Moment fängt das Produkt an, sich auf einer exponentiellen Kurve zu bewegen.

Das 2. "D" nennt sich "Deception" dt. Irreführung

Dies ist der (Irr)Glaube, dass Technologie immer besser sein sollte, als sie ist. Die digitalen Kameras mit 0,02 - 0,04 und 0,08 Megapixel waren immer noch nicht gut genug.

Das 3. "D" nennt sich "Disruption" dt. Bruch/Spaltung

Diese Phase tritt ein, wenn das Produkt nach mehreren Iterationen gut genug ist. Beim Beispiel der Digitalkameras war dies ab ca. 2 Megapixel der Fall. Das war für viele der Moment, ab dem man keine analogen Filme mehr gekauft hat.

=> Dies ist zugleich auch der wichtigste Moment, der zwangsläufig immer nach der Irreführung, der Deception, zur Disruption führt.


Anschließend kommt es zur die Dematerialisierung (4. Dematerialization) von Technologien, sie verschwinden! Man nenn dies auch den iPhone-Moment. 



Man kauft keine Kamera mehr, sondern nutzt das Smartphone. Dies führt zu einer Demonetarisierung (5. Demonetization), also zu einer Geldentwertung.

Man benötigt keinen Film mehr und lässt diesen auch nicht mehr entwickeln. Es kommt zu einer Demokratisierung (6. Democratization) und die Technologie ist immer mehr Menschen zugänglich. Die Technologie ist nun überall erhältlich und zugleich sehr günstig. Dies führt zu einem Verschwinden von alten Technologien bzw. kompletter Berufszweige.


Fazit: Mit Hilfe des Modells, kann man erkennen wo sich die Industrie bzw. eine Technologie heute befindet und wo sie sich hinbewegen wird.