cryptojs库加解密与易语言的AES加解密异常

Sanctuary · 发表于 3 天前

[mw_shl_code=javascript,true]<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件AES加密工具 - 支持二进制文件</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<style>
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
         background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
         min-height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 20px;
      }

      .container {
         width: 100%;
         max-width: 850px;
         background: rgba(255, 255, 255, 0.95);
         border-radius: 20px;
         box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
         overflow: hidden;
      }

      header {
         background: linear-gradient(to right, #4a00e0, #8e2de2);
         color: white;
         padding: 25px 30px;
         text-align: center;
      }

      h1 {
         font-size: 2.2rem;
         margin-bottom: 10px;
         font-weight: 600;
      }

      .subtitle {
         font-size: 1.1rem;
         opacity: 0.9;
      }

      .content {
         padding: 30px;
      }

      .upload-area {
         border: 3px dashed #8e2de2;
         border-radius: 15px;
         padding: 40px 20px;
         text-align: center;
         margin-bottom: 30px;
         transition: all 0.3s;
         background: rgba(142, 45, 226, 0.05);
         cursor: pointer;
      }

      .upload-area:hover, .upload-area.dragover {
         background: rgba(142, 45, 226, 0.1);
         transform: translateY(-5px);
      }

      .upload-icon {
         font-size: 60px;
         color: #8e2de2;
         margin-bottom: 15px;
      }

      .upload-text {
         font-size: 1.2rem;
         margin-bottom: 10px;
         color: #333;
      }

      .file-input {
         display: none;
      }

      .btn {
         display: inline-block;
         background: linear-gradient(to right, #4a00e0, #8e2de2);
         color: white;
         border: none;
         padding: 12px 30px;
         border-radius: 50px;
         font-size: 1rem;
         font-weight: 600;
         cursor: pointer;
         transition: all 0.3s;
         box-shadow: 0 5px 15px rgba(142, 45, 226, 0.3);
      }

      .btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 8px 20px rgba(142, 45, 226, 0.4);
      }

      .btn:active {
         transform: translateY(1px);
      }

      .btn:disabled {
         background: #cccccc;
         cursor: not-allowed;
         transform: none;
         box-shadow: none;
      }

      .form-group {
         margin-bottom: 25px;
      }

      label {
         display: block;
         margin-bottom: 10px;
         font-weight: 600;
         color: #444;
      }

      input[type="password"], input[type="text"] {
         width: 100%;
         padding: 15px;
         border: 2px solid #ddd;
         border-radius: 10px;
         font-size: 1rem;
         transition: border 0.3s;
      }

      input[type="password"]:focus, input[type="text"]:focus {
         border-color: #8e2de2;
         outline: none;
      }

      .radio-group {
         display: flex;
         gap: 20px;
         margin-top: 10px;
      }

      .radio-option {
         display: flex;
         align-items: center;
         gap: 8px;
         cursor: pointer;
      }

      .radio-option input {
         cursor: pointer;
      }

      .file-info {
         background: #f0f4ff;
         border-radius: 10px;
         padding: 15px;
         margin-bottom: 20px;
         display: none;
      }

      .file-info.active {
         display: block;
      }

      .file-name {
         font-weight: 600;
         margin-bottom: 5px;
         color: #4a00e0;
      }

      .file-size {
         color: #666;
         font-size: 0.9rem;
      }

      .file-type {
         color: #666;
         font-size: 0.9rem;
      }

      .action-buttons {
         display: flex;
         gap: 15px;
         margin-top: 20px;
      }

      .progress-container {
         margin-top: 20px;
         display: none;
      }

      .progress-bar {
         height: 10px;
         background: #e0e0e0;
         border-radius: 5px;
         overflow: hidden;
      }

      .progress {
         height: 100%;
         background: linear-gradient(to right, #4a00e0, #8e2de2);
         width: 0%;
         transition: width 0.3s;
      }

      .progress-text {
         text-align: center;
         margin-top: 10px;
         font-weight: 600;
         color: #4a00e0;
      }

      .result {
         margin-top: 20px;
         padding: 20px;
         border-radius: 10px;
         background: #e8f5e9;
         border: 2px solid #4caf50;
         display: none;
      }

      .result.error {
         background: #ffebee;
         border-color: #f44336;
      }

      .result.active {
         display: block;
      }

      .download-btn {
         margin-top: 15px;
      }

      .info-box {
         background: #e3f2fd;
         border-radius: 10px;
         padding: 15px;
         margin-top: 20px;
         border-left: 4px solid #2196f3;
      }

      .info-title {
         font-weight: 600;
         margin-bottom: 8px;
         color: #1976d2;
      }

      .info-content {
         font-size: 0.9rem;
         color: #555;
         line-height: 1.5;
      }

      footer {
         text-align: center;
         padding: 20px;
         color: #666;
         font-size: 0.9rem;
         border-top: 1px solid #eee;
      }

      @media (max-width: 600px) {
         .container {
            border-radius: 10px;
         }

         h1 {
            font-size: 1.8rem;
         }

         .content {
            padding: 20px;
         }

         .action-buttons {
            flex-direction: column;
         }
      }
</style>
</head>
<body>
<div class="container">
      <header>
         <h1>文件AES加密工具</h1>
         <p class="subtitle">支持二进制文件的安全加密/解密</p>
      </header>

      <div class="content">
         <div class="upload-area" id="uploadArea">
            <div class="upload-icon">

Sanctuary · 发表于前天 09:01

已经解决啦后面发现是cryptojs的密钥派生默认用的sha1，易语言用的sha256，改过来就好了

Sanctuary · 发表于 3 天前

try {
                     const reader = new FileReader();

                     reader.onload = function(e) {
                        try {
                              const fileData = e.target.result;

                              // 模拟进度更新
                              updateProgress(30);

                              setTimeout(() => {
                                 let resultData;
                                 let resultFilename;
                                 let resultMimeType;

                                 // 直接使用密码作为密钥（与易语言模块保持一致）
                                 const key = password.value;

                                 // 准备IV
                                 const iv = CryptoJS.enc.Utf8.parse(ivInput.value);

                                 if (operation === 'encrypt') {
                                    // 加密文件
                                    const wordArray = CryptoJS.lib.WordArray.create(fileData);
                                    const encrypted = CryptoJS.AES.encrypt(wordArray, key, {
                                          iv: iv,
                                          mode: CryptoJS.mode.CBC,
                                          padding: CryptoJS.pad.Pkcs7
                                    });

                                    // 获取加密后的数据
                                    resultData = base64ToArrayBuffer(encrypted.toString());
                                    resultFilename = selectedFile.name + '.encrypted';
                                    resultMimeType = 'application/octet-stream';
                                    updateProgress(100);
                                    showResult('文件加密成功！', resultData, resultFilename, resultMimeType);
                                 } else {
                                    // 解密文件
                                    try {
                                          // 将文件内容转换为Base64字符串
                                          const base64Data = arrayBufferToBase64(fileData);
                                          const decrypted = CryptoJS.AES.decrypt(base64Data, key, {
                                             iv: iv,
                                             mode: CryptoJS.mode.CBC,
                                             padding: CryptoJS.pad.Pkcs7
                                          });

                                          // 将解密后的WordArray转换为ArrayBuffer
                                          resultData = wordArrayToArrayBuffer(decrypted);

                                          // 检查解密是否成功
                                          if (!resultData || resultData.byteLength === 0) {
                                             throw new Error('解密失败，请检查密码或IV是否正确');
                                          }

                                          // 尝试从加密文件名中提取原始文件名
                                          resultFilename = selectedFile.name.replace(/\.encrypted$/, '') || 'decrypted_file';
                                          resultMimeType = 'application/octet-stream';
                                          updateProgress(100);
                                          showResult('文件解密成功！', resultData, resultFilename, resultMimeType);
                                    } catch (error) {
                                          showError('解密失败：' + error.message);
                                    }
                                 }
                              }, 500);

                        } catch (error) {
                              showError('处理文件时出错：' + error.message);
                        }
                     };

                     reader.onerror = function() {
                        showError('读取文件失败');
                     };

                     // 读取为ArrayBuffer以正确处理二进制文件
                     reader.readAsArrayBuffer(selectedFile);

                  } catch (error) {
                     showError('处理文件时出错：' + error.message);
                  }
            }, 100);
         }

         // 将ArrayBuffer转换为Base64字符串
         function arrayBufferToBase64(buffer) {
            let binary = '';
            const bytes = new Uint8Array(buffer);
            const len = bytes.byteLength;
            for (let i = 0; i < len; i++) {
                  binary += String.fromCharCode(bytes[i]);
            }
            return window.btoa(binary);
         }

         // 将Base64字符串转换为ArrayBuffer
         function base64ToArrayBuffer(base64) {
            const binaryString = window.atob(base64);
            const len = binaryString.length;
            const bytes = new Uint8Array(len);
            for (let i = 0; i < len; i++) {
                  bytes[i] = binaryString.charCodeAt(i);
            }
            return bytes.buffer;
         }

         // 将CryptoJS WordArray转换为ArrayBuffer
         function wordArrayToArrayBuffer(wordArray) {
            const words = wordArray.words;
            const sigBytes = wordArray.sigBytes;
            const u8 = new Uint8Array(sigBytes);

            for (let i = 0; i < sigBytes; i++) {
                  u8[i] = (words[i >>> 2] >>> (24 - (i % 4) * 8)) & 0xff;
            }

            return u8.buffer;
         }这个是JS

Sanctuary · 发表于 3 天前

让AI写的一个二进制文件的加密解密JS，想根据JS端写个易语言端的加密解密，结果每个端只能解密自己加密出来的文件，另一个端加密的解密就提示错误，文本文件就提示解密后的字节集长度为0.已确认KEY和IV都是一致的，但就是一直报错。有没有老哥救救

Sanctuary · 发表于 3 天前

让AI写的一个二进制文件的加密解密JS，想根据JS端写个易语言端的加密解密，结果每个端只能解密自己加密出来的文件，另一个端加密的解密就提示错误，文本文件就提示解密后的字节集长度为0.已确认KEY和IV都是一致的，但就是一直报错。有没有老哥救救

Sanctuary · 发表于 3 天前

我服了狂吞我代码

qcby · 发表于前天 00:42

CryptoJS加密模块源码开源
https://bbs.ijingyi.com/forum.php?mod=viewthread&tid=14001521
(出处: 精易论坛)

		自动登录	找回密码
密码			注册

[易语言] cryptojs库加解密与易语言的AES加解密异常

精易论坛 - 有你更精彩 /2