How to configure Laravel Pulse to work with CSP (Content-Security-Policy)?

[rizkywahyuprasetiyo]

I'm using Laravel Pulse to monitor active users and requests in production.

However, since I implemented a Content-Security-Policy (CSP) header with a nonce, Pulse's inline scripts are blocked. Livewire (used by Pulse) injects inline scripts without a way to customize nonce values.

Example error:

Refused to execute inline script because it violates the following Content Security Policy directive...

I've considered:

• Whitelisting 'unsafe-inline' (not secure)
• Adding per-route CSP exceptions (e.g., for /pulse)
• Disabling CSP for Pulse route only

My questions:

• Is there a recommended way to make Pulse CSP-compliant?
• Will future versions allow us to inject our nonce into Pulse scripts?
• Is there a Livewire-safe workaround?

Any help or recommendation is appreciated.

[rjp2525]

I just ran into this, and found helpful insight in a comment by @ziadoz. (Cheers to @valorin too for his comment)

I think it's a fair solution to have separate CSPs, and I have had no issues with Livewire.

My application uses a nonce-based CSP, but Pulse requires unsafe-inline and unsafe-eval which conflicts with nonces (the browser will not apply unsafe-* if a nonce is also present in the policy). I had to separate the CSPs so I had one for Pulse and one for my regular application routes:

<?php

declare(strict_types=1);

namespace App\Http\CSP;

use Spatie\Csp\{
    Directive,
    Keyword,
    Policy,
    Preset
};

class PulseContentSecurityPolicy implements Preset
{
    public function configure(Policy $policy): void
    {
        $policy
            ->add(Directive::BASE, Keyword::SELF)
            ->add(Directive::CONNECT, Keyword::SELF)
            ->add(Directive::DEFAULT, Keyword::NONE)
            ->add(Directive::FONT, [Keyword::SELF, 'data:', 'https://fonts.bunny.net/figtree/files/'])
            ->add(Directive::FORM_ACTION, Keyword::SELF)
            ->add(Directive::FRAME, Keyword::SELF)
            ->add(Directive::IMG, [Keyword::SELF, 'data: https://gravatar.com/avatar/ https://unavatar.io/'])
            ->add(Directive::MEDIA, Keyword::SELF)
            ->add(Directive::OBJECT, Keyword::NONE)
            ->add(Directive::SCRIPT, [Keyword::SELF, Keyword::UNSAFE_INLINE, Keyword::UNSAFE_EVAL])
            ->add(Directive::STYLE, [Keyword::SELF, Keyword::UNSAFE_INLINE, 'https://fonts.bunny.net/css'])
            ->add(Directive::MANIFEST, Keyword::SELF)
            ->add(Directive::FRAME_ANCESTORS, Keyword::NONE);
    }
}

Then in my config/pulse.php I updated the middleware to use the custom policy group:

<?php

use App\Http\CSP\PulseContentSecurityPolicy;
use Laravel\Pulse\Http\Middleware\Authorize;
use Laravel\Pulse\Pulse;
use Laravel\Pulse\Recorders;
use Spatie\Csp\AddCspHeaders;

return [

    // ...

    'middleware' => [
        'pulse-web',
    ],

    // ...

];

Within that group, I basically had to re-build the "web" group but without my nonce and other app-specific middleware, which for Laravel 11+ style configuration, in bootstrap/app.php looks like this:

use App\Http\CSP\PulseContentSecurityPolicy;
use Illuminate\Cookie\Middleware\{
    EncryptCookies,
    AddQueuedCookiesToResponse
};
use Illuminate\Session\Middleware\StartSession,
use Illuminate\View\Middleware\ShareErrorsFromSession,
use Illuminate\Foundation\Http\Middleware\ValidateCsrfToken,
use Illuminate\Routing\Middleware\SubstituteBindings,
use Laravel\Pulse\Http\Middleware\Authorize;
use Spatie\Csp\AddCspHeaders;

// ...

->withMiddleware(function (Middleware $middleware): void {
    $middleware->group('pulse-web', [
        EncryptCookies::class,
        AddQueuedCookiesToResponse::class,
        StartSession::class,
        ShareErrorsFromSession::class,
        ValidateCsrfToken::class,
        SubstituteBindings::class,
        'auth',
        Authorize::class,
        AddCspHeaders::class . ':' . PulseContentSecurityPolicy::class,
    ]);
})

// ...

For Laravel <10.x, in app/Http/Kernel.php:

use App\Http\CSP\PulseContentSecurityPolicy;
use Illuminate\Cookie\Middleware\{
    EncryptCookies,
    AddQueuedCookiesToResponse
};
use Illuminate\Session\Middleware\StartSession,
use Illuminate\View\Middleware\ShareErrorsFromSession,
use Illuminate\Foundation\Http\Middleware\ValidateCsrfToken,
use Illuminate\Routing\Middleware\SubstituteBindings,
use Laravel\Pulse\Http\Middleware\Authorize;
use Spatie\Csp\AddCspHeaders;

protected $middlewareGroups = [
    'pulse-web' => [
        EncryptCookies::class,
        AddQueuedCookiesToResponse::class,
        StartSession::class,
        ShareErrorsFromSession::class,
        ValidateCsrfToken::class,
        SubstituteBindings::class,
        'auth',
        \Laravel\Pulse\Http\Middleware\Authorize::class,
        \Spatie\Csp\AddCspHeaders::class . ':' . PulseContentSecurityPolicy::class,
    ],
];

Hopefully that helps someone else!