const isTouchDevice = "ontouchstart" in document.documentElementJavaScriptKategorie: Javascript
Bildsequenzer
Ende-zu-Ende Verschlüsselung
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.

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.

Glücklicherweise ist die Web-Cryptography mittlerweile in allen gängigen Browsern nativ implementiert, sodass man diese nutzen kann.
Upload
- 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
ReactNative: Kompletten AsyncStorage auslesen
AsyncStorage.getAllKeys((err, keys) => {
AsyncStorage.multiGet(keys, (error, stores) => {
stores.map((result, i, store) => {
console.log({ [store[i][0]]: store[i][1] });
return true;
});
});
});Code-Sprache: JavaScript (javascript) [Chrome] Registrierte EventListener anzeigen
Alle registrierten EventListener anzeigen lassen
Array.from(document.querySelectorAll('*'))
.reduce(function(pre, dom){
var evtObj = getEventListeners(dom)
Object.keys(evtObj).forEach(function (evt) {
if (typeof pre[evt] === 'undefined') {
pre[evt] = 0
}
pre[evt] += evtObj[evt].length
})
return pre
}, {})
Nur die registrierten Klick-Listener anzeigen lassen
Array.from(document.querySelectorAll('*'))
.reduce(function(pre, dom){
var clks = getEventListeners(dom).click;
pre += clks ? clks.length || 0 : 0;
return pre
}, 0)
Node Module inkompatibel nach NodeJS Update
Wenn nach eine NodeJS-Update Node-Module nicht mehr laufen (inkompatibel), dann hilft meist:
- Schließen der IDE
- Entfernen von
node_modulesundpackage--lock.json - Ausführen von
npm clean cache --forceals Administrator - Ausführen von
npm install
Quelle: https://github.com/gulpjs/gulp/issues/2280#issuecomment-493701211
jQuery Event Emitter
jQuery EventEmitter – James Padolsey
jQuery EventEmitter – James Padolsey
If you’re already using jQuery and you need an EventEmitter you may as well use jQuery’s event system instead of building your own. Here’s something I used in a recent project:
CSRF (Cross Site Request Forgery) verhindern
- Token generieren
- Token in den Meta-Tag generieren
- Token mit jQuery schicken
- Serverseitige Überprüfung
session_start();
if (empty($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$.ajaxSetup({
headers : {
'CsrfToken': $('meta[name="csrf-token"]').attr('content')
}
});
session_start();
if (empty($_SESSION['csrf_token'])) {
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
header('Content-Type: application/json');
$headers = apache_request_headers();
if (isset($headers['CsrfToken'])) {
if ($headers['CsrfToken'] !== $_SESSION['csrf_token']) {
exit(json_encode(['error' => 'Wrong CSRF token.']));
}
} else {
exit(json_encode(['error' => 'No CSRF token.']));
}
Quelle: Stackoverflow
Timeline-Chart mit Sencha
Email-Adressen hexacodieren
// JavaScript Document
function encode_now(formfield)
{
toEncode = formfield.email_address.value;
encodedAddress = "";
for( ii = 0; ii < toEncode.length; ii++)
{
encodedAddress = encodedAddress +"&#" + toEncode.charCodeAt(ii) + ";";
}
completeEmailAddressCode = '' + encodedAddress + '';
formfield.encoded_email_address.value = completeEmailAddressCode;
}