Clickjacking in Strapi with Firestore

Clickjacking is a client-side UI injection where an attacker tricks a user into clicking a transparent or disguised element inside an embedded frame. When Strapi serves an admin panel or a custom frontend and Firestore is used as the backend datastore, misconfigured HTTP headers and overly permissive embedding rules can make the interface loadable inside an attacker-controlled page.

Strapi does not set strong framing defenses by default for its admin UI or for custom endpoints that render Firestore data. If an admin route or a developer-built page is served without Content-Security-Policy frame-src restrictions and without X-Frame-Options or X-Frame-Options equivalents, the admin panels or data-driven pages can be embedded. An attacker can overlay invisible controls or lure the user into interacting with buttons and links inside the iframe while the user believes they are interacting with a legitimate page.

Because Firestore rules typically govern read/write access but do not enforce framing context, a page that correctly authenticates a user via Strapi can still be clickjacked if the response lacks frame-protection headers. For example, a dashboard showing sensitive Firestore documents could be loaded inside an attacker’s site, and social-engineered clicks could trigger state changes (e.g., toggling a publish flag or invoking a Cloud Function) if the page includes mutative POSTs or form submissions that rely on session cookies or stored tokens.

In a typical Strapi + Firestore flow, the frontend queries Firestore through Strapi controllers or custom services. If these endpoints return data without validating the request origin and without anti-CSRF tokens, and if the UI does not enforce strict CSP, the combination exposes a classic clickjacking surface. The vulnerability is not in Firestore itself but in how Strapi serves content and frames Firestore-driven pages without appropriate browser-enforced protections.

Remediation focuses on two layers: HTTP response headers served by Strapi and secure client-side integration with Firestore. Strapi allows custom response headers via middleware, and frontend templates or API responses should enforce a strict Content-Security-Policy and X-Frame-Options equivalent.

First, configure Strapi to send frame-protection headers. In a custom middleware (e.g., src/middlewares/security.js), add the following before routes are dispatched:

module.exports = {
  config: {
    settings: {
      host: 'your-host',
      admin: {
        autoOpen: false,
      },
    },
    async register(app, { store }) {
      app.use((ctx, next) => {
        ctx.set('X-Frame-Options', 'DENY');
        ctx.set(
          'Content-Security-Policy',
          "default-src 'self'; frame-ancestors 'none';"
        );
        return next();
      });
    },
  },
};

Second, if you serve pages that embed Firestore-driven content (e0.g., a public portal), do not embed admin routes. For public pages, use CSP frame-ancestors to restrict embedding to known origins or 'none' where applicable. Avoid ALLOW-FROM as it is obsolete.

On the Firestore client side, ensure that UI actions are not vulnerable to invisible overlays by guarding critical operations with user-gesture checks and anti-CSRF tokens when applicable. For example, before performing a sensitive write, confirm user intent explicitly in the UI rather than relying on a simple GET that triggers a mutation via a hidden form:

import { initializeApp } from 'firebase/app';
import { getFirestore, doc, updateDoc } from 'firebase/firestore';

const app = initializeApp({ /* config */ });
const db = getFirestore(app);

async function updateDocumentWithUserConsent(docPath, newStatus) {
  // Ensure this is invoked only via a direct user action (e.g., click)
  const docRef = doc(db, docPath);
  await updateDoc(docRef, { status: newStatus });
}

// In UI: Publish

Finally, validate origins on sensitive endpoints if you expose APIs that Firestore data. Although CSP and X-Frame-Options are browser-enforced, server-side logging and strict CORS settings in Strapi reduce the likelihood of misconfiguration being leveraged. Regular scans with middleBrick can detect missing headers and CSP weaknesses; the Pro plan enables continuous monitoring so that regressions are flagged early.