While this application is cool to play with as is, the next level is to send it in email. You can do that in three easy steps. First, copy the following function, and paste it between your SCRIPT tags:

function sendText(data) {
  paraWidth = 70;
  var iterate = parseInt(data.length / paraWidth);
  var border = '
-------
';
  var breakData = '';
  for (var i = 1; i <= iterate; i++) {
    breakData += data.substring((i - 1) * paraWidth, i * paraWidth) +
       '
';
    }
  breakData += data.substring((i - 1) * paraWidth, data.length);
  document.CipherMail.Message.value = border + breakData + border;
  document.CipherMail.action =
     "mailto:[email protected]?subject=The Secret Message";
  return true;
  }

This performs some last millisecond formatting before sending the email. The formatting inserts carriage returns every paraWidth characters. This ensures that the email message that the recipient receives isn’t one line of text 40 miles long. The next thing to do is add the second form required. Insert this code after the closing FORM tag in the current document:

FORM NAME="CipherMail" ACTION="" METHOD="POST" ENCTYPE="text/plain"
   onSubmit="return sendText(document.forms[0].Data.value);">
<INPUT TYPE=HIDDEN NAME="Message">
<INPUT TYPE=SUBMIT VALUE="   Send   ">
</FORM>

This form, named CipherMail , contains a lone HIDDEN field. The last thing to do is change the form references in the cipher algorithm functions.

Change lines 87-89:

var shiftIdx = (NN ?
   refSlide("caesar").document.forms[0].Shift.selectedIndex :
   document.forms[1].Shift.selectedIndex);

to this:

var shiftIdx = (NN ?
   refSlide("caesar").document.forms[0].Shift.selectedIndex :
   document.forms[2].Shift.selectedIndex);

Then lines 102-104 from this:

var keyword = this.purify((NN ?
   refSlide("vigenere").document.forms[0].KeyWord.value :
   document.forms[2].KeyWord.value));

to this:

var keyword = this.purify((NN ?
   refSlide("vigenere").document.forms[0].KeyWord.value :
 document.forms[3].KeyWord.value));

You need to make these changes because you added another form to the hierarchy in the previous step. sendText() sets the value of this hidden field to the value of whatever text is entered in the textarea. sendText() then submits this form, which has the ACTION attribute set to mailto:your_e-mail@your_mail_server.com. Figure 9.7 shows what the message looks like when it arrives. That’s the view from my Hotmail account. Upon receipt, the user can cut and paste the text between the dashed lines, then decipher the message with the previously agreed-upon cipher and key. Now your visitors are using encrypted mail, and you’re the genius behind it!

Figure 9-7. The encrypted email

P.S. This will work only if the user has the NN or MSIE email client correctly configured, which is most likely the case.

P.P.S. ch09cipher2.html has the email functionality added.