master

分支 (1)

管理

管理

master

myweb
/
wasm
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加解密网站</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/argon2-browser@1.18.0/dist/argon2-bundled.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.7/base64.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row text-center">
            <h1 class="h1">加解密网站</h1>
        </div>
        <div class="row">
            <h4 class="h4 form-label" for="password">密码</h4>
            <textarea id="password" class="form-control" rows="8"></textarea>
        </div>
        <div class="row"><br></div>
        <div class="row">
            <h4 class="h4 form-label" for="content">待处理内容</h4>
            <textarea id="content" class="form-control" rows="8"></textarea>
        </div>
        <div class="row"><br></div>
        <div class="row">
            <div class="btn-group">
                <div class="col-auto">
                    <div class="btn btn-primary" id="encrypt">加密</div>
                </div>
                <div class="col-auto">
                    <div class="btn btn-info" id="decrypt">解密</div>
                </div>
            </div>
        </div>
        <div class="row">
            <p>加解密全在本地进行</p>
            <p>输入框可从右下角点中拖动变大变小</p>
            <p>js重写的新版本不兼容之前用go写的版本，因为js的argon2库不支持不加salt哈希，旧版在<a href="/old.html">old</a></p>
            <button id="download" class="btn btn-primary">安卓APP版下载</button>
        </div>
    </div>
</body>
<script>
    async function sha256(message) {
        // 将字符串转换为 Uint8Array
        const encoder = new TextEncoder();
        const data = encoder.encode(message);

        // 使用 Web Crypto API 计算 SHA-256 哈希
        const hashBuffer = await crypto.subtle.digest('SHA-256', data);
        return new Uint8Array(hashBuffer);
    }

    // genKey 使用argon2id生成aes256密钥
    async function genKey() {
        let password = $("#password").val();
        if (password == "") {
            alert("密码不能为空");
            throw "密码不能为空";
        }
        let salt = await sha256(password);
        let key = await argon2.hash({
            pass: password,
            salt: salt,
            time: 1,
            mem: 64 * 1024,
            hashLen: 32,
            parallelism: 4,
            type: argon2.ArgonType.Argon2id,
        })
            .then(res => {
                return res.hash.buffer;
            })
            .catch(err => {
                alert(err.message);
                throw err.message;
            })
        return await window.crypto.subtle.importKey("raw", key, "AES-GCM", false, ["encrypt", "decrypt"]);
    }

    async function encrypt(key) {
        let message = $("#content").val();
        if (message == "") {
            alert("待处理内容不能为空");
            throw "待处理内容不能为空";
        }
        const encoder = new TextEncoder();
        const uint8Array = encoder.encode(message); // 转换为 UTF-8 编码的 Uint8Array
        const arrayBuffer = uint8Array.buffer;  // 获取底层的 ArrayBuffer

        // 使用 AES-GCM 算法进行加密
        const iv = window.crypto.getRandomValues(new Uint8Array(12));
        let v = await window.crypto.subtle.encrypt(
            { name: "AES-GCM", iv: iv },
            key,
            arrayBuffer,
        );

        // 将iv和加密数据组合在一起
        let ret = new Uint8Array(iv.length + v.byteLength);
        ret.set(iv, 0);
        ret.set(new Uint8Array(v), iv.length);
        ret = Base64.fromUint8Array(ret);
        return ret;
    }

    async function decrypt(key) {
        let message = $("#content").val();
        if (message == "") {
            alert("待处理内容不能为空")
            throw "待处理内容不能为空"
        }

        // 将 Base64 编码的数据解码为 Uint8Array
        const encryptedBytes = Base64.toUint8Array(message);

        // 提取 IV 和加密数据
        const iv = encryptedBytes.slice(0, 12); // 前 12 字节是 IV
        const cipherText = encryptedBytes.slice(12); // 剩余部分是加密数据

        // 使用 AES-GCM 算法进行解密
        const decryptedBuffer = await window.crypto.subtle.decrypt(
            { name: "AES-GCM", iv: iv },
            key,
            cipherText
        );

        // 将解密后的 ArrayBuffer 转换为字符串
        const decoder = new TextDecoder();
        return decoder.decode(decryptedBuffer);
    }

    $(function () {
        $("#encrypt").click(async function () {
            let key = await genKey();
            let v = await encrypt(key);
            $("#content").val(v);
        });
        $("#decrypt").click(async function () {
            let key = await genKey();
            try {
                let v = await decrypt(key);
                $("#content").val(v);
            } catch (err) {
                if (typeof (err) == "string") {
                    return;
                }
                alert("解密失败 密码不正确或密文不完整");
                console.table(err);
            }
        });
        $("#download").click(function(){
            window.location.href += "/加解密.apk"
        })
    })
</script>

</html>