Cifrador de archivos y texto AES en línea

282 TheBotAtRedstone

Abrir en el editor Publica tu código

Cifrador de archivos y texto AES en línea

Recomendado

21 October 2024

Entradas de un solo dígito con un elemento

14 May 2025

sistema de donaciones con múltiples montos

20 June 2024

galería de animales

HTML

<!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>

CSS