filamentphp · 4513 · Feb 8, 2026 · Feb 8, 2026 · Feb 8, 2026 · Feb 8, 2026
diff --git a/packages/actions/resources/views/components/modals.blade.php b/packages/actions/resources/views/components/modals.blade.php
@@ -1,10 +1,13 @@
 @if ($this instanceof \Filament\Actions\Contracts\HasActions && (! $this->hasActionsModalRendered))
+    <style nonce="{{ \Filament\csp_nonce() }}">
+        .fi-internal-components-modals {height: 0;}
+    </style>
     <div
         wire:partial="action-modals"
         x-data="filamentActionModals({
                     livewireId: @js($this->getId()),
                 })"
-        style="height: 0"
+        class="fi-internal-components-modals"
     >
         @foreach ($this->getMountedActions() as $action)
             @if ((! $loop->last) || $this->mountedActionShouldOpenModal())

diff --git a/packages/forms/resources/views/components/textarea.blade.php b/packages/forms/resources/views/components/textarea.blade.php
@@ -28,7 +28,10 @@ class="fi-fo-textarea-wrp"
                 ])
         "
     >
-        <div wire:ignore.self style="height: '{{ $initialHeight . 'rem' }}'">
+        <style nonce="{{ \Filament\csp_nonce() }}">
+            .fi-internal-components-textarea {height: '{{ $initialHeight . 'rem' }}'; }
+        </style>
+        <div wire:ignore.self class="fi-internal-components-textarea">
             <textarea
                 x-load
                 x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('textarea', 'filament/forms') }}"

diff --git a/packages/forms/src/Components/RichEditor/Actions/TextColorAction.php b/packages/forms/src/Components/RichEditor/Actions/TextColorAction.php
@@ -3,13 +3,15 @@
 namespace Filament\Forms\Components\RichEditor\Actions;
 
 use Filament\Actions\Action;
+use Filament\Facades\Filament;
 use Filament\Forms\Components\ColorPicker;
 use Filament\Forms\Components\RichEditor;
 use Filament\Forms\Components\RichEditor\EditorCommand;
 use Filament\Forms\Components\RichEditor\TextColor;
 use Filament\Forms\Components\Select;
 use Filament\Support\Enums\Width;
 use Illuminate\Support\Arr;
