javascript - 使用用户提交的密码的 WebCrypto 字符串加密

Question

使用 JavaScript 和 WebCrypto API(没有任何外部库)，使用从用户提交的密码派生的 key 加密字符串的最佳方法是什么？

这是一些代码，其中 key 不是派生的，而是由 generatekey() 函数简单生成的。目标是加密字符串，然后对其进行解密以验证我们得到了原始字符串:

var secretmessage = "";
var password = "";
var key_object = null; 
var promise_key = null;
var encrypted_data = null;
var encrypt_promise = null;
var vector = window.crypto.getRandomValues(new Uint8Array(16));
var decrypt_promise = null;
var decrypted_data = null;

function encryptThenDecrypt() {
    secretmessage = document.getElementById("secretmessageField").value; // some string to encrypt

    promise_key = window.crypto.subtle.generateKey(
        {
            name: "AES-GCM",
            length: 128
        },
        false,
        ["encrypt", "decrypt"]
    );
    promise_key.then(function(key) {
        key_object = key;
        encrypt_data();
    });
    promise_key.catch = function(e) {
        alert("Error while generating key: " + e.message);
    }
}

function encrypt_data() {
    encrypt_promise = window.crypto.subtle.encrypt({name: "AES-GCM", iv: vector}, key_object, convertStringToArrayBuffer(secretmessage));
    encrypt_promise.then(
        function(result) {
            encrypted_data = new Uint8Array(result);
            decrypt_data();
        }, 
        function(e) {
            alert("Error while encrypting data: " + e.message);
        }
    );
}

function decrypt_data() {
    decrypt_promise = window.crypto.subtle.decrypt({name: "AES-GCM", iv: vector}, key_object, encrypted_data);

    decrypt_promise.then(
        function(result){
            decrypted_data = new Uint8Array(result);
            alert("Decrypted data: " + convertArrayBuffertoString(decrypted_data));
        },
        function(e) {
            alert("Error while decrypting data: " + e.message);
        }
    );
}

function convertStringToArrayBuffer(str) {
    var encoder = new TextEncoder("utf-8");
    return encoder.encode(str);
}   
function convertArrayBuffertoString(buffer) {
    var decoder = new TextDecoder("utf-8");
    return decoder.decode(buffer);
}

它适用于所有最新的浏览器。

现在我正在尝试修改 encryptThenDecrypt() 函数，以便从用户提交的密码中派生 key :

function encryptThenDecrypt() {
    secretmessage = document.getElementById("secretmessageField").value; // some string to encrypt
    password = document.getElementById("passwordField").value; // some user-chosen password

    promise_key = window.crypto.subtle.importKey(
        "raw",
        convertStringToArrayBuffer(password),
        {"name": "PBKDF2"},
        false,
        ["deriveKey"]
    );
    promise_key.then(function(importedPassword) {
        return window.crypto.subtle.deriveKey(
            {
                "name": "PBKDF2",
                "salt": convertStringToArrayBuffer("the salt is this random string"),
                "iterations": 500,
                "hash": "SHA-256"
            },
            importedPassword,
            {
                "name": "AES-GCM",
                "length": 128
            },
            false,
            ["encrypt", "decrypt"]
        );
    });
    promise_key.then(function(key) {
        key_object = key;
        encrypt_data();
    });
    promise_key.catch = function(e) {
        alert("Error while importing key: " + e.message);
    }
}

它失败了。错误信息是:

• Safari 11:CryptoKey 与 AlgorithmIdentifier 不匹配
• Firefox 54:底层对象不支持参数或操作
• Chromium 61: key.algorithm 与操作不匹配

一定是一些很容易修复的东西，但我看不出是什么。任何帮助将不胜感激。

Answer 1

您的代码中有一个小错误。与加密货币无关，只是 promise 。

当它们的 .then() 方法被调用时，Promise 不会更新它们的状态，而是返回一个新的 promise。看到在您的代码中，您正在丢弃对 key 派生函数的调用所产生的 promise 。然后在加密数据时，您将重用密码 promise ，而不是 key 。

您应该将 key 派生的结果 promise 保存在一个新变量中:

let promise_derived_key = promise_key.then(function(importedPassword) {
    return window.crypto.subtle.deriveKey(
        // [...]
    );
});
promise_derived_key.then(function(key) {
    // [...]

或将调用链接到 .then():

promise_key = window.crypto.subtle.importKey(
    // [...]
).then(function(importedPassword) {
    return window.crypto.subtle.deriveKey(
        // [...]
    );
});
promise_key.then(function(key) {
    // [...]

[working example on JSFiddle]

顺便说一句，您将希望使用比 500 多很多的 PBKDF2 迭代。( info )