Webleb - Code-Snippets - Online-AES-Datei- und Textverschlüsselung

HTML CSS JS

<!DOCTYPE html>
<html>
<head>
    <title>Encryptor</title>
    <style>
        body { font-family: monospace; max-width: 800px; margin: 20px auto; padding: 20px; color: #000; line-height: 1.2; }
        .row { display: flex; gap: 20px; }
        .box { border: 2px solid #000; padding: 20px; flex: 1; }
        label { display: block; margin: 15px 0 2px; font-size: 11px; font-weight: bold; }
        input, textarea { width: 100%; padding: 8px; border: 1px solid #000; box-sizing: border-box; font-family: monospace; }
        .dz { border: 1px dashed #000; padding: 15px; text-align: center; margin: 10px 0; cursor: pointer; font-size: 11px; }
        .bar-c { height: 4px; background: #eee; margin: 10px 0; display: none; }
        .bar { height: 100%; background: #000; width: 0%; transition: width 0.3s; }
        button { width: 100%; padding: 12px; cursor: pointer; margin-top: 10px; background: #000; color: #fff; border: none; font-weight: bold; text-transform: uppercase; }
        button:hover { background: #333; }
        .copy-btn { padding: 4px; font-size: 10px; margin-top: 5px; width: auto; display: inline-block; }
        .clear-btn { background: #fff; color: #000; border: 2px solid #000; margin-top: 20px; width: 100%; }
        h1 { text-align: center; font-size: 28px; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 30px; }
    </style>
</head>
<body>

<h1>ENCRYPTOR</h1>

<div class="row">
        <div class="box">
            <strong>LOCK</strong>
            <label>KEY</label>
            <input type="password" id="p1">
            <label>TEXT</label>
            <input id="t1" rows="4"/>
            <div class="dz" id="d1">DRAG FILE OR CLICK<input type="file" id="f1" hidden></div>
            <div class="bar-c" id="c1"><div class="bar" id="b1"></div></div>
            <button onclick="run('e')">RUN</button>
            <label>RESULT</label>
            <input id="o1" readonly rows="4"/>
            <button class="copy-btn" onclick="cp('o1')">COPY</button>
        </div>

<div class="box">
            <strong>UNLOCK</strong>
            <label>KEY</label>
            <input type="password" id="p2">
            <label>TEXT</label>
            <input id="t2" rows="4"/>
            <div class="dz" id="d2">DRAG .ENC FILE OR CLICK<input type="file" id="f2" hidden></div>
            <div class="bar-c" id="c2"><div class="bar" id="b2"></div></div>
            <button onclick="run('d')">RUN</button>
            <label>RESULT</label>
            <input id="o2" readonly rows="4"/>
            <button class="copy-btn" onclick="cp('o2')">COPY</button>
        </div>
    </div>

<button class="clear-btn" onclick="clearAll()">CLEAR ALL</button>

function cp(id) {
            const t = document.getElementById(id);
            t.select();
            navigator.clipboard.writeText(t.value);
        }

function clearAll() {
            document.querySelectorAll('input, textarea').forEach(i => i.value = '');
            document.querySelectorAll('input[type="file"]').forEach(i => i.value = '');
            document.getElementById('d1').innerText = 'DRAG FILE OR CLICK';
            document.getElementById('d2').innerText = 'DRAG .ENC FILE OR CLICK';
        }

async function getKey(pw, salt) {
            const b = await crypto.subtle.importKey("raw", new TextEncoder().encode(pw), "PBKDF2", false, ["deriveKey"]);
            return crypto.subtle.deriveKey({ name: "PBKDF2", salt, iterations: 600000, hash: "SHA-256" }, b, { name: "AES-GCM", length: 256 }, false, ["encrypt", "decrypt"]);
        }

async function run(m) {
            const pw = document.getElementById(m === 'e' ? 'p1' : 'p2').value;
            const fileInput = document.getElementById(m === 'e' ? 'f1' : 'f2');
            const file = fileInput.files[0];
            const bar = document.getElementById(m === 'e' ? 'b1' : 'b2'), cont = document.getElementById(m === 'e' ? 'c1' : 'c2');
            if (!pw) return alert("KEY REQUIRED");

cont.style.display = "block"; bar.style.width = "50%";
            try {
                if (file) {
                    const r = new FileReader();
                    r.onload = async () => {
                        const buf = r.result;
                        if (m === 'e') {
                            const s = crypto.getRandomValues(new Uint8Array(16)), iv = crypto.getRandomValues(new Uint8Array(12));
                            const k = await getKey(pw, s), enc = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, k, buf);
                            dl(new Blob([s, iv, enc]), file.name + ".enc");
                        } else {
                            const buf8 = new Uint8Array(buf), s = buf8.slice(0, 16), iv = buf8.slice(16, 28);
                            const k = await getKey(pw, s), dec = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, k, buf8.slice(28));
                            dl(new Blob([dec]), file.name.replace(".enc", ""));
                        }
                        bar.style.width = "100%"; setTimeout(() => cont.style.display = "none", 500);
                    };
                    r.readAsArrayBuffer(file);
                } else {
                    const txt = document.getElementById(m === 'e' ? 't1' : 't2').value, out = document.getElementById(m === 'e' ? 'o1' : 'o2');
                    if (m === 'e') {
                        const s = crypto.getRandomValues(new Uint8Array(16)), iv = crypto.getRandomValues(new Uint8Array(12));
                        const k = await getKey(pw, s), enc = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, k, new TextEncoder().encode(txt));
                        const res = new Uint8Array(16 + 12 + enc.byteLength);
                        res.set(s, 0); res.set(iv, 16); res.set(new Uint8Array(enc), 28);
                        out.value = btoa(String.fromCharCode(...res));
                    } else {
                        const raw = new Uint8Array(atob(txt).split("").map(c => c.charCodeAt(0)));
                        const k = await getKey(pw, raw.slice(0, 16)), dec = await crypto.subtle.decrypt({ name: "AES-GCM", iv: raw.slice(16, 28) }, k, raw.slice(28));
                        out.value = new TextDecoder().decode(dec);
                    }
                    bar.style.width = "100%"; setTimeout(() => cont.style.display = "none", 500);
                }
            } catch (e) { alert("ERROR"); cont.style.display = "none"; }
        }
        function dl(b, n) { const a = document.createElement("a"); a.href = URL.createObjectURL(b); a.download = n; a.click(); }
    </script>
</body>
</html>

Preview

Open Advanced Editor

HTML CSS JS

<h1>ENCRYPTOR</h1>

<button class="clear-btn" onclick="clearAll()">CLEAR ALL</button>

function cp(id) {
            const t = document.getElementById(id);
            t.select();
            navigator.clipboard.writeText(t.value);
        }

Preview

Validating your code, please wait...