Before I proceed further, I must confess that my knowledge of encryption and digital security in general is very basic. So the solutions discussed in this post may not be the best in terms of protecting the data.
As I said, Crypto-JS is very simple to use. You can use different cipher algorithms like AES. DES etc. and APIs are simple. e.g. to encrypt using AES , you would call –
encryptedData = CryptoJS.AES.encrypt(textToEncrypt, secretPhrase); //include aes.js script
In the above API, the first argument to encrypt function is text data you want to encrypt, e.g. password. The second argument is a secret phrase (also called passPhrase). This could be any text. Secret phrase is the key that is used to encrypt the data. However you will have to use the same key (secret phrase) when decrypting the data.
When user registers for the first time, she enters password and secret key/phrase. Using the secret key I encrypt the password and store it in the local database. I don’t save the secret key entered by the user. Subsequently login operation requires user to enter password as well as the same secret key she had entered at the time of registration. The problem with this approach is that user has to remember secret key along with the password.
If I did not want to retrieve password in clear text in the application and if I did not want to encrypt any other data in the application, I could have used hashing algorithm, instead of encryption e.g.
hashedPassword = CryptoJS.SHA256(password); //include sha256.js script
Once the data is hashed, you cannot retrieve it in its original form. For the password example above, I could hash the password that user entered at the time of registration and store in the database. When user enters password at the time of login, I would hash it and compare the hashed value with the one stored in the database.
Coming back to the encrypt function, the value it returns is not a string, but an object. If you log the value to console, this is what you get –
However you can store string representation of this object (by calling toString()) and use it in decrypt function. Interesting thing about the encrypt function is that the result of encryption is not the same each time you call the function with the same data and secret key. If you log the object returned by encrypt function above, you will see three fields – iv (initialization vector) , key and salt. Together they are used to encrypt the data. And these values change each time you call encrypt function with the same arguments (see demo at the end of this post).
Decrypt function is also very easy to use. You pass encrypted object/string and secret key to the function –
decryptedData = CryptoJS.AES.decrypt(encryptedData, secretPhrase);
The returned value is not a string, but a JS Object that contains array of words –
To get back the original string, you need to call toString with proper encoding –
originalData = decryptedData.toString(CryptoJS.enc.Utf8);
Try out following demo. Enter data to be encrypted and secret key and click Encrypt button. The data would be encrypted and displayed next to the Encrypted Data label. To get back original text from the encrypted data, click Decrypt without changing the secret key. The original text would be displayed next to Decrypted Data label.
|Secret Key :|
|Encrypted Data :|
|Decrypted Data :|