1
\$\begingroup\$

Example: JSFiddle

Questions

  1. Supposedly there's an issue with using ^ in a regex statement. Is that always the case or is it acceptable to use as I have here?
  2. Should I include a validation to ensure there are no empty fields or would that be extraneous?
  3. Would my code be considered insecure?

/**
* Name:        Vigenere Cypher Decoder
* Description: A vanilla JS application to decode a Vigenere Cypher with a known key
* @package     Chimera Apps
* @version     1.0.0
* @author      Chimera.Zen
* @copyright   Copyright (c) 2017, Chimera.Zen
* @link        https://github.com/ChimeraZen/Vigenere-Cypher
* @license     http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/

"use strict";
var cypherAlphabet,
    cypherAlphabetChar,     // Each character of the cypher alphabet
    cypherKey,
    cypherKeyChar,          // Each character of the cypher key
    cypherLength,
    decryptedAlphabet,      // Each character as it's decrypted
    encryptedString,
    encryptedStringChar,    // Each character of the encryptiong string
    encryptedLength,
    encryptedAlphabet = [], // An array of the reorganized alphabet to be used on encryptedStringChar
    i,
    ii,
    results;                // Div#results

// Decode encryption using cypher key and encrypted text
function decryptingCypher(a, b) {
  encryptedStringChar = encryptedString.substring(a + 1, a);
  decryptedAlphabet   = encryptedAlphabet[b].toString().indexOf(encryptedStringChar);
  // Display results in div#results
  results.innerHTML  += cypherAlphabet.substring(decryptedAlphabet + 1, decryptedAlphabet);
}

// Applies the cypher alphabet to each character of encrypted string
function startDecryptingCypher() {
  encryptedLength = encryptedString.length;
  for (i = 0; i < encryptedLength; i++) {
    if (ii < cypherLength) {
      decryptingCypher(i, ii);
      ii++;
    } else {
      ii = 0;
      decryptingCypher(i, ii);
      ii++;
    }
  }
}

// Creates the encoded alphabet based off of the cypher key and its length
function createEncryptedAlphabet() {
  for (i = 0; i < cypherLength; i++) {
    cypherKeyChar = cypherKey.substr(i, 1);
    for (ii = 0; ii < 26; ii++) {
      cypherAlphabetChar = cypherAlphabet.substr(ii, 1);
      if (cypherKeyChar === cypherAlphabetChar) {
        encryptedAlphabet[i] = cypherAlphabet.substring(cypherAlphabet.indexOf(cypherKeyChar)) + cypherAlphabet.substring(parseInt('-' + cypherAlphabet.indexOf(cypherKeyChar), 10), ii);
      }
    }
  }
  startDecryptingCypher();
}

// Prep encrypted string - remove spaces, special characters and new lines
function prepEncryptedString(encryptedString) {
  return encryptedString.replace(/([^A-Za-z])|(?:\r\n|\r|\n)/gi, "");
}

// Set Demo parameters
function demoSwitch() {
  if (document.getElementById("demo").checked === true){
    document.getElementById("cypherAlphabet").value   = "KRYPTOSABCDEFGHIJLMNQUVWXZ";
    document.getElementById("cypherKey").value        = "PALIMPSEST";
    document.getElementById("encryptedString").value  = "EMUFPHZLRFAXYUSDJKZLDKRNSHGNFIVJYQTQUXQBQVYUVLLTREVJYQTMKYRDMFD";
  } else {
    document.getElementById("cypherAlphabet").value   = "";
    document.getElementById("cypherKey").value        = "";
    document.getElementById("encryptedString").value  = "";
  }
}

// Initialize the parameters
function decryptCypher() {
  cypherAlphabet    = prepEncryptedString(document.getElementById("cypherAlphabet").value);
  cypherKey         = prepEncryptedString(document.getElementById("cypherKey").value);
  encryptedString   = prepEncryptedString(document.getElementById("encryptedString").value);
  cypherLength      = cypherKey.length;
  encryptedLength   = encryptedString.length;
  results           = document.getElementById("results");
  results.innerHTML = "";
  createEncryptedAlphabet();
}
.vigenere-cypher {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.vigenere-cypher h1 {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 30px;
  text-align: center;
}
.vigenere-cypher .params {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  width: 45%;
  max-width: 600px
}
.vigenere-cypher input[type=checkbox] {
  text-transform: uppercase;
  margin-bottom: 10px;
  vertical-align: top;
}
.vigenere-cypher input[type=text] {
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 1px 2px 0 3px;
  border: 1px solid rgb(169, 169, 169);
}
.vigenere-cypher textarea {
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid rgb(169, 169, 169);
}
.vigenere-cypher button {
  height: 30px;
}
.vigenere-cypher #results {
  width: 45%;
  height: 221px;
  word-wrap: break-word;
  padding: 3px 5px;
  border: 1px solid rgb(169, 169, 169);
  background: #FFF;
  overflow-x: hidden;
  overflow-y: scroll;
}
<html>
  <head>
  </head>
  <body>
    <div class="vigenere-cypher">
      <h1>
        Vigenere Cypher Decoder
      </h1>
      <div class="params">
        <label>Enable Demo<input id="demo" type="checkbox" value="value" onclick="demoSwitch()"></label>
        <input id="cypherAlphabet" type="text" placeholder="Cypher Alphabet" value="" />
        <input id="cypherKey"type="text" placeholder="Cypher Key" value="" />
        <textarea id="encryptedString" placeholder="Text to decode"></textarea>
        <button onclick="decryptCypher();">DECRYPT CYPHER</button>
      </div>
      <div id="results">
      </div>
    </div>
  </body>
</html>

\$\endgroup\$
  • \$\begingroup\$ do you have a source for there's an issue with using ^ in regex? it's a special char so if you're trying to match it you have to escape it, otherwise i'm not sure what you could be referring to ...? (ps... followed you on gh) \$\endgroup\$ – I wrestled a bear once. Dec 18 '17 at 21:16
  • \$\begingroup\$ Thanks :). It's primarily because of an error that popped up in JSlint "insecure ^" so I altered the config entry to make JSlint ignore it. Ignoring without knowing why is dangerous in my experience lol but from what I understand, it's just JSlint being overly sensitive \$\endgroup\$ – Chimera.Zen Dec 18 '17 at 22:11
  • \$\begingroup\$ I see what you mean. I think your regex is fine. \$\endgroup\$ – I wrestled a bear once. Dec 18 '17 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.