Lab 7: JavaScript Strings and Encryption

MCS-170 Project 7: JavaScript Strings and Encryption

Project Task

In class we have discussed JavaScript strings as objects, encapsulating data (e.g., characters), properties (e.g., length) and operations (e.g., toUpperCase, charAt). In this lab, we will apply many of these string operations to the task of encoding and decoding messages. In addition, we will learn about the history of encryption: the use of codes and ciphers to protect secret messages.

In Lab

Substitution Ciphers

The use of codes (or ciphers) as a means of hiding the meaning of messages traces its roots to ancient history. The first documented use of codes was by Hebrew scribes in approximately 500 - 600 B.C. The Atbash cipher specified that each letter in a message would be encoded using the corresponding letter in the alphabet reversed. For example, 'A' would be encoded as 'Z', 'B' would be encoded as 'Y', 'C' would be encoded as 'X', and so on. The first known military use of codes was by Julius Caesar in 50 - 60 B.C. The Caesar cipher specified that each letter in the alphabet would be encoded using the letter that is three places later in the alphabet. For example, 'A' would be encoded as 'D', 'B' would be encoded as 'E', 'C' would be encoded as 'F', and so on. The code wraps around at the end of the alphabet, so 'X', 'Y' and 'Z' would be encoded as 'A', 'B', and 'C', respectively.

Both the Atbash and Caesar ciphers are examples of substitution ciphers, codes in which one letter of the alphabet is substituted for another. A substitution cipher can be described succinctly by specifying its key, i.e., the sequence of letters to which the alphabet is mapped. For example, the keys for the Atbash and Caesar ciphers are listed below. To encode a specific letter using one of these ciphers, simply find the corresponding letter in the key below it.

Atbash cipher:

Caesar cipher:

For example, the Atbash cipher would encode the word "CODE" as "XLWV", whereas the Caesar cipher would encode it as "FRGH". Although both of these ciphers were effective at their time (when very few people could read at all), their simple patterns of encoding letters seem pretty obvious today. In principle, though, a substitution cipher can specify any mapping from letters to letters. For example:

Mystery cipher:

Substitution ciphers have several attractive features. For one,they are relatively simple to understand and use. They are also reasonably effective. There are 26! (or roughly 4 x 10²⁶) different arrangements of the 26 letters in the alphabet. Since each of these arrangements may be used as a key for a substitution cipher, there are 26! different codes that can be used. By selecting one of these keys, the corresponding cipher can be used to encode messages. As long as the recipient of the message has that same key, the message can be easily decoded. Without the key, however, decoding a message can be extremely difficult.

EXERCISE 1: For each of the three ciphers listed above, give the corresponding encodings:

message Atbash Caesar Mystery

ABCDE

FOO

SECRET

Encoding Messages

As the previous section showed, encoding messages using a substitution cipher is relatively straightforward. The following steps must take place:

    for as many letters as there are in the message
        get the next character in the message
        find its position in the alphabet
        find the corresponding letter in the key
        use that letter to encode the letter in the message

These steps can be encoded in JavaScript as a function that takes the key and a message as inputs and returns the encoded message. In the HTML document cipher.html (printout the source code to this page for review in the following discussion) the Encode function performs this encoding using the variable coded to accumulate the coded message. The variable is initially assigned to be the empty string, and as each letter in the message is processed, the appropriate code letter is concatenated onto the end of coded. After traversing the entire message, coded will contain the complete encoded version of the message. Note the use of the string operation indexOf. This function returns the index of a character in a string. For example, if str="hello", then will return 1, as this is the position of 'e'. If a character is not in the string, indexOf will return -1.

The cipher.html page allows the user to specify the substitution key in a text box, as well as the message to be encoded in a text area. As a result, a message can be encoded using any substitution cipher, simply by entering the appropriate substitution key. When the user clicks on the button, the message entered into the text area to the left is encoded using the Encode function, and the encoded message is displayed to the right.

EXERCISE 2: Save a copy of the cipher.html page to your directory. Then, load this copy into the browser and use it to test your encoding predictions from EXERCISE 1. How are non-uppercase letters handled by this code? In particular, how are spaces and punctuation marks encoded? Similarly, how are digits or lowercase letters encoded? Where is this handled in the code?

EXERCISE 3: It would be nice to have messages automatically capitalized in the message text area, so that when a user enters a message into the text area, and hits the Encode button, all lower-case letters in the message are automatically made upper-case letters. This functionality can be added through the use of an ONCHANGE attribute in the text area. Note that this attribute is part of the text area containing the message to be encoded, but currently calls a function "makeCaps()" that is empty. Finish the coding of "makeCaps()" so that the text in the text area is converted to all capital letters.
You will be including a complete copy of your HTML page at the end of this lab. Thus, you will not need to include any code for the individual exercises.

