Clickjacking in Strapi with Bearer Tokens

Clickjacking is a client-side vulnerability where an attacker tricks a user into interacting with a hidden UI element inside an invisible or disguised frame. In Strapi, if an authenticated admin or API consumer performs privileged actions while authenticated with a Bearer Token, a malicious site can embed the Strapi admin panel or an action endpoint inside an <iframe> and overlay invisible controls. Because the request includes a valid Bearer Token in the Authorization header, the browser automatically sends credentials, allowing the attacker to perform actions on behalf of the victim without their knowledge.

When Strapi admin pages or custom API routes are reachable while authenticated via Bearer Token (e.g., from a mobile app or a single-page application that stores the token in memory or localStorage), and those pages do not enforce frame-ancestor policies, clickjacking becomes feasible. Even though Bearer Tokens protect authentication in transit, they do not prevent the browser from including them in requests initiated by a malicious page. This is especially risky if Strapi’s admin UI is accessible from non-localhost origins without Content Security Policy (CSP) frame-ancestors directives, or if developer endpoints or GraphQL explorers are exposed and lack anti-clickjacking controls.

For example, consider a Strapi backend serving an admin interface at https://admin.example.com and an API endpoint at https://api.example.com/users/me that relies on a Bearer Token. An attacker can craft a page that loads https://admin.example.com/content-manager/explorer inside a transparent iframe and position a transparent button over a dangerous action such as publishing content or changing roles. When an admin with an active session visits the attacker’s page, the request to Strapi includes the Bearer Token automatically, making the unauthorized action appear legitimate to the server. Because Strapi’s security configuration does not inherently mitigate framing, the combination of an authenticated session (Bearer Token) and missing frame controls exposes the system to clickjacking.

OpenAPI/Swagger analysis can reveal endpoints that lack anti-clickjacking protections or are served with permissive CORS and missing CSP headers. middleBrick scans identify missing security headers such as Content-Security-Policy and X-Frame-Options during its 12 security checks, helping you detect exposed admin surfaces that could be targeted alongside Bearer Token–protected routes.

To mitigate clickjacking when using Bearer Tokens in Strapi, apply frame-protection headers and ensure that sensitive admin interfaces are not embeddable. Strapi allows header customization through its extension system or server middleware, depending on the deployment mode. Below are concrete examples for both approaches.

1. Configure CSP and X-Frame-Options via Strapi server middleware

In Strapi v4+, you can add custom server middleware to inject security headers for all responses. Create or update ./src/middlewares/security.js (in a custom template or plugin) to set Content-Security-Policy with a strict frame-ancestors directive and X-Frame-Options.

// ./src/middlewares/security.js
module.exports = (config, { env }) => {
  return {
    name: 'security-headers',
    register: async () => {
      // This will be applied by Strapi’s server layer
      config.server.settings.headers = [
        {
          key: 'Content-Security-Policy',
          value: "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'none';"
        },
        {
          key: 'X-Frame-Options',
          value: 'DENY'
        }
      ];
    }
  };
};

The frame-ancestors 'none' in CSP, combined with X-Frame-Options: DENY, ensures that browsers will not render Strapi pages inside frames, effectively neutralizing clickjacking attempts regardless of whether the request uses a Bearer Token.

2. Protect admin routes selectively

If you want to allow embedding for specific trusted contexts (e.g., a partner portal), set frame-ancestors to those origins instead of 'none'. For admin-only pages, keep a strict policy and ensure that the admin route is not unintentionally exposed via public CORS settings. Example CSP allowing only a trusted domain:

Content-Security-Policy: default-src 'self'; frame-ancestors 'self' https://partner.example.com;

3. Ensure Bearer Token usage does not leak into insecure contexts

When consuming Strapi APIs from a frontend, store Bearer Tokens securely (e.g., httpOnly cookies or secure storage with appropriate mitigations) and avoid including them in URLs. Ensure that requests to sensitive endpoints include the Authorization header only over HTTPS. Validate origins on the server when possible, and use CORS to restrict origins that can interact with your API.

4. Verify using browser devtools and scans

After applying these headers, use browser developer tools to confirm the presence of Content-Security-Policy and X-Frame-Options on responses for admin and API routes. middleBrick can validate that these headers are present and that the CSP frame-ancestors directive is correctly blocking framing attempts.