Clickjacking in Fiber 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 misaligned iframe. In a Fiber application protected with HTTP Basic Authentication, combining weak framing defenses with Basic Auth credentials transmitted on every request can create a scenario where an authenticated session is abused via embedded content.

When a Fiber route uses Basic Auth and does not set explicit framing controls (e.g., X-Frame-Options or Content-Security-Policy: frame-ancestors), the authenticated page may be loaded inside an attacker-controlled page. Because the browser automatically includes the Basic Auth credentials cached for the origin, the victim’s authenticated session within the iframe remains valid. An attacker can overlay invisible buttons or links on top of the iframe content, causing the user to perform unintended actions (such as changing settings or confirming requests) while believing they are interacting with the attacker’s page.

Consider a Fiber endpoint that shows sensitive account information and relies solely on Basic Auth for access:

// vulnerable-fiber.js
const { Fiber } = require('fiber';
const app = new Fiber();

// Basic Auth middleware (simplified example)
app.use((req, res, next) => {
  const auth = req.headers.authorization;
  if (auth && auth.startsWith('Basic ')) {
    const decoded = Buffer.from(auth.slice(6), 'base64').toString('utf-8');
    const [user, pass] = decoded.split(':');
    if (user === 'admin' && pass === 'secret') {
      req.user = user;
      return next();
    }
  }
  res.status(401).send('Authentication required');
});

app.get('/account', (req, res) => {
  res.send(`
    <h1>Account</h1>
    <p>Sensitive data for ${req.user}</p>
  `);
});

app.listen(3000);

If this page lacks frame-ancestor restrictions, an attacker can craft a page that embeds http://localhost:3000/account inside an invisible iframe. When a user who is logged in via Basic Auth visits the attacker’s page, the browser sends the cached credentials automatically, and the attacker can position UI elements to capture clicks intended for their own page. The combination of persistent Basic Auth headers and missing anti-framing headers makes the authenticated session usable in a clickjacking scenario.

Note that this risk is not unique to Basic Auth; any authenticated page that is embeddable can be abused. However, Basic Auth increases exposure because credentials are sent with every request to the origin, and developers may mistakenly believe that authentication alone protects against CSRF or clickjacking, leading to missing frame-ancestor headers.

Remediation focuses on two areas: preventing embedding of authenticated responses and strengthening authentication handling. Even with Basic Auth, you must enforce framing rules and avoid relying on authentication as the sole defense against clickjacking.

1) Set frame-ancestors via Content-Security-Policy

Use a strict CSP header to prevent your pages from being embedded. For Fiber, add middleware that sets Content-Security-Policy with frame-ancestors 'none' (or specific trusted origins). This is the most reliable defense against clickjacking.

// secure-fiber-csp.js
const { Fiber } = require('fiber');
const app = new Fiber();

// CSP middleware to prevent embedding
app.use((req, res, next) => {
  res.set('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// Basic Auth middleware (kept separate for clarity)
app.use((req, res, next) => {
  const auth = req.headers.authorization;
  if (auth && auth.startsWith('Basic ')) {
    const decoded = Buffer.from(auth.slice(6), 'base64').toString('utf-8');
    const [user, pass] = decoded.split(':');
    if (user === 'admin' && pass === 'secret') {
      req.user = user;
      return next();
    }
  }
  res.status(401).send('Authentication required');
});

app.get('/account', (req, res) => {
  res.send(`
    <h1>Account</h1>
    <p>Sensitive data for ${req.user}</p>
  `);
});

app.listen(3000);

2) Explicit X-Frame-Options header (legacy support, but useful for older browsers)

While CSP frame-ancestors is the modern control, setting X-Frame-Options can provide defense-in-depth for older clients. In Fiber, add a middleware that sets this header alongside CSP.

// secure-fiber-headers.js
const { Fiber } = require('fiber');
const app = new Fiber();

app.use((req, res, next) => {
  res.set('X-Frame-Options', 'DENY');
  res.set('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

app.use((req, res, next) => {
  const auth = req.headers.authorization;
  if (auth && auth.startsWith('Basic ')) {
    const decoded = Buffer.from(auth.slice(6), 'base64').toString('utf-8');
    const [user, pass] = decoded.split(':');
    if (user === 'admin' && pass === 'secret') {
      req.user = user;
      return next();
    }
  }
  res.status(401).send('Authentication required');
});

app.get('/account', (req, res) => {
  res.send(`
    <h1>Account</h1>
    <p>Sensitive data for ${req.user}</p>
  `);
});

app.listen(3000);

These headers ensure that browsers will not render the authenticated page inside an iframe, effectively neutralizing clickjacking attempts regardless of the authentication mechanism used.