Secure login using AJAX

Samuel Williams Thursday, 08 October 2009

A website is only as secure as its weakest link. We should assume that an attacker has access to everything that is on the server. To this end, transmitting the password to a server in clear text isn't such a great idea.

It is possible to minimise the chance of a password being intercepted by simply not transmitting it at all, and instead sending a password digest. SHA can be used on the client-side to produce a password digest along with a random nounce to prevent replay attacks.

If the client doesn't have JavaScript, it simply supplies the password (as per what is typical).

This diagram shows the basic of a secure hashing login system, which can be easily implemented.

Client Side

Here is a client using jQuery. The login hash is retrieved from the server using AJAX.

<form class="basic" id="login" method="post" action="/account/login" onsubmit="javascript:updateLoginHash()">
		<legend>Login Form</legend>
			<dt><label for="username">Username:</label></dt>
			<dd><input type="text" id="username" name="username" /></dd>
			<dt><label for="password">Password:</label></dt>
			<dd><input type="password" id="password" name="password" /></dd>
			<dd class="footer"><input type="submit" name="Login" /></dd>
		<input id="password_hash" name="password_hash" type="hidden" />
<script type="text/javascript">
	function updateLoginHash() {
	        url: "/account/login_salt", 
	        type: 'GET',
	        async: false,
	        cache: false,
	        success: function(login_salt) {
	            password = $.sha1($('#password').val());

Server Side

The database I am using as an example is for email accounts. It is slightly more complicated than a typical example.

require 'digest'
require 'base64'

def secure_digest(key,salt="")
	return Digest::SHA1.hexdigest(key+salt)+salt

def secure_digest_b64(key,salt="")
	return Base64.encode64(secure_digest(key, salt)).chomp

class MailAccount
	include DataMapper::Resource
	property :id, Serial
	property :name, String

	property :pw_ssha, String
	property :pw_sha1, String

	def password=(pw)
		salt = (0...12).collect{(rand 256).chr}.join
		sha1 = Digest::SHA1.digest(pw)
		ssha = Digest::SHA1.digest(pw+salt) + salt

		attribute_set(:pw_ssha, "{SSHA}" + Base64.encode64(ssha).chomp)
		attribute_set(:pw_sha1, "{SHA1}" + Base64.encode64(sha1).chomp)
	def digest_authenticate(login_digest, login_salt)
		return false if sha1_hexdigest == nil

		return login_digest == secure_digest(login_salt + sha1_hexdigest)
	def plaintext_authenticate(password)
		return false if sha1_digest == nil
		return secure_digest(password) == sha1_hexdigest
	def sha1_hexdigest
		if pw_sha1.kind_of? String
			digest = pw_sha1.sub("{SHA1}", "")
			return nil if digest.empty?
			return Base64.decode64(digest).unpack("H*").first
			return nil

Here is a server using Ramaze.

class AccountController < Controller
	set_layout_except :default => [:login_salt]

	def login
		@title = "Mail Administration Login"
			account = MailAccount.with_address(request[:username])
			success = false
			if account "Authenticating account #{}..."

				if request[:password_hash] "\twith #{request[:password_hash]} and #{session[:login_salt]}"
					success = account.digest_authenticate(request[:password_hash], session[:login_salt])
				elsif request[:password] "\twith #{request[:password]}"
					success = account.plaintext_authenticate(request[:password])
			if success "Authentication successful!"
				session[:mail_account] =
				redirect MainController.r(:index)
			Ramaze::Log.warn "Authentication failed!"

	# Generate salt for the login process
	def login_salt
		response["Content-Type"] = 'application/json'
		session[:login_salt] = ::SecureRandom.hex(32)
	def logout
		redirect "/"

Finally, it is important to remember that this approach is not inherently secure. It is just one option to ensure that password does not travel in clear text. I highly recommend this article by Troy Hunt "Our password hashing has no clothes" which discusses the risk of using SHA for password hashing. I personally recommend using BCrypt.


“(rand*255).to_i.chr” should be written as “(rand 255).chr”
but 255 could never be generated either way. you probably wanted
“(rand 256).chr”

Hi Bob – Thanks, I’ve updated the code to include your suggestion.

it is a great example of how security can go wrong. it all starts with the design: since you’re not storing the random hashes on the server you are absolutely open to replay attacks. (because session faking is very easy if you can tap the wire and it isn’t https)
and the worst thing is, that you will get a false sense of security by implementing your solution… :(

@huhawk I agree that there are many attack vectors – the only benefit of this approach is to ensure that the password is not transmitted in clear text. You’d still want to add SSL/TLS on top of this for a secure site. However, even for SSL/TLS secured sites, it concerns me that the password is typically transmitted to the server in clear text. By using a password digest, the password is never transmitted.

What js library are you including?
I don’t get this line of code? password = $.sha1($(‘#password’).val());

@Mike I was using a jQuery SHA1 plugin for this bit of code, I couldn’t find the original source but there appears to be a copy available here.

Leave a comment

Please note, comments must be formatted using Markdown. Links can be enclosed in angle brackets, e.g. <>.