Encrypt Your Personal Details with JavaScript

When you have a lot of online accounts to handle and don't have enough time to memorize all the passwords it becomes an annoying problem. What if you could save your passwords and other details in a simple text file on your PC ?

That makes sense but if your PC is accessible to others it is not a good idea to explicitly save your personal account details in a text file available to every user on your PC.

There are many other ways to keep your account credentials safe on your computer but they are often a folder password software or something like that, but it is a waste of time and most of the times those software are malware itself.

Another option is using an encryption/decryption software on your PC but you won't be able to decrypt your details if you don't have that particular software on the other PC too. Say you downloaded the encrypted file from your Dropbox on a public PC, now to decrypt it you need to install an extra software on it, and it's not a good idea though.  

Let's Start Encrypting/Decrypting

There's an inbuilt encode and decode function in JavaScript that takes in an string and output the result. The function we are talking about are btoa and atob, in JavaScript these functions are generally used for transmission of data that may cause communication problems.

But I found another use of these functions and when I found myself saving my account details on my PC accessible to anyone. I then used those function to encode the details, save it in a text file and when I needed it I used the decode function.

Open the JavaScript Console

First we need to open the Developer Tools with JS Console in the browser. If you want to learn how to open developer tools in different browser check this tutorial.
http://www.stramaxon.com/2013/10/developer-tools-in-browser.html

If you don't want to read that tutorial then just use these keyboard shortcuts to open JavaScript console on your browser :
Chrome - CTRL+SHIFT+J (CMD+SHIFT+J on Mac)
Mozilla Firefox - CTRL+SHIFT+K

Encode it first

Finally when we have the Console open, we are ready to use it for encoding any text we like. The function that encodes any text is btoa("Text you want to encode") if you run this in your Console it will output this VGV4dCB5b3Ugd2FudCB0byBlbmNvZGU= .

We now know what the function does now see how can you use it
btoa("Something here");

The text between the parentheses and double quotes is the text you are encoding so replace it with your personal details you want to encode and once you run it the console will return the encoded version of it, now you can save that text in your file and no one be able to read it (if you don't have any geek or programmer kind of people near you, can be worry free).

Here's a screenshot


Time to Decode

Encoding is of no use if you can't decode it for later use. As btoa() encodes a string similarly atob() decodes the encoded text.

Try running this code in your open JavaScript Console
atob("VGV4dCB5b3Ugd2FudCB0byBlbmNvZGU=");

This will output "Text you want to encode". You use this function in the same way but you just need to pass encoded data in the parentheses.


Tip: If you want extra protection, you can encoded the encoded data too but you also need to decode it the times you encoded it.

Bonus Tool!

Even before writing this article I had written a small JavaScript tool you can use to encode/decode data without worrying about the Console and function codes. Click the link below and start using it.

Sometimes it's fun to to a work in the difficult way ;)

How to Open Developer Tools in Different Browsers

Developer tools or shortened DevTools are set of tools used for debugging web pages which is important tool for web developers and also general users who wants to inspect a page, make changes to the site on the front-end or analyse network usage by the webpage.

It is a all-in-one tool for a person who wants to learn what happening behind the scenes of a website. If you are new to it you may want to learn about, I wrote a post about using Chrome Developer Tools but if you need a more brief information about it see this
https://developers.google.com/chrome-developer-tools/

Chrome and Safari's developer tools are very much the same. But Mozilla Firefox has it's own unique developer tool set but using it is almost same as using any other developer tool.

Google Chrome

Google Chrome in my opinion is the best browser for web debugging using DevTools. DevTools are frequently updated and are simple to use.

Starting DevTools on Chrome

Starting DevTools on any webpage is very easy. There are three ways to open the console :

1. Select the Chrome Menu  > Tools > Developer Tools

2. Right click on a blank area of the page and from the list of options click on "Inspect Element" at the bottom. To inspect a particular element right click on the element and then select the inspect element option.

3. Another way to open the console is keyboard shortcut. Press Ctrl+Shift+I (Cmd+Shift+I on Mac) and the developer tools will appear.


Starting JavaScript Console in DevTools

JavaScript Console is used to run JavaScript codes on a page. It's often used to test scripts on a website to check if the code works well or not. But you can use it as a calculator or just try out JavaScript functions using it.
To directly open the JavaScript Console select the Chrome Menu  > Tools > JavaScript console or use the keyboard shortcut Ctrl+Shift+J (Cmd+Shift+J on Mac).

When the Developer Tool is opened select the "Console" tab on top to switch to JavaScript console.

Mozilla Firefox

If you are using Firefox make sure you have the latest version, as older versions don't include developer tools or if they do, they are old. Developer tools of new Firefox is way better than the older version and got some extra tools too.

Starting Developer Tools on Firefox

You can it by various ways. The most common way is to open it using Inspect Element option. Right click on a blank area on the web page and from the list options select "Inspect Element", the Firefox Developers tools will open.

Or if you can open it by going to the Tools menu > Web Developer > Inspector, this will open the developer tool in page inspector mode.

Opening JavaScript Console

Accessing JavaScript console in Firefox is similar to opening the page inspector. Open the Developer tools by right clicking on a blank area and then selecting the Inspect Element option. Now just switch to the "Console" tag on top of the dev. tools.

Or you can also open it through the tools menu. Click on Tools > Web Developer > Web Console or use the keyboard shortcut CTRL+SHIFT+K.



Apple Safari

Accessing developer tools on Safari is similar to as in Chrome. Some keyboards shortcuts might be different. Simply right click anywhere on the page and press Inspect element.

If you have any question ask it in the comments.