使用用户提交的密码进行WebCrypto字符串加密

Question

使用JavaScript和WebCrypto API（不使用任何外部库），使用从用户提交的密码派生的密钥对字符串进行加密的最佳方法是什么？

这是一些代码，其中键不是派生的，而是仅由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()函数，以便从用户提交的密码中获取密钥：

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 doesn't match AlgorithmIdentifier
• Firefox 54： A parameter or an operation is not supported by the underlying object
• 铬61： key.algorithm does not match that of operation

必须是易于修复的东西，但是我看不到。任何帮助将不胜感激。

Answer 1

您的代码中有一个小错误。真的与加密无关，只是承诺。

Promises do not update their state when their .then() method is called, they return a new promise instead. See that in your code you are discarding the resulting promise from the call to the key derivation function. Then when encrypting the data, you are reusing the password promise, not the key.

You should either save the resulting promise from the key derivation in a new variable:

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

or chain the calls to .then():

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

[working example on JSFiddle]

By the way, you will want to use a lot more PBKDF2 iterations than 500. (info)