Dicken/dickendock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

DevTools: Key-Gen mit Verwendungsbeispielen, Base64- und JWT-Platzhalter entfernt

Browse Source
This commit is contained in:
Dicken
2026-06-01 10:44:41 +02:00
parent 0e2a2818fd
commit 0536df82e7
1 changed files with 37 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/tools/devtools.jsx
View File

@@ -789,24 +789,42 @@ function DatetimeRechner({ mobile }) {
// ─────────────────────────────────────────────────────────────── Key-Gen ── // ─────────────────────────────────────────────────────────────── Key-Gen ──
const KEY_TYPES = [ const KEY_TYPES = [
{ id: 'laravel', label: 'Laravel APP_KEY', desc: 'base64, 32 Byte', gen: () => 'base64:' + btoa(String.fromCharCode(...crypto.getRandomValues(new Uint8Array(32)))) }, { id: 'laravel', label: 'Laravel APP_KEY', desc: 'base64, 32 Byte', example: 'APP_KEY= in .env bei Laravel-Projekten – verschlüsselt Sessions & Daten',
{ id: 'jwt_hs256', label: 'JWT Secret (HS256)', desc: '64 Byte hex', gen: () => hex(64) }, gen: () => 'base64:' + btoa(String.fromCharCode(...crypto.getRandomValues(new Uint8Array(32)))) },
{ id: 'jwt_hs512', label: 'JWT Secret (HS512)', desc: '128 Byte hex', gen: () => hex(128) }, { id: 'jwt_hs256', label: 'JWT Secret (HS256)', desc: '64 Byte hex', example: 'JWT_SECRET= in Node.js/Express-APIs – signiert Login-Tokens',
{ id: 'aes256', label: 'AES-256 Key', desc: '32 Byte base64', gen: () => b64(32) }, gen: () => hex(64) },
{ id: 'aes128', label: 'AES-128 Key', desc: '16 Byte base64', gen: () => b64(16) }, { id: 'jwt_hs512', label: 'JWT Secret (HS512)', desc: '128 Byte hex', example: 'Wie HS256, aber stärker – für sicherheitskritische APIs empfohlen',
{ id: 'secret32', label: 'Generic Secret (32B)', desc: '32 Byte hex', gen: () => hex(32) }, gen: () => hex(128) },
{ id: 'secret64', label: 'Generic Secret (64B)', desc: '64 Byte hex', gen: () => hex(64) }, { id: 'aes256', label: 'AES-256 Key', desc: '32 Byte base64', example: 'Symmetrische Verschlüsselung von Dateien oder Datenbank-Feldern',
{ id: 'passwd', label: 'Passwort (stark)', desc: '20 Zeichen, alle Typen', gen: () => genPasswd(20) }, gen: () => b64(32) },
{ id: 'passwd16', label: 'Passwort (kurz)', desc: '16 Zeichen, alle Typen', gen: () => genPasswd(16) }, { id: 'aes128', label: 'AES-128 Key', desc: '16 Byte base64', example: 'Leichtgewichtige Verschlüsselung, z.B. für eingebettete Systeme',
{ id: 'uuid', label: 'UUID v4', desc: 'zufällige UUID', gen: () => crypto.randomUUID() }, gen: () => b64(16) },
{ id: 'nanoid', label: 'NanoID (21)', desc: 'URL-safe, 21 Zeichen', gen: () => nanoid(21) }, { id: 'secret32', label: 'Generic Secret (32B)', desc: '32 Byte hex', example: 'NEXTAUTH_SECRET=, SESSION_SECRET= oder ähnliche Umgebungsvariablen',
{ id: 'nanoid32', label: 'NanoID (32)', desc: 'URL-safe, 32 Zeichen', gen: () => nanoid(32) }, gen: () => hex(32) },
{ id: 'docker_pw', label: 'DB-Passwort (Docker)', desc: '24 Zeichen, alnum+sonder',gen: () => genPasswd(24) }, { id: 'secret64', label: 'Generic Secret (64B)', desc: '64 Byte hex', example: 'Webhook-Signaturen (z.B. GitHub, Stripe) oder API-Signing-Keys',
{ id: 'hex16', label: 'Hex Token (16B)', desc: '32 Hex-Zeichen', gen: () => hex(16) }, gen: () => hex(64) },
{ id: 'hex32', label: 'Hex Token (32B)', desc: '64 Hex-Zeichen', gen: () => hex(32) }, { id: 'passwd', label: 'Passwort (stark)', desc: '20 Zeichen, alle Typen', example: 'Admin-Passwörter, Service-Accounts oder initiale DB-Root-Passwörter',
{ id: 'b64_32', label: 'Base64 Token (32B)', desc: '32 Byte base64', gen: () => b64(32) }, gen: () => genPasswd(20) },
{ id: 'b64_64', label: 'Base64 Token (64B)', desc: '64 Byte base64', gen: () => b64(64) }, { id: 'passwd16', label: 'Passwort (kurz)', desc: '16 Zeichen, alle Typen', example: 'Nutzer-Initialpasswörter oder Zugänge mit Zeichenlimit',
{ id: 'b64url_32', label: 'Base64url Token (32B)', desc: '32 Byte base64url', gen: () => b64url(32) }, gen: () => genPasswd(16) },
{ id: 'uuid', label: 'UUID v4', desc: 'zufällige UUID', example: 'Eindeutige IDs für Datenbank-Einträge, Dateinamen oder API-Ressourcen',
gen: () => crypto.randomUUID() },
{ id: 'nanoid', label: 'NanoID (21)', desc: 'URL-safe, 21 Zeichen', example: 'Kurze IDs in URLs (z.B. share-Links) – kompakter als UUID',
gen: () => nanoid(21) },
{ id: 'nanoid32', label: 'NanoID (32)', desc: 'URL-safe, 32 Zeichen', example: 'Session-IDs oder Token in URLs ohne Sonderzeichen-Probleme',
gen: () => nanoid(32) },
{ id: 'docker_pw', label: 'DB-Passwort (Docker)', desc: '24 Zeichen, alnum+sonder', example: 'MYSQL_ROOT_PASSWORD=, POSTGRES_PASSWORD= in docker-compose.yml',
gen: () => genPasswd(24) },
{ id: 'hex16', label: 'Hex Token (16B)', desc: '32 Hex-Zeichen', example: 'Kurze API-Keys, CSRF-Tokens oder Einmal-Codes',
gen: () => hex(16) },
{ id: 'hex32', label: 'Hex Token (32B)', desc: '64 Hex-Zeichen', example: 'Passwort-Reset-Links, E-Mail-Verifikations-Tokens',
gen: () => hex(32) },
{ id: 'b64_32', label: 'Base64 Token (32B)', desc: '32 Byte base64', example: 'Cookie-Signing-Keys oder kompakte Secrets in YAML/JSON-Configs',
gen: () => b64(32) },
{ id: 'b64_64', label: 'Base64 Token (64B)', desc: '64 Byte base64', example: 'VAPID-Keys (Web Push), OAuth Client Secrets',
gen: () => b64(64) },
{ id: 'b64url_32', label: 'Base64url Token (32B)', desc: '32 Byte base64url', example: 'OAuth2 state/code_verifier, JWT-kompatible Token ohne Padding',
gen: () => b64url(32) },
]; ];
function hex(bytes) { function hex(bytes) {
@@ -885,6 +903,7 @@ function KeyGen({ toast }) {
<div style={{flex:1,minWidth:0}}> <div style={{flex:1,minWidth:0}}>
<span style={{color:'#fff',fontFamily:'monospace',fontSize:12,fontWeight:600}}>{kt.label}</span> <span style={{color:'#fff',fontFamily:'monospace',fontSize:12,fontWeight:600}}>{kt.label}</span>
<span style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:10,marginLeft:8}}>{kt.desc}</span> <span style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:10,marginLeft:8}}>{kt.desc}</span>
<div style={{color:'rgba(255,255,255,0.45)',fontSize:11,marginTop:2,fontFamily:'sans-serif'}}>{kt.example}</div>
</div> </div>
<button style={{...S.btn('#4ecdc4',false), fontSize:10, padding:'4px 12px', flexShrink:0}} <button style={{...S.btn('#4ecdc4',false), fontSize:10, padding:'4px 12px', flexShrink:0}}
onClick={()=>generate(kt.id)}>⟳ Neu</button> onClick={()=>generate(kt.id)}>⟳ Neu</button>
@@ -926,10 +945,8 @@ const TOOL_DEFS = [
components:{explain:CronExplainer,build:CronBuilder}}, components:{explain:CronExplainer,build:CronBuilder}},
{id:'elektro', label:'⚡ Elektro', desc:'Ohm, Leistung, Kosten, Widerstände', ready:true, component:ElektroRechner}, {id:'elektro', label:'⚡ Elektro', desc:'Ohm, Leistung, Kosten, Widerstände', ready:true, component:ElektroRechner},
{id:'json', label:'{ } JSON', desc:'JSON formatieren', ready:false}, {id:'json', label:'{ } JSON', desc:'JSON formatieren', ready:false},
{id:'base64', label:'🔐 Base64', desc:'Text ↔ Base64', ready:false},
{id:'regex', label:'🔍 Regex', desc:'Regex testen', ready:false}, {id:'regex', label:'🔍 Regex', desc:'Regex testen', ready:false},
{id:'diff', label:'± Text Diff', desc:'Texte vergleichen', ready:false}, {id:'diff', label:'± Text Diff', desc:'Texte vergleichen', ready:false},
{id:'jwt', label:'🔑 JWT', desc:'JWT dekodieren', ready:false},
{id:'datetime', label:'📅 Datetime', desc:'Zeiten umrechnen · Geburtstag · Differenz', ready:true, component:DatetimeRechner}, {id:'datetime', label:'📅 Datetime', desc:'Zeiten umrechnen · Geburtstag · Differenz', ready:true, component:DatetimeRechner},
{id:'keygen', label:'🔐 Key-Gen', desc:'Sichere Keys & Secrets generieren', ready:true, component:KeyGen}, {id:'keygen', label:'🔐 Key-Gen', desc:'Sichere Keys & Secrets generieren', ready:true, component:KeyGen},
]; ];