Decoding Messages

Given an encoded message and the key by which it was encoded, decoding a message is a straightforward process. The steps in the encoding must simply be performed in reverse. That is, each coded letter must be mapped back into the corresponding letter of the alphabet. Consider the Atbash cipher, for example:

Atbash cipher:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
| | | | | | | | | | | | | (mapping to encode)
v v v v v v v v v v v v v
ZYXWVUTSRQPONMLKJIHGFEDCBA
| | | | | | | | | | | | | (reverse mapping to decode)
v v v v v v v v v v v v v v v
ABCDEFGHIJKLMNOPQRSTUVWXYZ

Since the letter 'A' is encoded as 'Z', the letter 'Z' is decoded by performing the reverse mapping back to 'A'. For each letter in a coded message, this reverse mapping can be made to recover the original letter. The steps involved in decoding an encoded message can be described as follows:

    for as many letters as there are in the encoded message
        get the next character in the encoded message
        find its position in the key
        find the corresponding letter in the alphabet
        use that letter to decode the letter in the encoded message

Note the similarities between the steps in encoding and decoding messages!

EXERCISE 4: Add a function called Decode to your cipher.html page. This function should be similar to the Encode function given to you, only it should decode instead of encode messages. It should take two inputs, representing the encoded message and the substitution key, and should return the decoded version of that message. Add another button to the Web page labeled "Decode <==", immediately below the "Encode ==>;" button. When the user clicks on that button, the contents of the text area on the right should be decoded, and the corresponding message should be written in the text area on the left.
Test your Decode function thoroughly. List test values below that you used to convince yourself that decodings are being performed correctly.

EXERCISE 5: Use your Web page to decode the following encoded message, using the key "LPMKONJIBHUVGYCFTXDRZSEAWQ". MCYJXLRZVLRBCYD -- WCZ ILSO NBYBDIOK RIO VLP!

Extra Credit: Rotating Ciphers

In practice, substitution ciphers can often be broken (decoded without the key) using insight and computational power. As a good example of this, you may be familiar with Crypto-quotes puzzles that appear in many newspapers. These puzzles use a substitution cipher to encode a quotation, and the challenge is to decode the quotation. This can be done by analyzing the patterns of words and the frequency of letters in the quotation. For example, if the same three-letter sequence appears numerous times in the coded quotation, you might work under the assumption that it represents the common word "the".

The weakness of substitution ciphers is that they always map the same letter of the alphabet to the same key letter. Thus, it is possible to look at the coded message and look for patterns. An interesting variation on substitution ciphers was adopted by Nazi Germany during World War II. The Germans used a machine called 'Enigma' for encoding all military messages. The Enigma machine utilized a series of interconnected rotors to encode letters. In essence, the rotors defined a substitution cipher, mapping one letter to another. What made the Enigma machine so effective, however, was that the rotors were rotated after each letter was encoded, essentially changing the substitution cipher after every letter! This added wrinkle made the Enigma codes virtually impossible to break (until electronic computers were built).

This same effect can be obtained in a simple substitution cipher by rotating the key after each letter is encoded (ignoring non-letters). For example, suppose you are using the Atbash cipher to encode "AAA". After mapping 'A' to 'Z', the key "ZYXWVUTSRQPONMLKJIHGFEDCBA" would be rotated (say one letter to the left) to obtain "YXWVUTSRQPONMLKJIHGFEDCBAZ". Thus, the second 'A' would be mapped to 'Y'. Similarly, another rotation of the key would cause the third 'A' to be mapped to 'X'. Using a rotating key, each occurrence of a letter in the message is mapped to a different letter, and so pattern analysis is more difficult.

EXERCISE (Extra Credit): Create a function named RotateLeft that takes a string as input and rotates the characters in that string one position to the left (wrapping the first character back around to the end), and then returns the new string. Add the RotateLeft function to your cipher.html page and call it in both Encode and Decode to rotate the key after each letter is encoded/decoded. Note: you should not rotate the key unless a letter is actually encoded using the key.
Once you have written your code, you should test it thoroughly. List test values in your project report that you used to convince yourself that encodings/decodings are being performed correctly.

Project Report:

The report for this project will consist of the source code of your final cipher.html page after you have completed all of Exercises 1-5, and any additional answers to exercises as requested above.

Make sure that you consider the College's Honor Policy. You should write the following in full and sign it on your report:

On my honor, I pledge that I have not given, received, nor tolerated others' use of unauthorized aid in completing this work.

Back to MCS 170 home page