Diese Webseite bietet eine interaktive, deutschsprachige Oberfläche zum „Obfuskieren“ von JavaScript-Code. Sie richtet sich an Entwickler, Agenturen und Interessierte, die die Funktionsweise von Code-Transformationen kennenlernen möchten, ohne produktiven oder unsicheren Code zu verbreiten.
Hauptfunktionen:
- Live-Preview: Sofortige Vorschau der Ausgabe beim Tippen
- Mehrere Methoden: Base64, XOR, URI-Escape, einfache Formatierung
- Erweiterte Optionen: Code in IIFE einpacken, Minify, Header-Kommentar hinzufügen, Eval in Vorschau deaktivieren
- Copy & Download: Ausgabe als Text- oder JavaScript-Datei kopieren oder herunterladen
- Agentur-Look: Modernes, übersichtliches Design mit Glas-Effekten, Farbverläufen und flexibler Layoutstruktur
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Dreamcodes Code Obfuscator — Demo & Live-Preview</title>
<meta name="description" content="Demo: Code 'obfuscator' (Live-Preview) — sichere Demo-Methoden, Download & Copy. Kein Produktions-Obfuscator."/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#0b0b0f; --card:#0f1720aa; --muted:#94a3b8; --accent:#06b6d4; --glass: rgba(14,16,22,.6);
--radius:14px;
}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
body{background:linear-gradient(180deg,#071022 0%, #0b0b0f 100%);color:#e6eef6;display:flex;align-items:flex-start;justify-content:center;padding:28px;}
.wrap{width:1100px;max-width:100%;display:grid;grid-template-columns:420px 1fr;gap:20px}
header{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-bottom:6px}
.logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#7c3aed); display:flex;align-items:center;justify-content:center;font-weight:700;color:#021;box-shadow:0 6px 24px rgba(12,18,30,.6)}
h1{font-size:18px;margin:0}
p.lead{margin:0;color:var(--muted);font-size:13px}
.card{background:var(--glass);padding:18px;border-radius: var(--radius);box-shadow:0 10px 30px rgba(2,6,23,.6);border:1px solid rgba(255,255,255,.03)}
.left .card{height:820px;display:flex;flex-direction:column;gap:12px}
label{font-size:13px;color:#cfe8f4;font-weight:600;margin-bottom:6px;display:block}
textarea,input,select{width:100%;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:10px;color:inherit;font-size:13px;resize:vertical}
textarea{min-height:280px;max-height:420px}
.muted{color:var(--muted);font-size:13px}
.controls{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:linear-gradient(90deg,var(--accent),#7c3aed);color:#021;padding:9px 12px;border-radius:10px;border:none;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(12,18,30,.5)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--muted);font-weight:600}
.row{display:flex;gap:8px;align-items:center}
.small{font-size:12px;color:var(--muted)}
.right .card{min-height:820px;display:flex;flex-direction:column}
.preview{flex:1;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));padding:12px;border-radius:12px;overflow:auto;border:1px solid rgba(255,255,255,0.03)}
pre{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;background:transparent;margin:0;color:#cfe8f4}
.meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.option{display:flex;align-items:center;gap:8px}
.help{font-size:12px;color:var(--muted);margin-top:6px}
.split{display:flex;gap:8px}
.footer{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:var(--muted);font-size:13px}
a.brand{color:var(--muted);text-decoration:none;padding-left:18px;position:relative}
a.brand:before{content:"➜";position:absolute;left:0;color:var(--accent);transform-origin:6px 50%;transition:transform .28s ease}
details summary{cursor:pointer;outline:none}
details[open] summary:before{transform:rotate(90deg)}
/* responsive */
@media (max-width:980px){.wrap{grid-template-columns:1fr;}.left .card,.right .card{height:auto}}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo">QC</div>
<div>
<h1>Code Obfuscator — Demo & Live-Preview</h1>
<p class="lead">Deutsch · Agentur-Design · Live-Vorschau · sichere Demo-Methoden (keine produktive Obfuskation)</p>
</div>
</header>
<!-- left: input & options -->
<div class="left">
<div class="card">
<label for="src">Quellcode (JavaScript) — Eingabe</label>
<textarea id="src" placeholder="// Füge deinen JS-Code hier ein… (Demo)"></textarea>
<div class="meta">
<div class="option">
<label for="algo" class="small">Methode</label>
<select id="algo" title="Demo-Methode">
<option value="base64">Base64 (Demo, reversibel)</option>
<option value="xor">XOR-Encode (Demo, reversibel)</option>
<option value="uri">URI-Escape (Demo)</option>
<option value="noop">Keine (nur formatieren)</option>
</select>
</div>
<div class="option">
<label class="small">Live Preview</label>
<input id="live" type="checkbox" checked title="Live-Vorschau aktualisieren">
</div>
</div>
<div class="row" style="margin-top:10px">
<button id="run" class="btn">Verschlüsseln / Vorschau</button>
<button id="copy" class="btn ghost">Kopieren</button>
<button id="download-js" class="btn ghost">Als .js herunterladen</button>
<button id="download-txt" class="btn ghost">Als .txt herunterladen</button>
</div>
<div class="help">Hinweis: Diese Demo verwendet reversible / einfache Methoden zur Illustration. Für produktive Obfuskation <strong>verwende geprüfte Open-Source-Bibliotheken</strong> und beachte rechtliche ðische Vorgaben.</div>
<details style="margin-top:12px" open>
<summary style="font-weight:700;margin-bottom:8px">Erweiterte Optionen</summary>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px">
<label class="small"><input type="checkbox" id="wrapInIIFE"> In IIFE einpacken</label>
<label class="small"><input type="checkbox" id="minify"> Minimieren (einfach)</label>
<label class="small"><input type="checkbox" id="addHeader" checked> Header (Kommentar) hinzufügen</label>
<label class="small"><input type="checkbox" id="disableEval"> Eval in Preview deaktivieren (sicher)</label>
</div>
</details>
</div>
<div class="card" style="margin-top:12px">
<label class="small">Live-Logs</label>
<div id="logs" class="preview" style="height:120px; font-size:13px"></div>
</div>
</div>
<!-- right: preview & output -->
<div class="right">
<div class="card">
<label class="small">Live-Preview / Ausgabe</label>
<div id="out" class="preview"><pre id="outcode">// Ergebnis erscheint hier…</pre></div>
<div style="display:flex;gap:10px;margin-top:12px;align-items:center;justify-content:space-between">
<div class="small muted">Ausgabe-Länge: <span id="len">0</span> Zeichen</div>
<div style="display:flex;gap:8px">
<button id="format" class="btn ghost">Formatieren</button>
<button id="download-blob" class="btn">Download (Blob)</button>
</div>
</div>
<div style="margin-top:12px" class="help">
Live-Preview wertet den Code <strong>nicht</strong> automatisch aus, wenn "Eval deaktiviert" gesetzt ist. Zum lokalen Testen Download nutzen.
</div>
</div>
<div class="card" style="margin-top:12px">
<label class="small">Export & Formate</label>
<div class="split" style="margin-top:8px">
<button id="copyOut" class="btn">Ausgabe kopieren</button>
<button id="downloadMin" class="btn ghost">Minimiert herunterladen</button>
</div>
<div style="margin-top:12px">
<details>
<summary style="font-weight:700">Sichere Hinweise & Integration</summary>
<div class="muted" style="margin-top:8px">
Diese Demo ist nicht für das Verbergen von bösartigem Code gedacht. Für professionelle JS-Obfuskation prüfen Sie Bibliotheken wie <code>javascript-obfuscator</code> (open source) und führen Security-Audits durch.
</div>
</details>
</div>
</div>
</div>
<div class="footer">
<div><a href="https://dreamcodes.net" class="brand" target="_blank" rel="noopener noreferrer">© <span id="year"></span> Dreamcodes</a></div>
<div style="display:flex;gap:10px">
<small class="muted">Demo • Live-Preview • Agentur-UI</small>
</div>
</div>
</div>
<script>
/*
Demo Obfuscator — single file
- bietet nur reversible / harmlose demo-methoden
- kein produktiver Obfuscator
*/
(function(){
const el = id => document.getElementById(id);
const src = el('src'), out = el('outcode'), logs = el('logs'), algo = el('algo');
const runBtn = el('run'), copyBtn = el('copy'), downloadJs = el('download-js'), downloadTxt = el('download-txt');
const downloadBlob = el('download-blob'), copyOut = el('copyOut'), formatBtn = el('format');
const lenEl = el('len');
function log(...a){ const time=new Date().toLocaleTimeString(); logs.innerText = time + ' — ' + a.join(' ') + "\n" + logs.innerText; }
function safeBase64Encode(s){ try{ return btoa(unescape(encodeURIComponent(s))); }catch(e){ return btoa(s); } }
function safeBase64Decode(s){ try{ return decodeURIComponent(escape(atob(s))); }catch(e){ return atob(s); } }
function xorEncode(str, key=42){
let out=''; for(let i=0;i<str.length;i++){ out += String.fromCharCode(str.charCodeAt(i) ^ key); }
return out.split('').map(c=>('\\x'+('00'+c.charCodeAt(0).toString(16)).slice(-2))).join('');
}
function makeHeader(){
return "/* Demo-Obfuscator — Dreamcodes — " + new Date().toLocaleString() + " */\n";
}
function simpleMinify(s){
return s.replace(/\/\/.*$/mg,'').replace(/\n\s*/g,' ').replace(/\s{2,}/g,' ').trim();
}
function buildOutput(srcText){
const method = algo.value;
let outText = srcText;
if(el('addHeader').checked) outText = makeHeader() + outText;
if(el('wrapInIIFE').checked){
outText = "(function(){\n" + outText + "\n})();";
}
if(el('minify').checked){
outText = simpleMinify(outText);
}
if(method === 'base64'){
const encoded = safeBase64Encode(outText);
return `/* Base64 (Demo) */\n(function(){ const _=atob("${encoded}"); console.log("decoded demo"); /* eval disabled by default */ })();`;
}else if(method === 'xor'){
const x = xorEncode(outText, 77);
// simple runtime decoder (still demo)
return `/* XOR (Demo) */\n(function(){ const hex="${x}"; let s=''; for(let i=0;i<hex.length;i+=4){ s+=String.fromCharCode(parseInt(hex.substr(i+2,2),16)); } /* demo decode */ console.log("decoded demo"); })();`;
}else if(method === 'uri'){
return '/* URI escape (demo) */\n(function(){ const s=decodeURIComponent("' + encodeURIComponent(outText) + '"); console.log("decoded demo");})();';
}else{
return outText;
}
}
function updatePreview(){
try{
const s = src.value || '';
const result = buildOutput(s);
out.innerText = result;
lenEl.textContent = result.length;
log('Vorschau aktualisiert — Methode:', algo.value);
}catch(e){
out.innerText = "// Fehler beim Erstellen: " + e.message;
log("Fehler:", e.message);
}
}
// Live or manual
const liveCheckbox = el('live');
src.addEventListener('input', ()=>{ if(liveCheckbox.checked) debounceUpdate(); });
algo.addEventListener('change', ()=>debounceUpdate());
el('wrapInIIFE').addEventListener('change',()=>debounceUpdate());
el('minify').addEventListener('change',()=>debounceUpdate());
el('addHeader').addEventListener('change',()=>debounceUpdate());
let debounceTimer;
function debounceUpdate(){ clearTimeout(debounceTimer); debounceTimer = setTimeout(updatePreview, 250); }
runBtn.addEventListener('click', updatePreview);
copyBtn.addEventListener('click', ()=>{ navigator.clipboard.writeText(out.innerText).then(()=>log('Ausgabe kopiert')); });
copyOut.addEventListener('click', ()=>{ navigator.clipboard.writeText(out.innerText).then(()=>log('Ausgabe kopiert')); });
function download(filename, text){
const blob = new Blob([text], {type:'text/javascript;charset=utf-8'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a'); a.href=url; a.download=filename; document.body.appendChild(a); a.click(); a.remove();
setTimeout(()=>URL.revokeObjectURL(url), 5000);
}
downloadJs.addEventListener('click', ()=> download('obfuscated-demo.js', out.innerText));
downloadTxt.addEventListener('click', ()=> download('obfuscated-demo.txt', out.innerText));
downloadBlob.addEventListener('click', ()=> download('obfuscated-demo.blob.js', out.innerText));
formatBtn.addEventListener('click', ()=> { out.innerText = out.innerText.replace(/\s+$/mg,''); log('Formatierung angewendet'); });
// initial
updatePreview();
el('year').textContent = new Date().getFullYear();
// small keyboard shortcut: Ctrl+Enter to run
document.addEventListener('keydown', (e)=>{ if(e.ctrlKey && e.key === 'Enter'){ updatePreview(); e.preventDefault(); } });
})();
</script>
</body>
</html>
