Clickjacking in Express with Hmac Signatures

Clickjacking is a client-side attack where an attacker tricks a user into interacting with a hidden or disguised UI element inside an invisible or embedded frame. In Express applications that rely on Hmac Signatures for request validation, a common misconception is that cryptographic integrity alone prevents clickjacking. Hmac Signatures protect against tampering of message contents, but they do not enforce how a response is rendered or displayed in the browser. If an endpoint returns a sensitive action (such as a state-changing request) inside an <iframe> or <frame>, and the response does not set appropriate framing protections, an attacker can embed that endpoint in a malicious page and overlay invisible controls or misleading UI on top of it.

Consider an Express route that uses Hmac Signatures to verify the origin of a request but returns HTML that can be framed. The signature may ensure the request parameters were not altered, but it does nothing to stop the browser from displaying the response within a frame on an attacker-controlled page. For example, an endpoint /transfer that performs a money transfer could be loaded invisibly inside an iframe, with the user’s authenticated session cookies sent automatically by the browser. The Hmac Signature might validate the request, yet the UI interaction is hijacked because the response is not protected from being embedded. This is a classic UI redress attack facilitated by missing Content Security Policy (CSP) frame-ancestors rules or absent X-Frame-Options headers.

To observe this in practice, an attacker might craft a page that loads the Express endpoint inside an iframe and overlays a transparent button positioned precisely over a destructive action. Because the endpoint relies solely on Hmac Signatures for security without enforcing framing policies, the user’s interaction is captured by the attacker’s UI. The signature does not mitigate this because the request itself is valid; the risk lies in the browser’s willingness to render the response in a hostile context. This is why defense-in-depth is essential: Hmac Signatures should be complemented with anti-clickjacking headers and CSP directives that prevent the response from being framed in untrusted origins.

Remediation focuses on two layers: ensuring that Hmac Signatures are constructed and verified correctly, and preventing the response from being embedded in frames. Below are concrete Express examples that combine Hmac validation with security headers to mitigate clickjacking.

First, implement Hmac verification for sensitive routes. This example shows how to compute and validate an Hmac signature using Node.js crypto module, ensuring integrity of selected request properties:

const crypto = require('crypto');

function verifyHmac(req, res, next) {
  const receivedSignature = req.headers['x-hmac-signature'];
  const secret = process.env.HMAC_SECRET; // store securely
  const { timestamp, path, body } = req.body;
  const payload = `${timestamp}${path}${JSON.stringify(body)}`;
  const expectedSignature = crypto.createHmac('sha256', secret).update(payload).digest('hex');
  if (!receivedSignature || !crypto.timingSafeEqual(Buffer.from(receivedSignature), Buffer.from(expectedSignature))) {
    return res.status(401).json({ error: 'Invalid signature' });
  }
  next();
}

app.post('/api/action', verifyHmac, (req, res) => {
  res.json({ status: 'ok' });
});

Second, add anti-clickjacking headers to prevent framing of responses. Use helmet or manual headers to enforce restrictive frame policies:

const helmet = require('helmet');
app.use(helmet.frameguard({ action: 'deny' }));
// or manually:
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

For applications that must allow embedding in specific trusted contexts, use CSP frame-ancestors with explicit origins instead of denying all:

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "frame-ancestors 'self' https://trusted.example.com");
  next();
});

Combining Hmac Signatures with these headers ensures that even if a request is valid, it cannot be abused in a clickjacking scenario via framing. This approach aligns with OWASP API Top 10 and browser security mechanisms, reducing the attack surface without disrupting legitimate integrations.