Support CSP nonce, SRI, and arbitrary attributes with Vite

src/Illuminate/Foundation/Providers/FoundationServiceProvider.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Contracts\Foundation\MaintenanceMode as MaintenanceModeContract;
 use Illuminate\Foundation\MaintenanceModeManager;
+use Illuminate\Foundation\Vite;
 use Illuminate\Http\Request;
 use Illuminate\Log\Events\MessageLogged;
 use Illuminate\Support\AggregateServiceProvider;
@@ -24,6 +25,15 @@ class FoundationServiceProvider extends AggregateServiceProvider
         ParallelTestingServiceProvider::class,
     ];
 
+    /**
+     * The singletons to register into the container.
+     *
+     * @var array
+     */
+    public $singletons = [
+        Vite::class => Vite::class,
+    ];
+
     /**
      * Boot the service provider.
      *

src/Illuminate/Foundation/Testing/Concerns/InteractsWithContainer.php

@@ -120,6 +120,21 @@ public function __call($name, $arguments)
             {
                 return '';
             }
+
+            public function useIntegrityKey()
+            {
+                return $this;
+            }
+
+            public function useAttributesForScriptTag()
+            {
+                return $this;
+            }
+
+            public function useAttributesForStylesheetTag()
+            {
+                return $this;
+            }
         });
 
         return $this;

src/Illuminate/Foundation/Vite.php

@@ -3,11 +3,108 @@
 namespace Illuminate\Foundation;
 
 use Exception;
+use Illuminate\Support\Collection;
 use Illuminate\Support\HtmlString;
 use Illuminate\Support\Str;
 
 class Vite
 {
+    /**
+     * The Content Security Policy nonce to apply to all generated tags.
+     *
+     * @var string|null
+     */
+    protected $nonce;
+
+    /**
+     * The key to check for integrity hashes within the manifest.
+     *
+     * @var string|false
+     */
+    protected $integrityKey = 'integrity';
+
+    /**
+     * The script tag attributes resolvers.
+     *
+     * @var array
+     */
+    protected $scriptTagAttributesResolvers = [];
+
+    /**
+     * The stylesheet tag attributes resolvers.
+     *
+     * @var array
+     */
+    protected $stylesheetTagAttributesResolvers = [];
+
+    /**
+     * Generate or set a Content Security Policy nonce to apply to all generated tags.
+     *
+     * @param  ?string  $nonce
+     * @return string
+     */
+    public function useCspNonce($nonce = null)
+    {
+        return $this->nonce = $nonce ?? Str::random(40);
+    }
+
+    /**
+     * Get the Content Security Policy nonce applied to all generated tags.
+     *
+     * @return string|null
+     */
+    public function cspNonce()
+    {
+        return $this->nonce;
+    }
+
+    /**
+     * Use the given key to detect integrity hashes in the manifest.
+     *
+     * @param  string|false  $key
+     * @return $this
+     */
+    public function useIntegrityKey($key)
+    {
+        $this->integrityKey = $key;
+
+        return $this;
+    }
+
+    /**
+     * Use the given callback to resolve attributes for script tags.
+     *
+     * @param  (callable(string, string, ?array, ?array): array)|array  $attributes
+     * @return $this
+     */
+    public function useAttributesForScriptTag($attributes)
+    {
+        if (! is_callable($attributes)) {
+            $attributes = fn () => $attributes;
+        }
+
+        $this->scriptTagAttributesResolvers[] = $attributes;
+
+        return $this;
+    }
+
+    /**
+     * Use the given callback to resolve attributes for stylesheet tags.
+     *
+     * @param  (callable(string, string, ?array, ?array): array)|array  $attributes
+     * @return $this
+     */
+    public function useAttributesForStylesheetTag($attributes)
+    {
+        if (! is_callable($attributes)) {
+            $attributes = fn () => $attributes;
+        }
+
+        $this->stylesheetTagAttributesResolvers[] = $attributes;
+
+        return $this;
+    }
+
     /**
      * Generate Vite tags for an entrypoint.
      *
@@ -29,8 +126,8 @@ public function __invoke($entrypoints, $buildDirectory = 'build')
 
             return new HtmlString(
                 $entrypoints
-                    ->map(fn ($entrypoint) => $this->makeTag("{$url}/{$entrypoint}"))
-                    ->prepend($this->makeScriptTag("{$url}/@vite/client"))
+                    ->prepend('@vite/client')
+                    ->map(fn ($entrypoint) => $this->makeTagForChunk($entrypoint, "{$url}/{$entrypoint}", null, null))
                     ->join('')
             );
         }
@@ -54,21 +151,32 @@ public function __invoke($entrypoints, $buildDirectory = 'build')
                 throw new Exception("Unable to locate file in Vite manifest: {$entrypoint}.");
             }
 
-            $tags->push($this->makeTag(asset("{$buildDirectory}/{$manifest[$entrypoint]['file']}")));
+            $tags->push($this->makeTagForChunk(
+                $entrypoint,
+                asset("{$buildDirectory}/{$manifest[$entrypoint]['file']}"),
+                $manifest[$entrypoint],
+                $manifest
+            ));
 
-            if (isset($manifest[$entrypoint]['css'])) {
-                foreach ($manifest[$entrypoint]['css'] as $css) {
-                    $tags->push($this->makeStylesheetTag(asset("{$buildDirectory}/{$css}")));
-                }
+            foreach ($manifest[$entrypoint]['css'] ?? [] as $css) {
+                $tags->push($this->makeTagForChunk(
+                    $entrypoint,
+                    asset("{$buildDirectory}/{$css}"),
+                    $manifest[$entrypoint],
+                    $manifest
+                ));
             }
 
-            if (isset($manifest[$entrypoint]['imports'])) {
-                foreach ($manifest[$entrypoint]['imports'] as $import) {
-                    if (isset($manifest[$import]['css'])) {
-                        foreach ($manifest[$import]['css'] as $css) {
-                            $tags->push($this->makeStylesheetTag(asset("{$buildDirectory}/{$css}")));
-                        }
-                    }
+            foreach ($manifest[$entrypoint]['imports'] ?? [] as $import) {
+                foreach ($manifest[$import]['css'] ?? [] as $css) {
+                    $partialManifest = Collection::make($manifest)->where('file', $css);
+
+                    $tags->push($this->makeTagForChunk(
+                        $partialManifest->keys()->first(),
+                        asset("{$buildDirectory}/{$css}"),
+                        $partialManifest->first(),
+                        $manifest
+                    ));
                 }
             }
         }
@@ -108,7 +216,86 @@ public function reactRefresh()
     }
 
     /**
-     * Generate an appropriate tag for the given URL.
+     * Make tag for the given chunk.
+     *
+     * @param  string  $src
+     * @param  string  $url
+     * @param  ?array  $chunk
+     * @param  ?array  $manifest
+     * @return string
+     */
+    protected function makeTagForChunk($src, $url, $chunk, $manifest)
+    {
+        if (
+            $this->nonce === null
+            && $this->integrityKey !== false
+            && ! array_key_exists($this->integrityKey, $chunk ?? [])
+            && $this->scriptTagAttributesResolvers === []
+            && $this->stylesheetTagAttributesResolvers === []) {
+            return $this->makeTag($url);
+        }
+
+        if ($this->isCssPath($url)) {
+            return $this->makeStylesheetTagWithAttributes(
+                $url,
+                $this->resolveStylesheetTagAttributes($src, $url, $chunk, $manifest)
+            );
+        }
+
+        return $this->makeScriptTagWithAttributes(
+            $url,
+            $this->resolveScriptTagAttributes($src, $url, $chunk, $manifest)
+        );
+    }
+
+    /**
+     * Resolve the attributes for the chunks generated script tag.
+     *
+     * @param  string  $src
+     * @param  string  $url
+     * @param  ?array  $chunk
+     * @param  ?array  $manifest
+     * @return array
+     */
+    protected function resolveScriptTagAttributes($src, $url, $chunk, $manifest)
+    {
+        $attributes = $this->integrityKey !== false
+            ? ['integrity' => $chunk[$this->integrityKey] ?? false]
+            : [];
+
+        foreach ($this->scriptTagAttributesResolvers as $resolver) {
+            $attributes = array_merge($attributes, $resolver($src, $url, $chunk, $manifest));
+        }
+
+        return $attributes;
+    }
+
+    /**
+     * Resolve the attributes for the chunks generated stylesheet tag.
+     *
+     * @param  string  $src
+     * @param  string  $url
+     * @param  ?array  $chunk
+     * @param  ?array  $manifest
+     * @return array
+     */
+    protected function resolveStylesheetTagAttributes($src, $url, $chunk, $manifest)
+    {
+        $attributes = $this->integrityKey !== false
+            ? ['integrity' => $chunk[$this->integrityKey] ?? false]
+            : [];
+
+        foreach ($this->stylesheetTagAttributesResolvers as $resolver) {
+            $attributes = array_merge($attributes, $resolver($src, $url, $chunk, $manifest));
+        }
+
+        return $attributes;
+    }
+
+    /**
+     * Generate an appropriate tag for the given URL in HMR mode.
+     *
+     * @deprecated Will be removed in a future Laravel version.
      *
      * @param  string  $url
      * @return string
@@ -125,23 +312,63 @@ protected function makeTag($url)
     /**
      * Generate a script tag for the given URL.
      *
+     * @deprecated Will be removed in a future Laravel version.
+     *
      * @param  string  $url
      * @return string
      */
     protected function makeScriptTag($url)
     {
-        return sprintf('<script type="module" src="%s"></script>', $url);
+        return $this->makeScriptTagWithAttributes($url, []);
     }
 
     /**
-     * Generate a stylesheet tag for the given URL.
+     * Generate a stylesheet tag for the given URL in HMR mode.
+     *
+     * @deprecated Will be removed in a future Laravel version.
      *
      * @param  string  $url
      * @return string
      */
     protected function makeStylesheetTag($url)
     {
-        return sprintf('<link rel="stylesheet" href="%s" />', $url);
+        return $this->makeStylesheetTagWithAttributes($url, []);
+    }
+
+    /**
+     * Generate a script tag with attributes for the given URL.
+     *
+     * @param  string  $url
+     * @param  array  $attributes
+     * @return string
+     */
+    protected function makeScriptTagWithAttributes($url, $attributes)
+    {
+        $attributes = $this->parseAttributes(array_merge([
+            'type' => 'module',
+            'src' => $url,
+            'nonce' => $this->nonce ?? false,
+        ], $attributes));
+
+        return '<script '.implode(' ', $attributes).'></script>';
+    }
+
+    /**
+     * Generate a link tag with attributes for the given URL.
+     *
+     * @param  string  $url
+     * @param  array  $attributes
+     * @return string
+     */
+    protected function makeStylesheetTagWithAttributes($url, $attributes)
+    {
+        $attributes = $this->parseAttributes(array_merge([
+            'rel' => 'stylesheet',
+            'href' => $url,
+            'nonce' => $this->nonce ?? false,
+        ], $attributes));
+
+        return '<link '.implode(' ', $attributes).' />';
     }
 
     /**
@@ -154,4 +381,20 @@ protected function isCssPath($path)
     {
         return preg_match('/\.(css|less|sass|scss|styl|stylus|pcss|postcss)$/', $path) === 1;
     }
+
+    /**
+     * Parse the attributes into key="value" strings.
+     *
+     * @param  array  $attributes
+     * @return array
+     */
+    protected function parseAttributes($attributes)
+    {
+        return Collection::make($attributes)
+            ->reject(fn ($value, $key) => $value === false)
+            ->flatMap(fn ($value, $key) => $value === true ? [$key] : [$key => $value])
+            ->map(fn ($value, $key) => is_int($key) ? $value : $key.'="'.$value.'"')
+            ->values()
+            ->all();
+    }
 }

src/Illuminate/Support/Facades/Facade.php

@@ -293,6 +293,7 @@ public static function defaultAliases()
             'URL' => URL::class,
             'Validator' => Validator::class,
             'View' => View::class,
+            'Vite' => Vite::class,
         ]);
     }