Clickjacking in Restify with Api Keys

Clickjacking is a client-side vulnerability where an attacker tricks a user into interacting with invisible or disguised UI elements, often by embedding the target site in an iframe. In Restify, a Node.js-focused API framework, clickjacking typically arises when API responses do not enforce frame-embedding restrictions. If your Restify endpoints serve HTML or are proxied to front-end views that embed third-party content, an attacker can use an iframe to overlay transparent controls over a page that relies on Api Keys for authorization.

When Api Keys are used as bearer tokens in headers (e.g., x-api-key), they are not automatically protected from clickjacking if the page making those requests is embedded. For example, a compromised admin dashboard that includes a third-party widget could initiate authenticated requests using stored Api Keys without user awareness. Because Restify APIs often power JavaScript clients, the browser will include credentials (including Api Keys) in requests initiated from within an embedded frame if SameSite and Content-Security-Policy are not properly configured. The API key itself is not leaked via a clickjacking vector, but its usage in an authenticated session can be abused to perform unauthorized actions in the context of a logged-in user or service.

A concrete scenario: Suppose a Restify service exposes an endpoint POST /v1/transfer that requires an Api Key in the x-api-key header. If a client-side application consuming this API is framed by a malicious site, the browser may send the Api Key along with any session cookies (if present) to the Restify endpoint. While Restify does not inherently expose Api Keys via responses, insecure CSP and missing frame-busting or anti-CSRF measures in the consuming client create a chain that can lead to unauthorized operations. MiddleBrick scans for such misconfigurations under its ‘BFLA/Privilege Escalation’ and ‘Input Validation’ checks, correlating CSP headers, frame rules, and authentication patterns to highlight risky compositions of clickjacking-prone UI and Api Key usage.

Even though Restify typically builds APIs consumed server-to-server, front-end integrations can expose these endpoints to browser contexts where clickjacking risks exist. The framework does not set frame-protection headers by default, so developers must explicitly configure HTTP headers to prevent embedding. The interplay between Api Key-based authentication and client-side framing is critical: Api Keys must never be relied upon alone in browser contexts, and strict isolation of authentication and UI layers is required to mitigate clickjacking-assisted abuse.

To remediate clickjacking risks when using Api Keys in Restify, focus on three areas: secure header configuration, strict CSP, and explicit frame rules. Below are code examples for a Restify server that mitigates clickjacking while keeping Api Key validation intact.

1. Set security headers to prevent framing and control CSP. Use the restify.plugins.secureHeaders plugin and add custom rules to disallow embedding.

const restify = require('restify');
const plugins = restify.plugins;

const server = restify.createServer();

// Use secureHeaders plugin and customize frame and CSP rules
server.use(plugins.secureHeaders({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'unsafe-inline'"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", "data:"],
      connectSrc: ["'self'"],
      frameAncestors: ["'none'"] // Prevents framing by any site
    }
  },
  frameguard: {
    action: 'deny' // Equivalent to X-Frame-Options: DENY
  }
}));

// Example Api Key validation middleware
server.use((req, res, next) => {
  const apiKey = req.headers['x-api-key'];
  const validKeys = new Set(['abc123', 'trusted-key-456']);
  if (!apiKey || !validKeys.has(apiKey)) {
    return res.send(401, { error: 'Invalid Api Key' });
  }
  return next();
});

server.get('/v1/resource', (req, res, next) => {
  res.send({ data: 'protected' });
  return next();
});

server.listen(8080, () => {
  console.log('Server listening on port 8080');
});

2. For clients that make browser requests to Restify APIs, ensure that requests are not susceptible to forged frames. Avoid storing Api Keys in JavaScript-accessible storage when possible; instead, use short-lived tokens obtained via a secure backend flow. If you must call the API from the browser, ensure the requesting page sets crossorigin and does not allow arbitrary sites to embed it.

<!-- Safe client-side fetch example -->
<script>
  fetch('https://api.example.com/v1/resource', {
    method: 'GET',
    headers: {
      'x-api-key': 'abc123'
    },
    mode: 'same-origin' // or 'cors' with proper server headers
  }).then(response => response.json())
    .then(data => console.log(data));
</script>

3. Combine CSP frame-ancestors with server-side validation. If you serve HTML views from Restify, explicitly define who can embed your pages. Avoid using permissive CSP values when authentication is involved.

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

By layering secure headers, strict CSP, and explicit Api Key validation, you reduce the attack surface for clickjacking while preserving the utility of Api Keys in Restify services. Remember that clickjacking defenses complement, but do not replace, proper authentication and authorization checks at the endpoint level.