+use Illuminate\Support\Str;
 
 class TextColorAction
 {
@@ -26,13 +28,26 @@ public static function make(): Action
             ->schema(function (RichEditor $component) {
                 $options = Arr::mapWithKeys(
                     $component->getTextColors(),
-                    fn (TextColor $color, string $name): array => [$name => <<<HTML
-                        <div class="fi-fo-rich-editor-text-color-select-option">
-                            <div class="fi-fo-rich-editor-text-color-select-option-preview" style="--color: {$color->getColor()}; --dark-color: {$color->getDarkColor()}"></div>
+                    function (TextColor $color, string $name): array {
+                        $uniqueClass = 'fi-unique-' . Str::random();
+                        $nonce       = Filament::getCspNonce();
 
-                            <div>{$color->getSafeLabelHtml()}</div>
-                        </div>
-                        HTML],
+                        return [
+                            $name => <<<HTML
+                                <div class="fi-fo-rich-editor-text-color-select-option">
+                                    <style nonce="{$nonce}">
+                                        .{$uniqueClass} {
+                                            --color: '{$color->getColor()}';
+                                            --dark-color: '{$color->getColor()}';
+                                        }
+                                    </style>
+                                    <div class="fi-fo-rich-editor-text-color-select-option-preview {$uniqueClass}" ></div>
+
+                                    <div>{$color->getSafeLabelHtml()}</div>
+                                </div>
+                            HTML
+                        ];
+                    },
                 );
 
                 return [

diff --git a/packages/infolists/src/Components/RepeatableEntry.php b/packages/infolists/src/Components/RepeatableEntry.php
@@ -15,6 +15,7 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Support\Arr;
 use Illuminate\Support\Js;
+use function Filament\csp_nonce;
 
 class RepeatableEntry extends Entry implements HasEmbeddedView
 {
@@ -185,6 +186,13 @@ protected function toEmbeddedTableHtml(): string
 
         ob_start(); ?>
 
+        <style nonce="<?= csp_nonce() ?>">
+          <?php foreach (array_filter(array_unique(array_map(static fn ($column): string => $column->getWidth(), $tableColumns)), static fn (string $value) => trim($value) !== '') as $width) { ?>
+              <?= '.fi-internal-components-repeatable-' . $width ?> {
+                  width: <?= $width ?>;
+              }
+          <?php } ?>
+        </style>
         <div <?= $attributes->toHtml() ?>>
             <table>
                 <thead>
@@ -194,10 +202,8 @@ protected function toEmbeddedTableHtml(): string
                                 class="<?= Arr::toCssClasses([
                                     'fi-wrapped' => $column->canHeaderWrap(),
                                     (($columnAlignment = $column->getAlignment()) instanceof Alignment) ? ('fi-align-' . $columnAlignment->value) : $columnAlignment,
+                                    'fi-internal-components-repeatable-' . ($columnWidth = $column->getWidth()) => filled($columnWidth),
                                 ]) ?>"
-                                <?php if (filled($columnWidth = $column->getWidth())) { ?>
-                                    style="width: <?= $columnWidth ?>"
-                                <?php } ?>
                             >
                                 <?php if (! $column->isHeaderLabelHidden()) { ?>
                                     <?= e($column->getLabel()) ?>

diff --git a/packages/notifications/resources/views/database-notifications.blade.php b/packages/notifications/resources/views/database-notifications.blade.php
@@ -85,7 +85,7 @@ class="fi-no-database"
 
             @if ($broadcastChannel = $this->getBroadcastChannel())
                 @script
-                    <script>
+                    <script nonce="{{ \Filament\csp_nonce() }}">
                         window.addEventListener('EchoLoaded', () => {
                             window.Echo.private(@js($broadcastChannel)).listen(
                                 '.database-notifications.sent',

diff --git a/packages/notifications/resources/views/notifications.blade.php b/packages/notifications/resources/views/notifications.blade.php
@@ -19,7 +19,7 @@
 
     @if ($broadcastChannel = $this->getBroadcastChannel())
         @script
-            <script>
+            <script nonce="{{ \Filament\csp_nonce() }}">
                 window.addEventListener('EchoLoaded', () => {
                     window.Echo.private(@js($broadcastChannel)).notification(
                         (notification) => {

diff --git a/packages/panels/resources/views/components/layout/base.blade.php b/packages/panels/resources/views/components/layout/base.blade.php
@@ -39,7 +39,7 @@
 
         {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::STYLES_BEFORE, scopes: $renderHookScopes) }}
 
-        <style>
+        <style nonce="{{ \Filament\csp_nonce() }}">
             [x-cloak=''],
             [x-cloak='x-cloak'],
             [x-cloak='1'] {
@@ -73,7 +73,7 @@
         {{ filament()->getMonoFontHtml() }}
         {{ filament()->getSerifFontHtml() }}
 
-        <style>
+        <style nonce="{{ \Filament\csp_nonce() }}">
             :root {
                 --font-family: '{!! filament()->getFontFamily() !!}';
                 --mono-font-family: '{!! filament()->getMonoFontFamily() !!}';
@@ -89,15 +89,15 @@
         {{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::STYLES_AFTER, scopes: $renderHookScopes) }}
 
         @if (! filament()->hasDarkMode())
-            <script>
+            <script nonce="{{ \Filament\csp_nonce() }}">
                 localStorage.setItem('theme', 'light')
             </script>
         @elseif (filament()->hasDarkModeForced())
-            <script>
+            <script nonce="{{ \Filament\csp_nonce() }}">
                 localStorage.setItem('theme', 'dark')
             </script>
         @else
-            <script>
+            <script nonce="{{ \Filament\csp_nonce() }}">
                 const loadDarkMode = () => {
                     window.theme = localStorage.getItem('theme') ?? @js(filament()->getDefaultThemeMode()->value)
 
@@ -141,15 +141,15 @@
         @filamentScripts(withCore: true)
 
         @if (filament()->hasBroadcasting() && config('filament.broadcasting.echo'))
-            <script data-navigate-once>
+            <script nonce="{{ \Filament\csp_nonce() }}" data-navigate-once>
                 window.Echo = new window.EchoFactory(@js(config('filament.broadcasting.echo')))
 
                 window.dispatchEvent(new CustomEvent('EchoLoaded'))
             </script>
         @endif
 
         @if (filament()->hasDarkMode() && (! filament()->hasDarkModeForced()))
-            <script>
+            <script nonce="{{ \Filament\csp_nonce() }}">
                 loadDarkMode()
             </script>
         @endif

diff --git a/packages/panels/resources/views/components/page/index.blade.php b/packages/panels/resources/views/components/page/index.blade.php
@@ -150,7 +150,7 @@ class="fi-page-main-sub-navigation-mobile-menu-render-hook-ctn"
     @if (method_exists($this, 'hasUnsavedDataChangesAlert') && $this->hasUnsavedDataChangesAlert())
         @if (\Filament\Support\Facades\FilamentView::hasSpaMode())
             @script
-                <script>
+                <script nonce="{{ \Filament\csp_nonce() }}">
                     setUpSpaModeUnsavedDataChangesAlert({
                         body: @js(__('filament-panels::unsaved-changes-alert.body')),
                         resolveLivewireComponentUsing: () => @this,
@@ -160,7 +160,7 @@ class="fi-page-main-sub-navigation-mobile-menu-render-hook-ctn"
             @endscript
         @else
             @script
-                <script>
+                <script nonce="{{ \Filament\csp_nonce() }}">
                     setUpUnsavedDataChangesAlert({ $wire })
                 </script>
             @endscript
@@ -169,7 +169,7 @@ class="fi-page-main-sub-navigation-mobile-menu-render-hook-ctn"
 
     @if (! app()->hasDebugModeEnabled())
         @script
-            <script>
+            <script nonce="{{ \Filament\csp_nonce() }}">
                 window.filamentErrorNotifications = @js($this->hasErrorNotifications() ? $this->getErrorNotifications() : null)
             </script>
         @endscript

diff --git a/packages/panels/resources/views/components/unsaved-action-changes-alert.blade.php b/packages/panels/resources/views/components/unsaved-action-changes-alert.blade.php
@@ -1,6 +1,6 @@
 @if (filament()->hasUnsavedChangesAlerts())
     @script
-        <script>
+        <script nonce="{{ \Filament\csp_nonce() }}">
             setUpUnsavedActionChangesAlert({
                 resolveLivewireComponentUsing: () => @this,
                 $wire,

diff --git a/packages/panels/resources/views/livewire/sidebar.blade.php b/packages/panels/resources/views/livewire/sidebar.blade.php
@@ -126,7 +126,7 @@ class="fi-sidebar-close-collapse-sidebar-btn"
                 @endforeach
             </ul>
 
-            <script>
+            <script nonce="{{ \Filament\csp_nonce() }}">
                 var collapsedGroups = JSON.parse(
                     localStorage.getItem('collapsedGroups'),
                 )

diff --git a/packages/panels/src/Facades/Filament.php b/packages/panels/src/Facades/Filament.php
@@ -165,6 +165,8 @@
  * @method static void setCurrentPanel(Panel | string | null $panel = null)
  * @method static void setServingStatus(bool $condition = true)
  * @method static void setTenant(Model | null $tenant = null, bool $isQuiet = false)
+ * @method static void setCspNonce(string|Closure|null $nonce)
+ * @method static string|null getCspNonce()
  *
  * @see FilamentManager
  */

diff --git a/packages/panels/src/FilamentManager.php b/packages/panels/src/FilamentManager.php
@@ -51,6 +51,8 @@ class FilamentManager
 
     protected ?Model $tenant = null;
 
+    protected string|Closure|null $cspNonce = null;
+
     public function auth(): Guard
     {
         return $this->getCurrentOrDefaultPanel()->auth();
@@ -1104,4 +1106,17 @@ public function getErrorNotifications(): array
     {
         return $this->getCurrentOrDefaultPanel()->getErrorNotifications();
     }
+
+    /**
+     * @param string|(\Closure(): string)|null $nonce
+     */
+    public function useCspNonce(string|Closure|null $nonce): void
+    {
+        $this->cspNonce = $nonce;
+    }
+
+    public function getCspNonce(): ?string
+    {
+        return value($this->cspNonce);
+    }
 }
diff --git a/packages/panels/src/helpers.php b/packages/panels/src/helpers.php
@@ -95,3 +95,10 @@ function get_authorization_response(UnitEnum | string $action, Model | string $m
         return $response;
     }
 }
+
+if (!function_exists('Filament\csp_nonce')) {
+    function csp_nonce(): ?string
+    {
+        return Filament::getCspNonce();
+    }
+}
diff --git a/packages/support/resources/views/assets.blade.php b/packages/support/resources/views/assets.blade.php
@@ -1,5 +1,5 @@
 @if (isset($data))
-    <script>
+    <script nonce="{{ \Filament\csp_nonce() }}">
         window.filamentData = @js($data)
     </script>
 @endif
@@ -10,7 +10,7 @@
     @endif
 @endforeach
 
-<style>
+<style nonce="{{ \Filament\csp_nonce() }}">
     :root {
         @foreach ($cssVariables ?? [] as $cssVariableName => $cssVariableValue) --{{ $cssVariableName }}:{{ $cssVariableValue }}; @endforeach
     }

diff --git a/packages/support/resources/views/components/dropdown/list/item.blade.php b/packages/support/resources/views/components/dropdown/list/item.blade.php
@@ -106,9 +106,14 @@
     @endif
 
     @if ($image)
+        @php($uniqueClass = 'fi-unique-' . \Illuminate\Support\Str::random())
+        <style nonce="{{ \Filament\csp_nonce() }}">
+            .{{ $uniqueClass }} {
+                background-image: url('{{ $image }}');
+            }
+        </style>
         <div
-            class="fi-dropdown-list-item-image"
-            style="background-image: url('{{ $image }}')"
+            class="fi-dropdown-list-item-image {{ $uniqueClass }}"
             @if ($hasLoadingIndicator)
                 wire:loading.remove.delay.{{ config('filament.livewire_loading_delay', 'default') }}
                 wire:target="{{ $loadingIndicatorTarget }}"

diff --git a/packages/support/src/Assets/Js.php b/packages/support/src/Assets/Js.php
@@ -2,9 +2,11 @@
 
 namespace Filament\Support\Assets;
 
+use Filament\Facades\Filament;
 use Filament\Support\Facades\FilamentView;
 use Illuminate\Contracts\Support\Htmlable;
 use Illuminate\Support\HtmlString;
+use function Filament\csp_nonce;
 
 class Js extends Asset
 {
@@ -116,6 +118,8 @@ public function getHtml(): Htmlable
         $defer = $this->isDeferred() ? 'defer' : '';
         $module = $this->isModule() ? 'type="module"' : '';
         $extraAttributesHtml = $this->getExtraAttributesHtml();
+        $cspNonce = Filament::getCspNonce();
+        $cspNonce = $cspNonce === null || $cspNonce === '' ? '' : 'nonce="' . $cspNonce . '"';
 
         $hasSpaMode = FilamentView::hasSpaMode();
 
@@ -132,6 +136,7 @@ public function getHtml(): Htmlable
                 {$extraAttributesHtml}
                 {$navigateOnce}
                 {$navigateTrack}
+                {$cspNonce}
             ></script>
         ",
         );

diff --git a/packages/support/stubs/scaffolding/resources/views/components/layouts/app.blade.php b/packages/support/stubs/scaffolding/resources/views/components/layouts/app.blade.php
@@ -9,7 +9,7 @@
 
         <title>{{ config('app.name') }}</title>
 
-        <style>
+        <style nonce="{{ \Filament\csp_nonce() }}">
             [x-cloak] {
                 display: none !important;
             }

diff --git a/packages/widgets/resources/views/chart-widget.blade.php b/packages/widgets/resources/views/chart-widget.blade.php
@@ -91,10 +91,18 @@ class="fi-wi-chart-filter-content-actions-ctn"
                         ])
                 }}
             >
+                <style nonce="{{ \Filament\csp_nonce() }}">
+                    @if ($maxHeight)
+                        .fi-internal-views-chart-widget-{{ $maxHeight }} {
+                            max-height: {{ $maxHeight }};
+                        }
+                    @endif
+                </style>
+
                 <canvas
                     x-ref="canvas"
                     @if ($maxHeight)
-                        style="max-height: {{ $maxHeight }}"
+                        class="fi-internal-views-chart-widget-{{ $maxHeight }}"
                     @endif
                 ></canvas>