CSP + Vite build | Laravel | Page 1

floral cedar Sep 24, 2024, 6:55 PM

#

I'm having trouble implementing Content Security Policy (CSP) with nonces using Vite for asset building. Here's the situation:

I'm using the Spatie CSP package to set up my CSP. My policy is configured to use nonces for scripts and styles.

    public function configure(): void
    {
        $this
            ->addDirective(Directive::BASE, Keyword::SELF)
            ->addDirective(Directive::CONNECT, Keyword::SELF)
            ->addDirective(Directive::DEFAULT, Keyword::SELF)
            ->addDirective(Directive::FORM_ACTION, Keyword::SELF)
            ->addDirective(Directive::IMG, Keyword::SELF)
            ->addDirective(Directive::MEDIA, Keyword::SELF)
            ->addDirective(Directive::OBJECT, Keyword::NONE)
            ->addDirective(Directive::SCRIPT, [Keyword::SELF, 'https://app.domain.com', 'https://domain.com'])
            ->addDirective(Directive::STYLE, [Keyword::SELF, 'https://fonts.bunny.net'])
            ->addDirective(Directive::FONT, [Keyword::SELF, 'https://fonts.bunny.net'])
            ->addDirective(Directive::FRAME, Keyword::NONE)
            ->addDirective(Directive::WORKER, Keyword::SELF)
            ->addDirective(Directive::MANIFEST, Keyword::SELF)
            ->addNonceForDirective(Directive::SCRIPT)
            ->addNonceForDirective(Directive::STYLE);
    }

In development, everything works fine - a new nonce is generated for each request.
However, after building assets with Vite (npm run build), I get CSP errors in production.

The main issue seems to be that the nonce generated for the CSP header doesn't match the nonce in the built script tags. This is because Vite can't inject the dynamically generated nonce into the built files.

Has anyone successfully implemented CSP with nonces in a Laravel + Vite setup?

dawn pewter Sep 24, 2024, 7:27 PM

#

You should use the same nonce for both, spatie probably generates their own nonce
https://laravel.com/docs/11.x/vite#content-security-policy-csp-nonce

floral cedar Sep 24, 2024, 7:33 PM

#

I use a custom generator to return the same:

    public function generate(): string
    {
        return Vite::cspNonce();
    }

dawn pewter Sep 24, 2024, 8:07 PM

#

Afaik that's all I do in my own apps. A custom generator, return the Vite nonce, and update the config
Can't look at the code right now, I'll get back to you tomorrow

floral cedar Sep 24, 2024, 8:22 PM

#

Ok looks like I found the issue. It looks like few frontend component (vaul/Radix/shadcn) that adds stylesheet..can not do much with that other than not adding nonce to style at the moment. They have open issues for that.

#CSP + Vite build