Using Vite with laravel-csp

[Sirloko]

I tried installing laravel-csp on my laravel 9 project which uses vite, but i'm unable to add the nonce to the scripts and style. Is there a better approach?

[stevepop]

We are having the same problem after migrating an existing codebase to Laravel 9. Moving from Laravel to Vite has been throwing up a number of CSP related errors. I am interested in the solution to handle this. Thanks!

[Sirloko]

You can try going through @freekmurze note as well as https://laravel.com/docs/9.x/vite#content-security-policy-csp-nonce , its quite straight forward.
However in my case i still had some minor errors(perhaps its because I use livewire) so i had to write a custom middleware as a temporary fix.
Try out the solution and keep me posted.

[freekmurze]

In readme I've added some notes on how to use this package with Vite.

[zack6849]

any chance for similar docs for those of us still using mix and unable to migrate to vite yet?

[Sirloko]

have you tried using laravel shift?

[hofmannsven]

I added this policy to use Vite in development:

$this->addDirective(Directive::CONNECT, Scheme::WSS);

[J5Dev]

Hi, sorry to resurrect an old thread, but I didn't feel it warranted an entire new thread, as it is more on an extension of this discussion... which I had already used to fix the wss, as per the suggestion by @hofmannsven (thank you).

My issue is that I now have everything working perfectly as we need... as in when using this in production, or locally with the assets build by Vite (vite build) it works fine.

However, when trying to use hot module reloading functionality with Vite dev, we are plagued with the dreaded "Refused to apply inline style because it violates the following Content Security Policy directive: "style-src ..." error. This is due to the way Vite seems to want to inject resources for the HMR function.

I have tried pretty much everything I can think of, but nothing works at all.

For reference, heres the base policy in use:

class BasePolicy extends Basic
{
    public function configure()
    {
        parent::configure();

        if (app()->environment() === 'local') {
            $this
                ->addDirective(Directive::BASE, 'vite.newwebsite.test:*')
                ->addDirective(Directive::CONNECT, 'vite.newwebsite.test:*')
                ->addDirective(Directive::DEFAULT, 'vite.newwebsite.test:*')
                ->addDirective(Directive::FORM_ACTION, 'vite.newwebsite.test:*')
                ->addDirective(Directive::IMG, 'vite.newwebsite.test:*')
                ->addDirective(Directive::MEDIA, 'vite.newwebsite.test:*')
                ->addDirective(Directive::OBJECT, 'vite.newwebsite.test:*')
                ->addDirective(Directive::SCRIPT, 'vite.newwebsite.test:*')
                ->addDirective(Directive::STYLE, 'vite.newwebsite.test:*');
        }

        $this
            ->addDirective(Directive::CONNECT, Scheme::WSS)
            ->addDirective(Directive::IMG, Scheme::DATA)
            ->addDirective(Directive::SCRIPT, [
                'fonts.googleapis.com',
                'fonts.gstatic.com',
            ])
            ->addDirective(Directive::STYLE, [
                'fonts.googleapis.com',
                'fonts.gstatic.com',
            ])
            ->addDirective(Directive::FONT, [
                'fonts.googleapis.com',
                'fonts.gstatic.com',
            ])
            ->addNonceForDirective(Directive::SCRIPT)
            ->addNonceForDirective(Directive::STYLE);

        if (app()->environment() === 'local') {
            $this
                ->addDirective(Directive::SCRIPT, Keyword::UNSAFE_INLINE)
                ->addDirective(Directive::STYLE, Keyword::UNSAFE_INLINE);
        }
    }

    /**
     * @param Request $request
     * @param Response $response
     *
     * @return bool
     */
    public function shouldBeApplied(Request $request, Response $response): bool
    {
        if (config('app.debug') && ($response->isClientError() || $response->isServerError())) {
            return false;
        }

        return parent::shouldBeApplied($request, $response);
    }
}

and the Nonce generator:

class LaravelViteNonceGenerator implements NonceGenerator
{
    public function generate(): string
    {
        return Vite::useCspNonce();
    }
}

I have also ensured that both are referenced within the csp.php config file, and have added <meta property="csp-nonce" content="{{ csp_nonce() }}"> to the html head within the app.blade file.

While I know in theory we could simply deactivate it when working locally, I don't like to as it obviously removes our ability to detect if there are issues during the development process.

I feel like this should be a simple issue, particularly around the inclusion of the nonce or not, but after trying every possible combo, I feel like I could use the help of the hive mind :)

Very grateful of any help pointing out where I am being stupid, lol.

[J5Dev]

While not certain, I think this may actually be related to an issue with Vite itself, as described here: vitejs/vite#11862

Will ask there and update either side accordingly, so as to keep this as a record for others coming here, as this is the highest returned result for this issue.

[EPGDigital-MW]

We handle the hot server by reading in the url from the hot file, apologies we have our own library for CSP but this can be easily adapted to laravel-csp, the connect-src line will create 2 url entries one with http:// and one with ws:// in our library.

if (file_exists(public_path('hot'))) {
        $viteURL = file_get_contents(public_path('hot'));

        $this->addCSPHeader('default-src', $viteURL);
        $this->addCSPHeader('base-uri', $viteURL);
        $this->addCSPHeader('child-src', $viteURL);
        $this->addCSPHeader('connect-src', [$viteURL, str_replace('http://', 'ws://', $viteURL)]);
        $this->addCSPHeader('font-src', $viteURL);
        $this->addCSPHeader('frame-src', $viteURL);
        $this->addCSPHeader('img-src', $viteURL);
        $this->addCSPHeader('media-src', $viteURL);
        $this->addCSPHeader('script-src', $viteURL);
        $this->addCSPHeader('style-src', $viteURL);
        $this->addCSPHeader('worker-src', $viteURL);
}

[chinleung]

I've managed to solve the issue with a custom plugin like this:

{
	name: 'hmr-nonce-injector',
	apply: 'build',
    transform(src, id) {
        if (id.endsWith('vite/dist/client/client.js')) {
            return src
                .replace('script.type = \'module\';', `script.type = 'module'; script.nonce = '${nonce}';`)
                .replace('link.rel = \'stylesheet\';', `link.rel = 'stylesheet'; link.nonce = '${nonce}';`);
        }
    }
}