Add CSP Nonce to Nova assets #6901

Radiergummi · 2025-07-31T11:32:12Z

Radiergummi
Jul 31, 2025

This is kind of related to #6349 and #1933; we configured a Content-Security Policy that also applies to Nova routes, which mandates proper script security. This should be best practice for any web application. To satisfy this policy, we add a CSP nonce to all scripts using nonce="{{ Vite::cspNonce() }}". The scripts in the Nova layout, however, don't have the nonce attribute and thus cannot be loaded unless the entire policy is effectively disabled.

Currently, we overwrite the layout with our own that adds the nonce to all script tags, but that requires carefully reviewing the upstream layout after every package update and back-port any changes.

Would it be possible to simply add this nonce to the Nova layout template? It doesn't hurt anyone without a CSP, it won't interfere with the legacy Mix setup (AFAIK), and will gracefully degrade if nonces aren't enabled.

For reference, here's our current layout:

resources/views/vendor/nova/layout.blade.php

<!DOCTYPE html>
<html lang="{{ $locale = \Laravel\Nova\Nova::resolveUserLocale(request()) }}"
      dir="{{ \Laravel\Nova\Nova::rtlEnabled() ? 'rtl' : 'ltr' }}" class="h-full font-sans antialiased">
<head>
    <meta name="theme-color" content="#fff">
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width" />
    <meta name="locale" content="{{ $locale }}" />
    <meta name="robots" content="noindex">

    @include('nova::partials.meta')

    <!-- Styles -->
    <link rel="stylesheet" href="/vendor/nova/app.css" nonce="{{ Vite::cspNonce() }}">

    @if ($styles = \Laravel\Nova\Nova::availableStyles(request()))
        <!-- Tool Styles -->
        @foreach($styles as $asset)
            <link rel="stylesheet" href="{!! $asset->url() !!}" nonce="{{ Vite::cspNonce() }}">
        @endforeach
    @endif

    <script nonce="{{ Vite::cspNonce() }}">
        if (localStorage.novaTheme === 'dark' || (!('novaTheme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    </script>
</head>
<body class="min-w-site text-sm font-medium min-h-full text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-900">
@inertia

<!-- Scripts -->
<script src="/vendor/nova/manifest.js" nonce="{{ Vite::cspNonce() }}"></script>
<script src="/vendor/nova/vendor.js" nonce="{{ Vite::cspNonce() }}"></script>
<script src="/vendor/nova/ui.js" nonce="{{ Vite::cspNonce() }}"></script>
<script src="/vendor/nova/app.js" nonce="{{ Vite::cspNonce() }}"></script>

<!-- Build Nova Instance -->
<script nonce="{{ Vite::cspNonce() }}">
    const config = @json(\Laravel\Nova\Nova::jsonVariables(request()));
    window.Nova = createNovaApp(config);
    Nova.countdown();
</script>

@if ($scripts = \Laravel\Nova\Nova::availableScripts(request()))
    <!-- Tool Scripts -->
    @foreach ($scripts as $asset)
        <script src="{!! $asset->url() !!}" nonce="{{ Vite::cspNonce() }}"></script>
    @endforeach
@endif

<!-- Start Nova -->
<script nonce="{{ Vite::cspNonce() }}">
    document.addEventListener('DOMContentLoaded', function() {
        Nova.liftOff();
    });
</script>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add CSP Nonce to Nova assets #6901

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Add CSP Nonce to Nova assets #6901

Uh oh!

Radiergummi Jul 31, 2025

Replies: 0 comments

Radiergummi
Jul 31, 2025