CryptoJS与PHP实现AJAX请求加解密：代码故障排查及需求实现

原代码无法运行的核心问题有三个：请求参数键名不匹配、CryptoJS与PHP的AES加密/解密逻辑不兼容、AJAX未处理响应及页面展示。以下是具体修正：

1. 前端代码修正 #

• 对齐AJAX请求参数键名与PHP接收字段
• 补充请求URL并添加响应处理逻辑，实现页面展示解密结果

// 构造待加密数据
const data = {
    test: $("#testCode").val()
};

// 执行加密
const encryptedData = encryptData(data, 'test');
console.log(encryptedData);

// 发送加密请求
$.ajax({
    method: "POST",
    url: "./your-php-file.php", // 替换为实际PHP文件路径，同文件可留空
    data: {
        encryptedData: encryptedData // 修正参数键名，与PHP接收的字段一致
    },
    success: function(res) {
        // 将解密结果展示到页面（假设页面有id为result的容器）
        $("#result").text(JSON.stringify(res.decryptedData));
    },
    error: function(xhr, status, err) {
        console.error("请求失败:", err);
    }
});

// CryptoJS AES加密函数
function encryptData(data, key) {
    const encrypted = CryptoJS.AES.encrypt(JSON.stringify(data), key);
    return encrypted.toString();
}

2. PHP代码修正 #

CryptoJS默认会生成随机盐，并用PBKDF2算法从密钥和盐生成加密所需的密钥/IV，PHP需要解析加密字符串中的盐，再用相同逻辑生成密钥才能解密：

<?php
// 校验请求参数
if (!isset($_POST['encryptedData'])) {
    echo json_encode(['error' => '缺少加密数据']);
    exit;
}

$encryptedData = $_POST['encryptedData'];
$password = "test";

// 解析CryptoJS加密格式：Salted__ + 8字节盐 + 密文
$encryptedBytes = base64_decode($encryptedData);
if (substr($encryptedBytes, 0, 8) !== "Salted__") {
    echo json_encode(['error' => '无效的加密数据']);
    exit;
}

$salt = substr($encryptedBytes, 8, 8);
$ciphertext = substr($encryptedBytes, 16);

// 用PBKDF2生成密钥和IV（匹配CryptoJS默认配置：1000次迭代、SHA1哈希）
$keyIvRaw = hash_pbkdf2('sha1', $password, $salt, 1000, 48, true);
$key = substr($keyIvRaw, 0, 32); // AES-256需要32字节密钥
$iv = substr($keyIvRaw, 32, 16); // CBC模式需要16字节IV

// 解密并解析JSON
$decryptedStr = openssl_decrypt($ciphertext, 'aes-256-cbc', $key, OPENSSL_RAW_DATA, $iv);
$decryptedData = json_decode($decryptedStr, true);

echo json_encode(['decryptedData' => $decryptedData]);
?>

3. 页面基础结构 #

在HTML中添加输入、触发按钮和结果展示区域：

<input type="text" id="testCode" placeholder="输入测试内容">
<button onclick="sendEncryptedRequest()">发送加密请求</button>
<div id="result"></div>

<!-- 引入依赖库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

关键注意事项 #

• 确保前后端密钥完全一致，生产环境建议使用复杂密钥并避免硬编码
• 生产环境需添加CSRF防护、输入校验等安全措施
• 可将依赖库下载到本地部署，避免依赖外部CDN

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