Code Obfuscator - Dreamcodes – Kostenlose Codeschnipsel, PHP Scripte, IT Tutorials, SEO, Geo & Webentwicklung

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 &ethische 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>
Dreamcodes

Zum Newsletter anmelden

Movies

TV Shows

Music

Celebrity

Scandals

Drama

Lifestyle

Health

Technology

Company
