Autor: amoerke

Ende-zu-Ende Verschlüsselung

Posted on by amoerke

Traditionell wird der Content der Webseite in der Datenbank gespeichert und kann vom Server in Klartext gelesen werden. Im Falle eines Serverhacks, bei dem die Datenbank ausgelesen werden kann, kann der Angreifer alle Inhalte aus der Datenbank abgreifen und lesen.

Traditionelle Webseitenarchitektur

Wird Ende zu Ende verschlüsselt, landet der Inhalt selbst auch verschlüsselt in der Datenbank. Im Falle eines Angriffs und Daten-Highjacking sind die Daten verschlüsselt und für den Angreifer nutzlos.

Ende zu Ende – verschlüsselt

Glücklicherweise ist die Web-Cryptography mittlerweile in allen gängigen Browsern nativ implementiert, sodass man diese nutzen kann.

Upload

  1. Zufälligen Schlüssel generieren mit dem der Inhalt verschlüsselt werden soll
const key = await window.crypto.subtle.generateKey(
  { name: "AES-GCM", length: 128 },
  true, // extractable
  ["encrypt", "decrypt"],
);Code-Sprache: JavaScript (javascript)

2. Inhalt mit Schlüssel verschlüsseln

const encrypted = await window.crypto.subtle.encrypt(
  { name: "AES-GCM", iv: new Uint8Array(12) /* don't reuse key! */ },
  key,
  new TextEncoder().encode(JSON.stringify(content)),
);Code-Sprache: JavaScript (javascript)

3. Verschlüsselten Inhalt auf den Server hochladen

const response = await (
  await fetch("/upload", {
    method: "POST",
    body: encrypted,
  })
).json();Code-Sprache: JavaScript (javascript)

4. Eine URL zum teilen des Inhaltes generieren (optional)

const objectURL = response.url;
const objectKey = (await window.crypto.subtle.exportKey("jwk", key)).k;
const url = objectURL + "#key=" + objectKey;Code-Sprache: JavaScript (javascript)

Download

Die andere Seite ist der Download der Datei zurück vom Server

const response = await fetch(`/download?id={id}`);
const encrypted = await response.arrayBuffer();Code-Sprache: JavaScript (javascript)

Der Schlüssel den wir kodiert in der URL im k-Feld des jwk-Objektes erhalten haben, stellt den eigentlichen Schlüssel dar. Um das Schlüsselobjekt zurück zu erhalten müssen wir dieses mit all seinen Feldern reproduzieren.

const objectKey = window.location.hash.slice("#key=".length);
const key = await window.crypto.subtle.importKey(
  "jwk",
  {
    k: objectKey,
    alg: "A128GCM",
    ext: true,
    key_ops: ["encrypt", "decrypt"],
    kty: "oct",
  },
  { name: "AES-GCM", length: 128 },
  false, // extractable
  ["decrypt"],
);Code-Sprache: JavaScript (javascript)

Wir entschlüsseln die Nachricht zurück zu einem String und konvertieren sie zurück in den ursprünglichen JSON-String

const decrypted = await window.crypto.subtle.decrypt(
  { name: "AES-GCM", iv: new Uint8Array(12) },
  key,
  encrypted,
);
const decoded = new window.TextDecoder().decode(new Uint8Array(decrypted));
const content = JSON.parse(decoded);Code-Sprache: JavaScript (javascript)

Quelle: Excalidraw

Resposive Text basierend auf Bildgröße

Posted on by amoerke 
<div class="box">
   <img>
   <h1>Lorem ipsum dolor ..</h1>
</div>Code-Sprache: JavaScript (javascript)
.box {
  display: inline-block;
}
h1 {
  width: 0;
  min-width: 100%;
}Code-Sprache: CSS (css)

Die umgebene Box auf display-inline setzen, damit Sie die Größe Ihrer Kindelemente annimmt.

Die Überschrift, bzw. das Textelement auf width: 0 setzen, damit es nicht mehr automatisch die Breite des Eltern-Containers übernimmt.

Das Textelement (h1) auf min-width: 100% setzen, damit es die Größe des Bildes annimmt.

Quelle

Docker CheatSheet

Posted on by amoerke 
// Im Verzeichnis des Dockerfiles ausführen
docker build -t EIGENER_IMAGENAME .

// Container aus Image bauen und starten und nach stoppen löschen
docker run EIGENER_IMAGENAME -rm -d CONTAINER_NAME

// Benanntes Volume (wird nach löschen des Containers nicht gelöscht)
docker run EIGENER_IMAGENAME -v VOLUMENAME:PFAD_IM_CONTAINER CONTAINER_NAME

