Chiffreur de fichiers et de textes AES en ligne

24 TheBotAtRedstone

Ouvrir dans l'éditeur Video Publiez votre code

Chiffreur de fichiers et de textes AES en ligne

Recommandé

20 September 2025

Démo de feux d'artifice animés CSS Lucioles Tournesol

3 October 2025

Exemple d'animation de réflexion CSS

7 August 2025

Exemple de pied de page et d'en-tête HTML

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>

Recommandé

Démo de feux d'artifice animés CSS Lucioles Tournesol

Exemple d'animation de réflexion CSS

Exemple de pied de page et d'en-tête HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS