title: Javascript Security: is storing sensitive data in a self invoking function more secure than cookies?
body: <p>I know security is either non-existant or very difficult in client side JavaScript. I know my server-side code should ultimately decide who it gives data to or accepts data from.</p>
  
  <p>That said, is the following okay to do. By "okay" I mean if this were the method used on some new popular trendy cool web app. Could I sleep at night knowing that I won't see "Super Cool Web App Hacked, change your passwords!" all over HN and Reddit (or any other sources of info people care about) as a result of this implementation.</p>
  
  <p>If it is not secure. Why? How can that info (username and password) be obtained?</p>
  
  <p>If it is secure? How sure are you? Why is it secure? What is stopping me from getting that info outside of my obvious inability to right now.</p>
  
  <p>Partial answers are welcome. Just looking for a better understanding.</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>I'm thinking about the case of some trying to steal a users credentials. My understanding is that cookies are insecure because 1.) other javascripts (via XSS or whatever) can access them and because 2.) they are passed in the clear. I figure SSL would take care of the second issue and lets just assume I'm able to prevent XSS. It would now seem that cookies are now secure, right?</p>
  
  <p>I'm aware of some supposed browser vulnerabilities that assist in making cookies insecure. That's what made me ask this question. Given all the things that make cookies insecure, is this (code below) any better?</p>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/KTastrophy/vXEjm/1/" rel="noreferrer">http://jsfiddle.net/KTastrophy/vXEjm/1/</a> OR see code below
  (Only tested in Chrome)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form id="login"&gt;
              &lt;div&gt;
                  &lt;label for="username"&gt;Username&lt;/label&gt;
                  &lt;input id="username" name="username" type="text" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;label for="password"&gt;Password&lt;/label&gt;
                  &lt;input id="password" name="password" type="password" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;input id="submit" name="submit" type="submit" value="Login" /&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/body&gt;
      &lt;script type="text/javascript"&gt;
          ;(function () {
              "use strict";
              var login, user = {};
              login = document.getElementById("login");
              login.onsubmit = function (event) {
                  event.preventDefault();
                  user.username = document.getElementById("username").value;
                  user.password = document.getElementById("password").value;
  
                  /*
                      use the username and password here to do
                      an API request over SSL using HTTP Auth
                   */
              }
          }());
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>