// Mount als Volume dabei wird /app/node_modules wenn schon vorhanden nicht überschrieben, weil es als anonymer Pfad aufgeführt wird
docker run -v PFAD_AUF_HOST_COMPUTER:/PFAD_IN_CONTAINER -v /app/node_modules -d CONTAINER_NAME
Code-Sprache: JavaScript (javascript)

Volume-Arten Vergleich

Raspi über Hostname

Posted on by amoerke

Im Router dem Raspi eine feste IP-Adresse vergeben.

Auf dem Raspi in der /etc/hosts:

FESTE_IP HOSTNAME
Bsp.: 192.168.100.200  raspberrypi.localCode-Sprache: CSS (css)

In der /etc/hostname den gleichen Hostname (bspw. raspberrypi.local) eintragen

Git – CheatSheet

Posted on by amoerke

Remote-URL ändern

Bash
git remote set-url origin https://gitlab.com/KodeKloud/repository-1.git
Bash

Branches anzeigen

Bash
git branch
Bash

Stashing (Zwischenspeichern)

Bash
git stash // Git Stand zwischenspeichern
git stash pop // Zu letztem Git Stand zurückkehren und diesen gleich löschen
git stash apply [stash-name] // Zu entsprechenden Git-Stand wechseln
git stash drop [stash-name] // Entsprechenden Git-Speicherstand löschen
git stash save "Name des Stashs" // Stash mit Namen speichern
git stash list // Alles stashes auflisten
Bash

Artikel

Branching

Bash
git branch // Alle Branches anzeigen
git checkout -b [BRANCHNAME] // Neuen Branch anlegen und gleich in diesen wechseln
git branch -d [BRANCHNAME] // Löschen des lokalen Branches
git push origin --delete [BRANCHNAME] // Löschen des Remotebranches
Bash

Artikel | Artikel zum Branchlöschen

Merging

Bash
git checkout master // HEAD / Master auschecken
git merge [BRANCHNAME] // Änderungen aus [BRANCHNAME] in master zusammenführen
Bash

Artikel

Diff

Bash
git diff --name-only master...xyz // Alle geänderten Dateien in einem Branch auflisten
git diff-tree --no-commit-id --name-only -r bd61ad98 // Alle geänderten Dateien in einem Commit auflisten
Bash

Geänderte Dateien auflisten

Verzeichnis aus git NICHT lokal löschen

Bash
git rm -r --cached myFolder
Bash

Gelöschte Datei aus altem Stand ansehen

Bash
git log -- path/to/file
git show <commit_hash>:path/to/file
# BSP:
git show 3a9fbc1:src/config.php
Bash

Gelöschte Datei aus altem Stand zum Vergleich wiederherstellen

Bash
git checkout <commit_hash>^ -- path/to/file
# BSP:
git checkout 3a9fbc1^ -- src/config.php
Bash

Linux Cheatsheet

Posted on by amoerke 
find `$pwd` -name '*.$DATEIENDUNG' -exec echo rm -rv {} \; // Dateien mit bestimmter Dateiendung löschen

du --max-depth=1 -h // Datei/Verzeichnisgrößen ermitteln

find -mtime +30 `$pwd` -exec echo rm -rv {} \; // Dateien älter als 30 Tage löschenCode-Sprache: PHP (php)

VSCode Fonts anpassen

Posted on by amoerke
  1. Download and install both FiraCode and FlottFlott (or another cursive alternative if you want)
  2. Install VSCode Extension: Custom CSS and JS Loader
  3. Save styles.css on your desktop
  4. Update the User settings (settings.json) in VSCode. (note: don’t forget to change the path “ vscode_custom_css.imports”)
  5. Ctrl + CMD + P -> Reload Custom JS and CSS
// Place your settings in this file to overwrite the default settings
{
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,   
    "vscode_custom_css.imports": ["file:///Users/zamamoha/Desktop/styles.css"]
}   Code-Sprache: JSON / JSON mit Kommentaren (json)

styles.css

.type.storage,.type.storage.declaration, .storage.class.modifier {
  font-family: 'flottflott';
  font-size: 1.7em;
}

.type.storage.arrow.function {
  font-family: 'Fira Code'
}

.decorator.name, .decorator.punctuation:not(.block), .import.keyword {
    font-family: 'flottflott';
    font-size: 1.7em;
    color: #68f39b!important;
}
.attribute-name {
    font-family: 'flottflott';
    font-size: 1.5em;
}

.html.quoted.double {
    color: #a6f3a6!important;
}
.comment {
	color: #c5c5fd!important;
}
.comment:not(.punctuation) {
    font-family: flottflott;
    font-size: 1.5em;
}Code-Sprache: CSS (css)

Quelle: https://medium.com/@zamamohammed/multiple-fonts-alternative-to-operator-mono-in-vscode-7745b52120a0