Clickjacking in Nestjs

Clickjacking attacks in Nestjs applications typically exploit the framework's default behavior of allowing any origin to embed your application in an iframe. When an attacker creates a malicious page that loads your Nestjs application inside an invisible iframe, they can trick users into clicking on buttons, links, or forms that the user cannot see. This is particularly dangerous for administrative interfaces, payment processing pages, or any endpoint that performs state-changing operations.

The most common Nestjs-specific manifestation occurs in applications using the @nestjs/platform-express adapter without proper security middleware. Express, by default, does not set the X-Frame-Options header, leaving your Nestjs application vulnerable. This becomes especially problematic in applications that expose sensitive endpoints like user management, financial transactions, or data export functionality.

Consider a typical Nestjs admin dashboard scenario: an attacker creates a page with a hidden iframe pointing to your admin dashboard. They overlay a seemingly innocent button (like "Click here for free gift!") directly over the invisible iframe's login button. When the victim clicks the visible button, they're actually clicking the hidden login button in your Nestjs application, potentially triggering actions like transferring funds, changing account settings, or approving transactions without their knowledge.

Nestjs applications that serve single-page applications (SPAs) built with Angular, React, or Vue.js are particularly vulnerable when the SPA routes handle sensitive operations. If your Nestjs backend serves the SPA and doesn't implement proper clickjacking protection, an attacker can create a malicious page that loads your SPA and manipulates the DOM to overlay deceptive content over critical UI elements.

Another Nestjs-specific scenario involves GraphQL endpoints. When your Nestjs application exposes a GraphQL playground or IDE, these interactive interfaces can be embedded in iframes if not properly secured. An attacker could create a page that loads your GraphQL playground and pre-populates malicious queries, tricking users into executing operations they don't understand.

The risk is amplified in Nestjs applications that use JWT authentication with long-lived tokens. Even if the iframe can't directly access the token due to same-origin policy, the authenticated session can still be exploited if the user is already logged in. The attacker can trigger authenticated actions through the invisible iframe, bypassing CSRF protections that rely on same-origin restrictions.

Real-world examples show that Nestjs applications handling financial transactions, healthcare data, or government services are prime targets. A 2023 analysis of Nestjs applications found that over 60% of production APIs lacked proper clickjacking protection, making them vulnerable to sophisticated phishing campaigns where attackers combine clickjacking with social engineering to bypass multi-factor authentication.

Detecting clickjacking vulnerabilities in Nestjs applications requires a combination of manual testing and automated scanning. The first step is examining your application's HTTP response headers using browser developer tools or curl commands. A vulnerable Nestjs application will not include the X-Frame-Options header or Content-Security-Policy frame-ancestors directive in its responses.

curl -I https://yourapp.com/api/endpoint
HTTP/2 200
Content-Type: application/json
Date: Wed, 08 May 2024 12:34:56 GMT
Connection: keep-alive

Notice the absence of security headers. This is the default behavior for Nestjs applications using the standard @nestjs/platform-express adapter.

middleBrick's automated scanning specifically targets this vulnerability in Nestjs applications. The scanner checks for the presence of X-Frame-Options and Content-Security-Policy headers across all endpoints, including those that might be served by different modules or middleware. For Nestjs applications, middleBrick performs additional checks for GraphQL endpoints, WebSocket connections, and SSE (Server-Sent Events) that might be exposed through the Nestjs framework.

The scanner also tests for frame embedding by attempting to load your application in an iframe and checking the response headers. This active testing approach is particularly effective for Nestjs applications because it can detect vulnerabilities that static analysis might miss, such as those introduced by custom middleware or third-party modules.

For Nestjs applications using Passport.js for authentication, middleBrick checks whether authenticated endpoints are properly protected against clickjacking. The scanner verifies that even if a user is authenticated, the application still enforces frame restrictions to prevent session-based clickjacking attacks.

middleBrick's LLM/AI security scanning also includes detection of AI-powered interfaces within Nestjs applications. If your Nestjs application includes AI features or chatbots, the scanner checks whether these interfaces are vulnerable to clickjacking, which could allow attackers to manipulate AI responses or trigger unintended actions through hidden iframes.

The scanner provides a detailed report showing which endpoints lack clickjacking protection, the specific security headers missing, and the potential impact of each vulnerability. For Nestjs applications, the report includes recommendations for implementing Nestjs-specific solutions like using the helmet-nestjs module or custom middleware.

middleBrick's continuous monitoring feature is particularly valuable for Nestjs applications in production. It can alert you when new endpoints are deployed without proper clickjacking protection or when third-party modules introduce vulnerabilities. The scanner runs on a configurable schedule and integrates with your CI/CD pipeline to prevent vulnerable code from reaching production.

Remediating clickjacking vulnerabilities in Nestjs applications requires implementing proper security headers through middleware or dedicated security modules. The most straightforward approach is using the helmet-nestjs module, which provides Nestjs-specific integration with helmet.js security middleware.

npm install helmet-nestjs

Then in your main.ts or a dedicated security module:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { HelmetMiddleware } from 'helmet-nestjs';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  // Apply helmet middleware globally
  app.use(HelmetMiddleware.create({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        frameAncestors: ["'none'"], // Prevents clickjacking
      },
    },
    xssFilter: true,
    noSniff: true,
    ieNoOpen: true,
  }));
  
  await app.listen(3000);
}
bootstrap();

This configuration sets the Content-Security-Policy header with frame-ancestors: 'none', which is the most robust protection against clickjacking. It prevents your application from being embedded in any iframe, regardless of the origin.

For applications that need to be embedded in iframes from specific trusted origins, you can use a whitelist approach:

app.use(HelmetMiddleware.create({
  contentSecurityPolicy: {
    directives: {
      frameAncestors: ["https://trusted.com"],
    },
  },
}));

Alternatively, you can use the X-Frame-Options header for simpler cases:

import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';

@Injectable()
export class ClickjackingMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    res.setHeader('X-Frame-Options', 'DENY'); // or 'SAMEORIGIN'
    next();
  }
}

Register this middleware globally in your main.ts:

const app = await NestFactory.create(AppModule);
app.use(ClickjackingMiddleware);

For Nestjs applications using GraphQL, you need to ensure the GraphQL playground is also protected:

import { GraphQLModule } from '@nestjs/graphql';

const app = await NestFactory.create(AppModule);
app.use(HelmetMiddleware.create({
  contentSecurityPolicy: {
    directives: {
      frameAncestors: ["'none'"],
    },
  },
}));

// Configure GraphQL with security in mind
app.connectMicroservice({
  transport: Transport.GRPC,
  options: {
    url: 'localhost:5000',
    package: 'app',
    protoPath: './src/app.proto',
  },
});

For applications that serve both API and frontend from the same Nestjs application, you might want to apply clickjacking protection only to API routes:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ClickjackingMiddleware } from './security/clickjacking.middleware';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  
  // Apply middleware only to API routes
  app.use('/api', ClickjackingMiddleware);
  
  await app.listen(3000);
}
bootstrap();

For Nestjs applications using the @nestjs/websockets package, ensure WebSocket endpoints are also protected. While WebSockets don't directly support the same clickjacking protections, you should implement origin checking and authentication for WebSocket connections to prevent similar attacks through real-time channels.

Finally, for Nestjs applications deployed behind reverse proxies like Nginx or Cloudflare, ensure that security headers are not stripped by the proxy. Configure your proxy to preserve or add these headers, as the browser will use whatever headers are sent in the final response to the client.