使用用户提交的密码的 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);
    }
}

失败了。错误消息是：

野生动物园 11：CryptoKey doesn't match AlgorithmIdentifier
火狐 54：A parameter or an operation is not supported by the underlying object
铬 61：key.algorithm does not match that of operation

一定是一些简单的修复方法，但我看不出是什么。任何帮助将不胜感激。

Answer 1

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

Promise 在 .then() 方法被调用时不会更新它们的状态，而是 return 一个新的 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)

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

WebCrypto string encryption using user-submitted password

javascript

string

encryption

passwords

webcrypto-api