title: AJAX POST Request Hide Basic Auth Credentials
body: <p>I've been researching ways to send AJAX POST requests to my API and I'm trying to understand how to pass basic auth credentials correctly. </p>
  
  <pre><code>          Interface                    API
  </code></pre>
  
  <p><a href="https://www.example.com/app/" rel="nofollow">https://www.example.com/app/</a>   ------->   <a href="https://api.example.com/" rel="nofollow">https://api.example.com/</a></p>
  
  <p>Using this example I found on StackOverflow--couldn't anyone view the source of the JS, see my username and password in cleartext, and have access to all my API functions?</p>
  
  <p>If so, how do I pass my username and password without showing it to the world? </p>
  
  <pre><code>$.ajax({  
      url: 'yoururl',
      username : username,
      password :password,
      type: 'POST',
      contentType: 'application/x-www-form-urlencoded',
      dataType: "text",
      xhrFields: 
      {
          withCredentials: true
      },
      beforeSend: function (xhr) { 
          xhr.setRequestHeader('Authorization', 'Basic ' + btoa(username + ":" + password));             
      }
  });
  </code></pre>