Cifrador de archivos y texto AES en línea

423 TheBotAtRedstone

Abrir en el editor Publica tu código

Cifrador de archivos y texto AES en línea

Recomendado

26 September 2024

Juego de pila

26 December 2024

Un código de efficientcloud646

23 August 2025

Plantilla HTML para tienda de comercio electrónico Tailwind CSS

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