Clickjacking in Express with Basic Auth

Clickjacking is a client-side UI redress attack where an attacker tricks a user into interacting with a hidden or disguised element inside an invisible or overlapping frame. When Basic Authentication is handled in Express without anti-clickjacking protections, the combination can expose session credentials and perform unauthorized actions even when the user intends to interact only with the visible page.

In Express, Basic Auth is commonly implemented by parsing the Authorization header on the server and allowing access if credentials match. If the authenticated response is served without a Content-Security-Policy frame-ancestor directive (or with an overly permissive policy), the authenticated page can be embedded in an attacker-controlled site. Because the browser automatically sends the Basic Auth credentials with the request to your Express endpoint, the attacker’s embedded frame will carry those credentials and can perform authenticated actions on behalf of the user.

Consider an Express route that relies solely on Basic Auth for access control and does not enforce additional context-based checks:

const express = require('express');
const app = express();
const auth = require('basic-auth');

const users = {
  admin: 's3cret'
};

function basicAuth(req, res, next) {
  const user = auth(req);
  if (!user || users[user.name] !== user.pass) {
    res.set('WWW-Authenticate', 'Basic realm=\"Area\"');
    return res.status(401).send('Authentication required');
  }
  next();
}

app.get('/admin', basicAuth, (req, res) => {
  res.send('Admin area');
});

app.listen(3000);

If the /admin response lacks a Content-Security-Policy header with frame-ancestors 'none' or a restrictive list, an authenticated user’s browser will load the page inside an attacker’s frame. The attacker can overlay invisible UI elements or use CSS to force clicks on sensitive controls (such as logout, password change, or API calls) while the user believes they are interacting with the attacker’s page. Because the request includes valid Basic Auth credentials, the server processes the action as legitimate.

This risk is compounded when responses include sensitive data or state-modifying methods, as the browser automatically includes the Authorization header regardless of the framing context. Unlike token-based approaches where custom headers are not sent cross-origin, Basic Auth is automatically attached, making the combination especially hazardous if framing is not explicitly prevented.

Remediation focuses on preventing your authenticated pages from being embedded and reducing the impact of accidental framing. The primary server-side control is the Content-Security-Policy frame-ancestors directive. In Express, set the header on authenticated responses (or globally) to restrict who can frame your content.

Below is an updated Express example that adds a strict CSP and separates authentication from sensitive routes:

const express = require('express');
const app = express();
const auth = require('basic-auth');

const users = {
  admin: 's3cret'
};

function basicAuth(req, res, next) {
  const user = auth(req);
  if (!user || users[user.name] !== user.pass) {
    res.set('WWW-Authenticate', 'Basic realm=\"Area\"');
    return res.status(401).send('Authentication required');
  }
  next();
}

// Apply CSP to all responses or specifically to authenticated/sensitive routes
app.use((req, res, next) => {
  res.set("Content-Security-Policy", "frame-ancestors 'none'");
  next();
});

app.get('/admin', basicAuth, (req, res) => {
  res.send('Admin area');
});

app.listen(3000);

If you need to allow embedding from specific origins (for example, a trusted dashboard), set frame-ancestors to those origins instead of 'none':

res.set("Content-Security-Policy", "frame-ancestors 'self' https://trusted.example.com");

Additionally, avoid relying on Basic Auth alone for sensitive operations. Combine it with CSRF tokens or require re-authentication for critical actions, and ensure that sensitive routes do not rely solely on the presence of Authorization headers without validating the request context. The CSP header prevents the browser from loading the page in any frame not explicitly allowed, which blocks the UI redress vector regardless of whether Basic Auth credentials are present.