Part 1 of this series looking at the Vigenère cipher covered crerating a Vigenère Square. In this second part we look at using the square to encipher messages, and implementing that method in Javascript.
Enciphering a message
Enciphering a message using a Vigenère square involved selecting a row using sequemtial letters from the keyword, then reading down the column for the letter you're enciphering to read the corresponding cipher.
- To encipher a message we start with a keyword. We'll use BAD.
- To encipher the word BEACH we first create a string, repeating BAD until we reach the same length as our message: BADBA
- To encipher the first letter we find the first letter of our keyword string (B) in the leftmost column
- Then we find the first letter of our message (B) in the top row (B), and read the corresponding letter from row B: C
- Move to the next keyword letter and message letter: A and E, enciphers as E
- Then D and A, enciphers as D
- B and C enciphers as D
- Lastly A and H gives H
Deciphering
Deciphering involves a similar method, but we search the key word row for the enciphered letter and read the original from the top row.
Using the keyword BAD and the message CEDDH, we search row B for the letter C, which correspondes to B on the top row.
Similarly for keyword rows A,D,B and A we search the rows for E,D,D,H, retrieving our original word: BEACH.
Enciphering in JavaScript
To encrypt a message in Javascript we follow the same process as outlined above. Since the arrays in our table use the alphabet as keys it's a simple task to step through the letters of the message, enciphering each in turn.
But first, we need a keyword! We'll add the keyword to the parameters we supply to the constructor in our class from Part 1. It just accepts a keyword and makes sure it's good before converting it to an array and storing it for later.
constructor(, alphabet, keyword) {
//
// Code for handling the alphabet goes here
//
// Now validate the keyword and store it.
if (typeof keyword !== 'string' || keyword.length===0) {
throw "Bad keyword";
}
this.keyword = Array.from(keyword);
}
With that out of the way, we can get on with hiding our secrets... The code is commented to explain what it's doing.
encipher(message) {
if (typeof message !== 'string') {
throw "Bad message";
}
// Create an array from the message
message = Array.from(message);
// Somewhere to store the enciphered message
let result = '';
// Iterate over the message array.
//
message.forEach((el,ix)=>{
// ix is the index of the current letter in the message array
// We use modulus arithetic to select the correct letter from
// the keyword
let rowKey = this.keyword[ix % this.keyword.length]
// Since our cipher table is indexed by keyword letter we can use that
// to get the correct row, and read the cipher from the row using the
// letter from the message. If we don't find the message character in our
// alphabet, add in the original letter. This covers punctuation,
// whitespace, etc. These extra characters could be added to the alphabet
// if desired
result += (this.cipher[rowKey][el])??el;
});
return result;
}
Deciphering
To decipher a message we follow a similar process to enciphering, but we need to search the cipher row for the enciphered letter and return the key. For this we use
Object.keys(row).find(key=>row[key]===el) ?? el;This creates an array of keys from the cipher row, then searches for the key that points to the letter we're decipering. This is functionally eqivalent to the PHP array_search() function, but JavaScript has no direct equivalent.
decipher(message) {
if (typeof message !== 'string') {
throw "Bad message";
}
message=Array.from(message);
let result = '';
message.forEach((el, ix)=>{
// Modulus arithmetic, as for encipher
let row = this.cipher[this.keyword[ix % this.keyword.length]];
// Search for the key that refers to the letter we're deciphering,
// or use the original character if we don't find it.
result += Object.keys(row).find(key=>row[key]===el)??el;
});
return result;
}
Try it!
You can try out the code on the tools page. Set up your own square and generate coded messages!
Get the code!
You can download the complete class here