Password encryption in Javascript

Question

I have this snippet of code that makes the sending of user and password to my web service done in Asp C#.

function validation(){


     var json =({ "emailUser": email, "passwordUser": passWord });
    console.log(json); 

    xhr.open("POST", "https://domain/api/compare", true);

    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(json);

    if(xhr.readyState == 4 && xhr.status == 200){
        var response1 = JSON.parse(xhr.responseText);

    }
}

How could the password be encrypted before sending ? What could I use to make this encryption ?

Answer 1

Once you are in the browser, you can use PBKDF2. Dr.Helsing’s reply is completely useless for the purpose of "protecting the password".

PBKDF2 is supported by Webcrypto in any modern browser.

---

In general it would be something like:

// Essa informação é a senha, que deve vim de um `<input>` por exemplo:
let password = new TextEncoder().encode("password");

// Essa informação deve vim do banco de dados (ou derivado de outra entrada constante, que não seja a própria senha), isto deve ser única por usuário/senha:
let salt = new Uint8Array([1,2,3,4,5,6,7,8,9,10]).buffer; 

// Essa informação é a dificuldade da derivação:
let iterations = 500000;
let algo = "SHA-512";


key = await window.crypto.subtle.importKey(
    "raw",
    password,
    "PBKDF2",
    false,
    ["deriveBits", "deriveKey"]
);

pbkdf2 = await  window.crypto.subtle.deriveKey(
    {"name":"PBKDF2", "salt": salt, "iterations": iterations, "hash": algo},
    key,
    {"name": "AES-CBC", "length": 256}, // Isso aqui é confusão do WebCrypto. Isso daqui é só para definir o tamanho final para 32bytes!
    true,
    ["encrypt", "decrypt"],
);

// Aqui você tem o resultado, a senha derivada:
result = await window.crypto.subtle.exportKey(
    "raw",
    pbkdf2,
);

This way, your server will only have access to the derivation result, but will never have access to the clear-text password. This seems to be what you search for.

However, as mentioned in the comments, you should still derive back into your server. So basically the final build would be:

1. User type "[email protected]"
2. A) The algorithm uses e-mail (or a HASH(seuemail)) as salt.
   B) The server responds to salt based on the email typed (query the database.
3. User derives password using PBKDF2 (above code).
4. The user sends the derived password (the result) to the server.
5. The server performs a new shunt (for example, Argon2(senha_do_passo_4)).
6. The server checks the generated password in step 5 against the information it has on the server.

---

There are some details you should take into consideration:

1. You should not store the result (the result or the pre-image of the second derivation) as plain text in a database (or any other media).
2. You should not reuse salt for multiple users.
3. You MUST use TLS/SSL in communication (this is up to a requirement for Webcrypto in some browsers).

---

Some things that might catch your attention, like "sending salt to the user".

This is not a problem. You should consider that the only way to know if the password is correct is by ordering the server (there is no way to do this offline. As a consequence, make a PBKDF2(senha, salt) or of senha is at least equal (where PBKDF2 has a higher computational cost) and measures against exhaustive search are equally applied to both cases. That is, reveal the salt from the email does not imply any problem other than using the "traditional login method".

---

You can also encrypt your password using AES/Salsa20/Chacha20, some services have recently started doing this (such as Facebook, Tiktok and I think that and Youtube too). Facebook uses Libsodium, which uses Salsa20.

I’m not sure yet why they do this, assuming they already use TLS/SSL, but.... they do. You can also do this, but keep in mind that you should derive/hash the password again on the server side, anyway.

Answer 2

uses javascript "atob"

var senha = "123";
var segredo = btoa(senha);
var revelado = atob(segredo);

console.log("segredo: " + segredo);
console.log("revelado: " + revelado);