title: Using crypto-js to encrypt password and send form via ajax (and decrypt in java), I get : TypeError: Cannot read property 'words' of undefined
body: <p>I am trying to secure the password that i am sending from an HTML form to a Java Servlet (via ajax). I use <code>crypto-js</code> in my js to encrypt the password.
  When the code reaches the ajax call, I get the error:</p>
  
  <pre class="lang-none prettyprint-override"><code>Uncaught TypeError: Cannot read property 'words' of undefined (aes.js:8)
  </code></pre>
  
  <p>(I already made sure that the key I'm sending is not null)</p>
  
  <p>This is my code:</p>
  
  <hr>
  
  <p><strong>login.jsp:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html &gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Login&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;script src="jquery-1.11.2.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
  localStorage.setItem('loggedin', false);
  &lt;/script&gt;
  &lt;script src="login.js"&gt;&lt;/script&gt;
  &lt;script src="http://crypto-    js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"&gt;&lt;/script&gt;
  &lt;script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/pbkdf2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  function convertAndSubmit()
  {
      var salt = CryptoJS.lib.WordArray.random(128/8);
      var iv = CryptoJS.lib.WordArray.random(128/8);           
      console.log('salt  '+ salt );
      console.log('iv  '+ iv );
      var key128Bits100Iterations = CryptoJS.PBKDF2('1234567890987654', salt,         { keySize: 256/32, iterations: 100 });
      console.log( 'key128Bits100Iterations '+ key128Bits100Iterations);
      var encrypted = CryptoJS.AES.encrypt($("#pwd").val(), key128Bits100Iterations, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7  }).toString();
      checkLogin(encrypted, randkey, salt, iv);
  }
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;div id="login-form"&gt;
      &lt;h3&gt;Login&lt;/h3&gt;
  
      &lt;fieldset&gt;
        &lt;form action="javascript:void(0);" method="get" name="login"&gt;
          &lt;input type="email" id="email" name="email" required value="Email"      onBlur="if(this.value=='')this.value='Email'" onFocus="if(this.value=='Email')this.value='' "&gt;
          &lt;input type="password" id="pwd" name="pwd" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "&gt; 
          &lt;input type="submit" value="Login" id="login" onclick="javascript:convertAndSubmit()"&gt;
        &lt;/form&gt;
      &lt;/fieldset&gt;
  
    &lt;/div&gt; &lt;!-- end login-form --&gt;
  &lt;/div&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>login.js:</strong></p>
  
  <pre><code>function ajaxLogin(credentials) {
      var retData = null;
      $.ajax({ //this is where the code generates the error
          async: false,
          type: 'GET',
          data: credentials,
          url: "http://localhost:8080/AtlasServices/Login",
          success: function(data) {
              retData = data;
          }
      });
      return retData;
  }
  
  function checkLogin(encrypted, key, s, i) {
      var credentials = {
          email: $("#email").val(),
          pass: encrypted,
          key: key,
          salt: s,
          iv: i
      };
  
      var res = window.ajaxLogin(credentials);
      if (res["userlogged"] !== "true") {
          alert("Failed to log in");
          $("#email").val("");
          $("#pwd").val("");
          localStorage.setItem('loggedin', false);
      } else {
          localStorage.setItem('loggedin', true);
          window.location = "http://localhost:8080/AtlasServices/main.html";
      }
  }
  </code></pre>
  
  <hr>
  
  <p>I was searching for a long time for a solution...will really love some help, thanks:)</p>