Clickjacking in Sails with Basic Auth

Clickjacking is a client-side UI redressing attack where an attacker tricks a user into clicking or interacting with elements hidden beneath another page. In a Sails application that uses HTTP Basic Authentication, the combination of persistent browser authentication and missing UI-level protections can amplify the impact of clickjacking. When a user is already authenticated via Basic Auth, the browser automatically sends credentials with every request to the same origin, including requests initiated by an attacker’s embedded or overlapped UI elements.

Basic Authentication does not provide mechanisms to prevent clickjacking; protections must be implemented at the HTTP and UI layer. In Sails, you should set security headers and ensure that authenticated endpoints are guarded against embedding and interaction by untrusted origins.

Set X-Frame-Options and Content-Security-Policy

Ensure your Sails app sends headers that prevent framing. You can configure these in config/http.js or via a policy:

// config/http.js
module.exports.http = {
  middleware: {
    order: ['startRequestTimer', 'cookieParser', 'session', 'mySecurityHeaders', 'bodyParser', 'handleBodyParserError', 'compress', 'methodOverride', 'blueprint', 'router'],
    mySecurityHeaders: function (req, res, next) {
      res.set('X-Frame-Options', 'DENY');
      res.set(
        'Content-Security-Policy',
        "default-src 'self'; frame-ancestors 'none';"
      );
      return next();
    }
  }
};

Explicitly require authentication for sensitive actions

Even when Basic Auth is used, ensure that state-changing operations re-validate credentials or require additional confirmation. Do not rely on the browser’s cached credentials alone to protect critical endpoints.

Example: Sails controller with Basic Auth and protections

Below is a complete example of a Sails controller that enforces Basic Auth and includes security headers for clickjacking mitigation:

// api/controllers/SecureController.js
const basicAuth = require('basic-auth');

module.exports = {
  adminAction: function (req, res) {
    const user = basicAuth(req);
    if (!user || user.name !== 'admin' || user.pass !== 'secret') {
      res.set('WWW-Authenticate', 'Basic realm="Secure Area"');
      return res.status(401).send('Authentication required.');
    }
    // Proceed only after successful auth
    return res.ok({ message: 'Action executed securely.' });
  }
};

Complementary frontend practices

Ensure your Sails-rendered views include frame-busting snippets where appropriate and avoid embedding sensitive pages in iframes. Combine server-side headers with client-side defenses for defense in depth.