How to send a correct authorization header for basic authentication

How to Send a Correct Authorization Header for Basic Authentication

Learn the fundamentals of Basic Authentication and how to correctly construct and send the Authorization header using jQuery, Django, and AJAX, including handling cross-domain requests.

Basic Authentication is a straightforward HTTP authentication scheme that allows a client to send credentials (username and password) with their requests. While not the most secure on its own (it sends credentials in a reversible base64 encoded format), it's often used in conjunction with HTTPS to provide a secure channel. This article will guide you through the process of correctly implementing Basic Authentication, focusing on client-side (jQuery AJAX) and server-side (Django) considerations, and addressing common challenges like cross-domain requests.

Understanding Basic Authentication

Basic Authentication works by encoding a username and password pair into a base64 string and including it in the Authorization HTTP header. The format is Authorization: Basic <base64-encoded-credentials>, where <base64-encoded-credentials> is the base64 encoding of username:password.

Basic Authentication Flow

Client-Side Implementation with jQuery AJAX

When making AJAX requests with jQuery, you can easily add the Authorization header. The key is to construct the base64 encoded string correctly and set it in the beforeSend option or directly in the headers option of your AJAX call.

function getBasicAuthHeader(username, password) {
  const credentials = btoa(`${username}:${password}`); // btoa encodes to base64
  return `Basic ${credentials}`;
}

$.ajax({
  url: '/api/protected-resource/',
  method: 'GET',
  headers: {
    'Authorization': getBasicAuthHeader('myuser', 'mypassword')
  },
  success: function(data) {
    console.log('Success:', data);
  },
  error: function(xhr, status, error) {
    console.error('Error:', error);
  }
});

Sending Basic Auth header using jQuery AJAX

Server-Side Implementation with Django

On the Django server, you'll need a way to parse the Authorization header, decode the credentials, and validate them against your user database. This is typically done within a custom middleware or a decorator for your views.

import base64
from django.http import HttpResponse
from django.contrib.auth import authenticate, login

def basic_auth_required(view_func):
    def wrap(request, *args, **kwargs):
        if 'HTTP_AUTHORIZATION' in request.META:
            auth_header = request.META['HTTP_AUTHORIZATION'].split()
            if len(auth_header) == 2 and auth_header[0].lower() == 'basic':
                credentials_b64 = auth_header[1]
                try:
                    credentials_decoded = base64.b64decode(credentials_b64).decode('utf-8')
                    username, password = credentials_decoded.split(':', 1)
                    user = authenticate(request, username=username, password=password)
                    if user is not None:
                        login(request, user)
                        return view_func(request, *args, **kwargs)
                except (TypeError, ValueError, IndexError):
                    pass # Malformed header
        response = HttpResponse('Unauthorized', status=401)
        response['WWW-Authenticate'] = 'Basic realm="Restricted Area"'
        return response
    return wrap

# Example usage in a Django view
from django.http import JsonResponse

@basic_auth_required
def protected_view(request):
    return JsonResponse({'message': f'Welcome, {request.user.username}!'})

Django decorator for Basic Authentication

Handling Cross-Domain (CORS) Requests

When your client-side application is hosted on a different domain than your API, you'll encounter Cross-Origin Resource Sharing (CORS) issues. For Basic Authentication, the browser will typically send a preflight OPTIONS request before the actual GET/POST request. Your server must correctly respond to this preflight request with appropriate CORS headers, including allowing the Authorization header.

# Install django-cors-headers: pip install django-cors-headers

INSTALLED_APPS = [
    # ...
    'corsheaders',
    # ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ... other middleware
]

CORS_ORIGIN_WHITELIST = [
    'http://localhost:8000', # Example client domain
    'http://your-frontend-domain.com',
]

CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization', # Crucial for Basic Auth
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
]

CORS_ALLOW_CREDENTIALS = True # Required if you're sending cookies with CORS

Configuring django-cors-headers for Authorization header

Correctly sending and handling the Authorization header for Basic Authentication is fundamental for many web applications. By understanding both the client-side and server-side requirements, and paying attention to security considerations like HTTPS and CORS, you can implement this authentication scheme effectively. Remember that while Basic Auth is simple, it should always be paired with HTTPS for any sensitive data.