Clickjacking in Express with Api Keys

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 misleading frame. When an Express application embeds third-party content or exposes sensitive operations behind embedded frames without anti-clickjacking protections, and also relies on API keys for authorization, the combination can expose key-dependent endpoints to unauthorized actions.

In Express, developers sometimes use API keys passed via headers or query parameters to authorize requests to backend services (for example, calling a payment provider or internal microservice). If these key-bearing requests are initiated from pages that are loaded in embedded frames and the page does not enforce frame-busting or CSP frame-ancestor rules, an attacker can overlay invisible UI elements on top of the legitimate page. The user may unknowingly trigger actions that send the API key and perform operations on behalf of the user or application.

Consider an Express route that forwards a request to an external service using an API key:

app.get('/proxy-payment', (req, res) => {
  const apiKey = req.query.apiKey;
  fetch('https://api.payment.example/charge', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${apiKey}` },
    body: JSON.stringify({ amount: req.query.amount })
  }).then(r => r.json()).then(data => res.json(data));
});

If this route is rendered inside an iframe on a page controlled by an attacker, and the API key is exposed via query parameters or predictable headers, the attacker can craft a form or image request that forces the user’s browser to invoke the proxy with the victim’s key. Because the browser automatically includes cookies and, in some configurations, URL-based credentials, the request may succeed, leading to unauthorized charges or data exposure. The API key is not inherently vulnerable because of clickjacking, but its exposure in a frame context and lack of anti-clickjacking controls increases the risk of social engineering via embedded content.

Additionally, if the Express app serves pages that include API keys in JavaScript or embeds third-party dashboards inside frames without setting X-Frame-Options or Content Security Policy frame-ancestors, it widens the attack surface. Attackers can combine clickjacking with social engineering to convince users to perform actions that are authenticated via API keys, bypassing intended isolation between UI and backend authorization boundaries.

Remediation focuses on preventing the API key from being usable in a clickjacked context and ensuring that requests carrying keys are protected by modern framing controls. Below are concrete Express patterns that reduce risk when API keys are used.

1. Prevent embedding of key-bearing pages with X-Frame-Options:

const express = require('express');
const app = express();
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  next();
});

This denies any embedding of responses served by Express, which is appropriate for pages that handle or expose API keys.

2. Use CSP frame-ancestors for finer control (recommended over X-Frame-Options when multiple domains are involved):

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "default-src 'self'; frame-ancestors 'none'"
  );
  next();
});

3. Avoid exposing API keys in URLs or JavaScript that may be loaded in frames. Instead, keep keys on the server and use short-lived session tokens for client-side actions:

app.post('/charge', async (req, res) => {
  const { amount, sessionToken } = req.body;
  // Validate sessionToken, do not accept raw API keys from the client
  const key = await getServerSideKeyForSession(sessionToken);
  const response = await fetch('https://api.payment.example/charge', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${key}` },
    body: JSON.stringify({ amount })
  });
  const data = await response.json();
  res.json(data);
});

4. If you must proxy requests that include API keys, enforce strict referrer and origin checks on the server to reduce the likelihood of cross-origin misuse:

app.use((req, res, next) => {
  const allowedOrigin = 'https://yourdomain.com';
  const origin = req.headers.origin;
  if (origin !== allowedOrigin) {
    return res.status(403).send('Forbidden');
  }
  next();
});

5. Do not log or echo API keys in responses or error messages, and rotate keys regularly. Combine these measures with authentication and CSRF protections for state-changing operations to reduce the impact of clickjacking attempts that target key-bearing flows.