Clickjacking in Laravel with Firestore

Clickjacking is a client-side vulnerability where an attacker tricks a user into interacting with a hidden or disguised UI element inside an iframe. When Laravel serves views that render Firestore-backed data, specific patterns can expose the application to clickjacking.

Consider a Laravel app that reads a Firestore document to render a user’s profile widget on a page. If the view embeds a third‑party widget or an admin Firestore console link inside an iframe and does not enforce frame‑ancestor policies, an attacker can overlay invisible controls on top of the Firestore UI elements (e.g., a “Delete” button in a rendered iframe). Even though Firestore enforces its own authentication and security rules, the browser will send the user’s cookies or auth tokens to the embedded Firestore endpoint if the user is authenticated, allowing the attacker to perform actions on behalf of the victim.

Laravel’s default configuration does not set restrictive X-Frame-Options or Content-Security-Policy headers for responses, and views that dynamically render Firestore data (e.g., via a public API key or service account credentials on the server) may inadvertently expose endpoints that can be framed. For example, a route like /user/{id}/profile that fetches a Firestore document and renders it in an <iframe> without CSP frame‑ancestors can be embedded on a malicious site. Because Firestore listeners and UI components often include sensitive controls (e.g., edit or delete), an attacker can lure a victim into clicking a benign element that actually triggers a Firestore write through the iframe.

The risk is compounded when Laravel proxies Firestore operations through server‑side routes that do not validate the request origin. An attacker can craft a page that embeds https://your-laravel-app.example.com/firestore-proxy in an iframe and simulate clicks via JavaScript, leveraging the victim’s active session to mutate Firestore data. Even if Firestore rules restrict direct access, the Laravel endpoint may perform server‑side authorization that is bypassed via CSRF or missing origin checks when embedded.

Remediation focuses on preventing your Laravel pages from being embedded and ensuring Firestore operations are protected by origin checks. Use HTTP headers, CSP, and explicit referrer checks in your Laravel middleware and views.

1. Set X-Frame-Options and CSP headers in Laravel

In app/Http/Middleware/SecureHeaders.php, add headers to prevent framing:

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class SecureHeaders
{
    public function handle(Request $request, Closure $next)
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none';");
        return $response;
    }
}

Register the middleware in app/Http/Kernel.php under $middleware or $middlewareGroups to apply it globally or to specific routes that render Firestore-backed views.

2. Validate Origin and Referer for Firestore proxy endpoints

Create a middleware that ensures only requests from your trusted origins can invoke Firestore operations:

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class ValidateFirestoreOrigin
{
    public function handle(Request $request, Closure $next)
    {
        $allowedOrigin = 'https://your-laravel-app.example.com';
        $origin = $request->header('Origin');
        $referer = $request->header('Referer');

        if ($origin !== $allowedOrigin || ! str_starts_with($referer, $allowedOrigin)) {
            abort(403, 'Invalid request origin.');
        }

        return $next($request);
    }
}

Apply this middleware to routes that proxy Firestore reads/writes. For direct frontend access, ensure your Firestore security rules validate the request context (e.g., using custom claims or UID checks) and never rely solely on referer/origin checks, as those can be omitted by attackers.

3. Example Firestore read/write with proper server‑side checks

In a controller, avoid exposing Firestore API keys in the frontend. Instead, perform operations server‑side after validating the authenticated user:

use Google\Cloud\Firestore\FirestoreClient;
use Illuminate\Http\Request;

class ProfileController
{
    protected $firestore;

    public function __construct()
    {
        $this->firestore = new FirestoreClient([
            'projectId' => env('GOOGLE_CLOUD_PROJECT'),
        ]);
    }

    public function update(Request $request)
    {
        $request->validate([
            'user_id' => 'required|exists:users,id',
            'display_name' => 'required|string|max:255',
        ]);

        // Ensure the authenticated user matches the user_id to prevent horizontal privilege escalation
        if ($request->user()->id !== (int) $request->user_id) {
            abort(403, 'Unauthorized action.');
        }

        $docRef = $this->firestore->collection('users')->document($request->user_id);
        $docRef->update([
            ['path' => 'profile.displayName', 'value' => $request->display_name],
        ]);

        return response()->json(['status' => 'updated']);
    }
}

This ensures that Firestore writes are gated by Laravel’s authentication and explicit ownership checks, reducing the attack surface for clickjacking via compromised UI elements.

4. Avoid embedding Firestore admin or sensitive endpoints in iframes

If you must embed third‑party content, use Content-Security-Policy: frame-ancestors 'self' https://trusted.example.com; instead of DENY and ensure the embedded page does not contain sensitive Firestore controls. For public widgets, generate short‑lived, scoped tokens on the server and pass them to the iframe via signed query parameters, validating them in your proxy route.