Clickjacking in Loopback

Clickjacking in Loopback applications occurs when an attacker embeds your Loopback API or admin interface inside an iframe on a malicious page, tricking users into interacting with your application while believing they're using a legitimate interface. This is particularly dangerous for Loopback applications because they often expose administrative endpoints and sensitive data through their REST API.

The most common attack pattern involves creating a transparent iframe that loads your Loopback application's admin interface or API explorer. The attacker then overlays this iframe with deceptive content—perhaps a game or a fake button—that appears to be the actual interface. When users click what they believe is a harmless element, they're actually interacting with your Loopback application's UI, potentially triggering destructive actions like deleting data, changing permissions, or exposing sensitive information.

In Loopback specifically, clickjacking vulnerabilities often appear in the API Explorer interface (Swagger UI) that's automatically generated for your endpoints. Since Loopback 3 and earlier versions don't include clickjacking protection by default, an attacker can easily embed the API Explorer in an iframe and trick users into making authenticated API calls. This is especially problematic if your Loopback application uses session-based authentication, as the user's session cookies will be automatically included in the iframe context.

Another Loopback-specific manifestation occurs with the built-in Explorer interface for LoopBack models. If your application exposes model APIs without proper authentication or authorization, an attacker can create a malicious page that tricks users into performing CRUD operations on your data models through the exposed explorer interface.

// Vulnerable Loopback 3 application exposing API Explorer
var loopback = require('loopback');
var boot = require('loopback-boot');
var app = module.exports = loopback();

app.start = function() {
  // start the web server
  return app.listen(function() {
    app.emit('started');
    var baseUrl = app.get('url').replace(/\/api$/, '');
    console.log('Web server listening at: %s', baseUrl);
    
    // API Explorer is exposed without clickjacking protection
    if (app.get('explorer')) {
      console.log('Browse your REST API at %s/explorer', baseUrl);
    }
  });
};

// Vulnerable: No X-Frame-Options or Content-Security-Policy headers
boot(app, __dirname, function(err) {
  if (err) throw err;
  
  // Start the application if run directly
  if (require.main === module)
    app.start();
});

This code demonstrates a typical Loopback 3 application where the API Explorer is exposed without any clickjacking protection headers. An attacker can embed this explorer interface in an iframe and trick users into making API calls they don't intend to make.

Detecting clickjacking vulnerabilities in Loopback applications requires examining both the application configuration and the runtime headers being sent to clients. The most straightforward detection method is to inspect the HTTP response headers for clickjacking protection mechanisms.

For Loopback applications, you should check for the presence of X-Frame-Options header and Content-Security-Policy (CSP) frame-ancestors directive. In Loopback 3 and earlier versions, these headers are not included by default, making applications vulnerable out of the box. You can test this by making a request to any endpoint and examining the response headers:

curl -I https://your-loopback-app.com/api/users

If the response doesn't include X-Frame-Options or CSP headers, your application is vulnerable to clickjacking.

middleBrick provides automated detection for clickjacking vulnerabilities in Loopback applications. When you scan a Loopback API endpoint, middleBrick checks for the absence of clickjacking protection headers and reports this as a security finding. The scanner examines the HTTP response headers and identifies whether your Loopback application is exposing itself to clickjacking attacks through the API Explorer or other endpoints.

For more comprehensive detection, middleBrick's scanning engine tests multiple endpoints across your Loopback application, including:

• API Explorer endpoints (typically /explorer or /api/explorer)
• Model API endpoints (/api/models/*)
• Authentication endpoints (/api/users/*, /api/authentications/*)
• Administrative endpoints

The scanner provides specific findings about which endpoints are vulnerable and what type of clickjacking protection is missing. For Loopback applications, middleBrick can also detect if the API Explorer is exposed without authentication, which compounds the clickjacking risk.

Here's an example of what middleBrick might report for a vulnerable Loopback application:

{
  "clickjacking_vulnerability": {
    "severity": "high",
    "description": "X-Frame-Options header missing from API Explorer endpoint",
    "impact": "Attacker can embed API Explorer in iframe and trick users into making authenticated API calls",
    "remediation": "Add X-Frame-Options: DENY header to all responses",
    "endpoint": "/explorer",
    "loopback_version": "3.0.0"
  }
}

This level of specificity helps developers understand exactly where the vulnerability exists and how to fix it in the context of their Loopback application.

Remediating clickjacking vulnerabilities in Loopback applications involves adding proper HTTP headers to prevent your application from being embedded in iframes. The approach varies slightly depending on your Loopback version and deployment architecture.

For Loopback 3 applications, the most straightforward remediation is to add middleware that sets the X-Frame-Options header. Here's how to implement this protection:

// Loopback 3 middleware to prevent clickjacking
module.exports = function(clickjackingProtection) {
  return function(req, res, next) {
    // Set X-Frame-Options to DENY for all responses
    res.setHeader('X-Frame-Options', 'DENY');
    
    // Alternative: Allow only from same origin
    // res.setHeader('X-Frame-Options', 'SAMEORIGIN');
    
    next();
  };
};

Save this middleware in a file like server/middleware/clickjacking.js and configure it in your server/middleware.json:

{
  "initial": {
    "clickjacking": {
      "enabled": true,
      "params": {}
    }
  }
}

For Loopback 4 applications, you can use Express middleware since Loopback 4 is built on Express:

import {Application, CoreBindings, express} from '@loopback/core';
import {Request, Response, NextFunction} from 'express';

export class ClickjackingProtectionMiddleware implements ExpressMiddleware
{
  async handle(request: Request, response: Response, next: NextFunction) {
    // Set X-Frame-Options to DENY
    response.setHeader('X-Frame-Options', 'DENY');
    
    // Set Content-Security-Policy for modern browsers
    response.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
    
    next();
  }
}

// In your application constructor
export class YourApplication extends BootMixin(
  ServiceMixin(
    RepositoryMixin(RestApplication)
  )
) {
  constructor(options?: ApplicationConfig) {
    super(options);
    
    // Bind the clickjacking protection middleware
    this.bind('middleware.clickjacking').toClass(ClickjackingProtectionMiddleware);
    
    // Apply the middleware globally
    this.middleware((middleware: ExpressMiddleware) => {
      return middleware.handle;
    });
  }
}

For applications deployed behind reverse proxies like Nginx or Apache, you can also add clickjacking protection at the proxy level:

server {
    listen 80;
    server_name your-loopback-app.com;
    
    # Clickjacking protection
    add_header X-Frame-Options DENY always;
    add_header Content-Security-Policy "frame-ancestors 'none'" always;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

middleBrick's CLI tool can help verify that your remediation is working correctly. After implementing the protection, you can scan your endpoints to confirm that the headers are now being sent:

middlebrick scan https://your-loopback-app.com/api/users --output json

The scan should report that clickjacking protection is now in place, giving you confidence that your Loopback application is no longer vulnerable to this type of attack.