我来帮你梳理并完善这个AES加密表单提交的实现，下面是完整的代码和说明：

第一个页面（加密提交页） #

这个页面包含表单，会在提交时对输入参数进行AES加密，再通过GET请求跳转至第二个页面：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Encrypt</title>
<!-- 注意：需下载CryptoJS库到本地后引入，避免外链依赖 -->
<script src="crypto-js.min.js"></script>
<script type="text/javascript">
/** AES文本加密函数 **/
function encText(plainText) {
    // 自定义盐值、密钥、初始化向量，需和解密端完全一致
    var salt = CryptoJS.enc.Utf8.parse('your-custom-salt');
    var key = CryptoJS.PBKDF2('your-secret-key-123', salt, { keySize: 256/32, iterations: 1000 });
    var iv = CryptoJS.enc.Utf8.parse('your-iv-value-16');
    var encrypted = CryptoJS.AES.encrypt(plainText, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    return encrypted.toString();
}

// 表单提交处理逻辑
function submitForm() {
    // 获取两个输入参数
    var param1 = document.getElementById('param1').value;
    var param2 = document.getElementById('param2').value;
    
    // 对参数分别加密
    var encryptedParam1 = encText(param1);
    var encryptedParam2 = encText(param2);
    
    // 编码加密参数并构造跳转URL
    window.location.href = 'second-page.html?p1=' + encodeURIComponent(encryptedParam1) + '&p2=' + encodeURIComponent(encryptedParam2);
    return false; // 阻止表单默认提交行为
}
</script>

<form onsubmit="return submitForm()">
    <label for="param1">参数1：</label>
    <input type="text" id="param1" required>
    <br>
    <label for="param2">参数2：</label>
    <input type="text" id="param2" required>
    <br>
    <button type="submit">提交并加密</button>
</form>

• 核心注意点：
  • 必须确保加密用的盐值、密钥、初始化向量和后续解密端完全一致，否则无法正常解密
  • 使用encodeURIComponent编码加密后的参数，避免URL特殊字符导致参数丢失

第二个页面（解密接收页） #

这个页面负责接收GET参数，解密后展示原始内容：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Decrypt</title>
<script src="crypto-js.min.js"></script>
<script type="text/javascript">
/** AES文本解密函数 **/
function decText(cipherText) {
    // 必须和加密端使用完全相同的盐值、密钥、初始化向量
    var salt = CryptoJS.enc.Utf8.parse('your-custom-salt');
    var key = CryptoJS.PBKDF2('your-secret-key-123', salt, { keySize: 256/32, iterations: 1000 });
    var iv = CryptoJS.enc.Utf8.parse('your-iv-value-16');
    var decrypted = CryptoJS.AES.decrypt(cipherText, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    return decrypted.toString(CryptoJS.enc.Utf8);
}

// 页面加载时自动解析并解密参数
window.onload = function() {
    var urlParams = new URLSearchParams(window.location.search);
    var encryptedParam1 = urlParams.get('p1');
    var encryptedParam2 = urlParams.get('p2');
    
    if (encryptedParam1 && encryptedParam2) {
        var decryptedParam1 = decText(encryptedParam1);
        var decryptedParam2 = decText(encryptedParam2);
        
        document.getElementById('result').innerHTML = `
            <p>解密后的参数1：<strong>${decryptedParam1}</strong></p>
            <p>解密后的参数2：<strong>${decryptedParam2}</strong></p>
        `;
    } else {
        document.getElementById('result').innerHTML = '<p>未接收到有效加密参数</p>';
    }
}
</script>

<div id="result"></div>

• 核心注意点：
  • 解密逻辑的加密配置必须和第一个页面完全匹配
  • 使用URLSearchParams解析GET参数，兼容性覆盖现代主流浏览器

内容的提问来源于stack exchange，提问作者alotronto