Clickjacking in Adonisjs (Typescript)

Clickjacking is a client-side injection vulnerability where an attacker tricks a user into clicking UI elements that are invisible or disguised within an embedded frame. AdonisJS applications that render server-generated HTML can be exposed when responses do not explicitly prevent framing. With TypeScript, the risk arises not from the language itself but from missing runtime protections in controller actions and view rendering. If a controller returns HTML without setting appropriate HTTP headers or meta tags, an AdonisJS app can be embedded in an <iframe> on a malicious site, leading to unauthorized actions being performed on behalf of authenticated users.

AdonisJS typically uses Edge.js views to render HTML. Without explicit safeguards, these views can be loaded inside an attacker-controlled page. TypeScript adds static typing, but it does not enforce security policies; developers must explicitly configure anti-clickjacking measures. Common patterns include rendering pages inside admin dashboards or multi-tenant portals where UI state is managed client-side. If the application relies on cookies for authentication and does not set X-Frame-Options or Content-Security-Policy frame-ancestors, an attacker can craft a page that overlays invisible controls over trusted content, hijacking user clicks.

The combination of AdonisJS view layer and TypeScript-based backend logic means that developers might assume type safety implies runtime protection. However, unless the framework middleware or route handlers explicitly enforce frame embedding rules, the application remains vulnerable. For example, a route defined with TypeScript that returns a view without header configuration can be exploited even if the TypeScript code compiles correctly. Attackers use techniques like CSS positioning and opacity to hide frames and simulate clicks on buttons such as fund transfers or settings changes. Because AdonisJS does not set secure defaults for frame handling, each endpoint that renders HTML must be assessed individually during security scans like those provided by middleBrick, which tests unauthenticated attack surfaces across 12 security checks including Content Security Policy and Authentication controls.

Remediation involves configuring HTTP headers and CSP directives within AdonisJS middleware or route handlers. In TypeScript-based AdonisJS projects, you should define a middleware that sets headers for all responses rendering views. Below is a concrete example using AdonisJS v5+ with TypeScript, where a custom middleware sets X-Frame-Options and Content-Security-Policy to prevent clickjacking.

// start/middleware/anti_clickjacking.ts
import { Exception } from '@poppinss/utils'
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'

export default class AntiClickjackingMiddleware {
  public async handle({ response }: HttpContextContract, next: () => Promise) {
    response.header('X-Frame-Options', 'DENY')
    response.header(
      'Content-Security-Policy',
      "default-src 'self'; frame-ancestors 'none'"
    )
    await next()
  }
}

Register the middleware in start/kernel.ts to apply it globally or to specific controller routes that render views. This ensures that browsers enforce the policy and disallow framing regardless of the referring source.

// start/kernel.ts
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import AntiClickjackingMiddleware from '#ioc/middleware/anti_clickjacking'

const Route = use(Route)

Route.group(() => {
  Route.get('/dashboard', 'DashboardController.show').middleware('antiClickjacking')
  Route.resource('settings', 'SettingsController').apiOnly().middleware('antiClickjacking')
}).middleware([AntiClickjackingMiddleware])

For pages that must be embedded in trusted contexts, use a CSP directive with specific origins instead of 'none'. This allows controlled framing while blocking malicious domains. The following example permits framing only from the same origin, which is safer than an unrestricted policy.

// In the same middleware, allow same-origin framing only
response.header(
  'Content-Security-Policy',
  "default-src 'self'; frame-ancestors 'self'"
)

Additionally, ensure that views do not include <meta http-equiv="X-Frame-Options"> redundantly, as CSP frame-ancestors takes precedence in modern browsers. TypeScript classes and interfaces help maintain consistent response configurations across controllers, but the security guarantees depend on correct runtime application of these headers. middleBrick scans validate such configurations by checking for missing or weak CSP and X-Frame-Options headers as part of its Content Security Policy and Authentication checks.