Clickjacking in Koa with Mutual Tls

Clickjacking is a client-side interface manipulation attack where an attacker tricks a user into clicking or interacting with a transparent or disguised element within an embedded page. In a Koa application protected by Mutual Transport Layer Security (Mutual TLS), the presence of client certificate authentication does not prevent clickjacking. Mutual TLS ensures that the client presenting a valid certificate is the one establishing the TLS connection, but it does not enforce how that authenticated session is used within the application or how responses are framed in the browser.

When a Koa server uses Mutual TLS, it verifies client certificates during the TLS handshake. This is useful for authentication and access control at the transport layer. However, if the application then serves HTML that embeds sensitive endpoints in iframes, forms, or buttons without anti-clickjacking protections, an authenticated client can still be tricked into performing unintended actions. For example, an attacker might embed an administrative endpoint that revokes user permissions inside an invisible iframe and lure a user who has presented a valid client certificate to visit the malicious site.

The combination of Mutual TLS and clickjacking exposes a common misconception: transport-layer authentication equals application-layer authorization and UI safety. Mutual TLS binds identity to the connection, but the application must still enforce frame-busting, Content Security Policy (CSP) frame-ancestors rules, and X-Frame-Options to ensure that responses are not embedded maliciously. Without these headers, an authenticated session in Koa can be hijacked visually and interactively via clickjacking techniques, regardless of the strength of the certificate validation.

Consider an endpoint in Koa that performs a sensitive operation like changing an email or revoking access. If this route does not set appropriate framing protections, an attacker can craft a page that loads this route in a hidden form or iframe, submitting requests on behalf of an authenticated user. The Mutual TLS layer will have already validated the client certificate, so the request appears legitimate to the server, but the user never explicitly consented to the action within the application context.

Real-world attack patterns like those cataloged in the OWASP API Top 10 and documented under common web security risks highlight the need for defense-in-depth. Even with strong client authentication, applications must implement UI-level protections to prevent unauthorized interactions. This is where middleBrick scans become valuable: the 12 security checks include a Data Exposure and Unsafe Consumption assessment that can detect missing anti-clickjacking headers in the unauthenticated scan of your Koa endpoints.

Securing a Koa application with Mutual TLS requires both correct TLS configuration and application-level headers to prevent clickjacking. Below are concrete code examples showing how to set up Mutual TLS in Koa using the https module and koa, and how to add framing protection headers.

Mutual TLS Server Setup in Koa

To enable Mutual TLS in Koa, configure the HTTPS server with a CA certificate that verifies client certificates, and set the requestCert and rejectUnauthorized options. This ensures that only clients with trusted certificates can establish a connection.

const https = require('https');
const fs = require('fs');
const Koa = require('koa');
const app = new Koa();

const serverOptions = {
  key: fs.readFileSync('server-key.pem'),
  cert: fs.readFileSync('server-cert.pem'),
  ca: fs.readFileSync('ca-cert.pem'),
  requestCert: true,
  rejectUnauthorized: true,
};

// Middleware to expose client certificate details for logging or authorization
app.use(async (ctx, next) => {
  const cert = ctx.req.clientCertificate;
  if (cert) {
    ctx.state.clientCert = {
      subject: cert.subject,
      fingerprint: cert.fingerprint,
    };
  }
  await next();
});

// Example protected route
app.use(async (ctx) => {
  ctx.body = `Authenticated client: ${JSON.stringify(ctx.state.clientCert)}`;
});

https.createServer(serverOptions, app.callback()).listen(8443, () => {
  console.log('Mutual TLS Koa server running on port 8443');
});

Anti-Clickjacking Headers in Koa

Even with Mutual TLS, you must prevent your responses from being framed. Use the X-Frame-Options header and Content Security Policy frame-ancestors directive to control which origins can embed your pages.

const Koa = require('koa');
const app = new Koa();

// Set X-Frame-Options to deny framing entirely
app.use(async (ctx, next) => {
  ctx.set('X-Frame-Options', 'DENY');
  await next();
});

// Use CSP frame-ancestors for modern browsers
app.use(async (ctx, next) => {
  ctx.set('Content-Security-Policy', "frame-ancestors 'none'");
  await next();
});

app.use(async (ctx) => {
  ctx.body = 'This page cannot be embedded';
});

app.listen(3000, () => console.log('Koa app listening on port 3000'));

Combined Approach

For robust protection, combine Mutual TLS client verification with strict framing headers. This ensures that only authorized clients establish TLS connections, and that authenticated responses are not embeddable by external attackers.

const https = require('https');
const fs = require('fs');
const Koa = require('koa');
const app = new Koa();

const serverOptions = {
  key: fs.readFileSync('server-key.pem'),
  cert: fs.readFileSync('server-cert.pem'),
  ca: fs.readFileSync('ca-cert.pem'),
  requestCert: true,
  rejectUnauthorized: true,
};

app.use(async (ctx, next) => {
  ctx.set('X-Frame-Options', 'DENY');
  ctx.set('Content-Security-Policy', "frame-ancestors 'none'");
  const cert = ctx.req.clientCertificate;
  if (cert) {
    ctx.state.clientCert = {
      subject: cert.subject,
      fingerprint: cert.fingerprint,
    };
  }
  await next();
});

app.use(async (ctx) => {
  ctx.body = `Secure endpoint for client: ${ctx.state.clientCert.fingerprint}`;
});

https.createServer(serverOptions, app.callback()).listen(8443, () => {
  console.log('Mutual TLS Koa server with anti-clickjacking headers running on port 8443');
});

These examples demonstrate how to enforce Mutual TLS in Koa while explicitly preventing clickjacking through HTTP headers. Security tools like middleBrick can validate that these headers are present and that the application does not expose sensitive endpoints to unauthorized embedding, even when clients present valid certificates.