Cookbooks
JavaScript
Chapter 11. HTML and the Web
Sending an HTTP request with basic authentication

JavaScript:
Sending an HTTP request with basic authentication

How to:

Here’s a quick example using JavaScript’s Fetch API:

const url = 'https://some-protected-resource.com/data';
const username = 'YourUsername';
const password = 'YourPassword';

const headers = new Headers();
headers.set('Authorization', 'Basic ' + btoa(username + ':' + password));

fetch(url, { method: 'GET', headers: headers })
  .then(response => {
    if (response.ok) return response.json();
    throw new Error('Network response was not ok.');
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error: ', error));

Sample output (printed to the console):

{
  "protected": "data",
  "moreData": 12345
}

Deep Dive

Before diving in, let’s get a bit of context. Basic authentication is one of the simplest forms of web service security, sending credentials in headers with every request.

Historical Context:

  • Basic HTTP auth is an old method, initially outlined in the RFC 7617 from 2015, replacing the even older RFC 2617 from 1999.
  • It was widely used due to its simplicity but isn’t as secure without HTTPS, as base64 encoding is easily reversible.

Alternatives:

  • OAuth: A more secure and complex standard for access delegation, used in cases where you need to provide access without sharing password credentials.
  • API Keys: A single token that’s easier to manage than complex OAuth protocols.
  • Bearer Tokens: Particularly JWT (JSON Web Tokens), which can carry more information.

Implementation Details:

  • Base64 encoding transforms the username:password string into a sequence of characters that’s more universally transmittable.
  • Always ensure the connection is HTTPS, to prevent credentials from being intercepted.
  • Modern development favors tokens and session cookies for authentication, as they’re more secure and versatile.

See Also

Sending an HTTP request