Merge pull request #831 from flexponsive/pr/blade-inline-as-json

bakerkretzmar · web-flow · commit 9101d1fa2ec1 · 2025-09-14T17:36:08.000-04:00
Add JSON option to `@routes` for improved CSP compatibility
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,6 @@ node_modules/
 vendor/
 *.cache
 *.log
+*vitest-temp*
 composer.lock
 phpunit.xml
diff --git a/README.md b/README.md
@@ -546,6 +546,12 @@ A [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CS
 @routes(nonce: 'your-nonce-here')
 ```
 
+Alternatively, you can configure Ziggy to output your routes as plain JSON, rather than JavaScript, so that the output is ignored by the CSP. Note that if you use this option you will need to load Ziggy's JavaScript `route()` function yourself, by configuring the Vue plugin or React hook or importing the JavaScript manually.
+
+```php
+@routes(json: true)
+```
+
 ### Disabling the `route()` helper
 
 If you only want to use the `@routes` directive to make Ziggy's configuration available in JavaScript, but don't need the `route()` helper function, set the `ziggy.skip-route-function` config to `true`.
diff --git a/src/BladeRouteGenerator.php b/src/BladeRouteGenerator.php
@@ -2,17 +2,24 @@
 
 namespace Tighten\Ziggy;
 
+use Tighten\Ziggy\Output\Json;
 use Tighten\Ziggy\Output\MergeScript;
 use Tighten\Ziggy\Output\Script;
 
 class BladeRouteGenerator
 {
     public static $generated;
 
-    public function generate(array|string|null $group = null, ?string $nonce = null): string
+    public function generate(array|string|null $group = null, ?string $nonce = null, ?bool $json = false): string
     {
         $ziggy = new Ziggy($group);
 
+        if ($json) {
+            $output = config('ziggy.output.json', Json::class);
+
+            return (string) new $output($ziggy);
+        }
+
         $nonce = $nonce ? " nonce=\"{$nonce}\"" : '';
 
         if (static::$generated) {
diff --git a/src/Output/Json.php b/src/Output/Json.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace Tighten\Ziggy\Output;
+
+use Stringable;
+use Tighten\Ziggy\Ziggy;
+
+class Json implements Stringable
+{
+    public function __construct(
+        protected Ziggy $ziggy,
+    ) {}
+
+    public function __toString(): string
+    {
+        return <<<HTML
+        <script id="ziggy-routes-json" type="application/json">{$this->ziggy->toJson()}</script>
+        HTML;
+    }
+}
diff --git a/src/js/Router.js b/src/js/Router.js
@@ -15,6 +15,16 @@ export default class Router extends String {
         super();
 
         this._config = config ?? (typeof Ziggy !== 'undefined' ? Ziggy : globalThis?.Ziggy);
+
+        if (
+            !this._config &&
+            typeof document !== 'undefined' &&
+            document.getElementById('ziggy-routes-json')
+        ) {
+            globalThis.Ziggy = JSON.parse(document.getElementById('ziggy-routes-json').textContent);
+            this._config = globalThis.Ziggy;
+        }
+
         this._config = { ...this._config, absolute };
 
         if (name) {
diff --git a/src/js/index.js b/src/js/index.js
@@ -25,7 +25,12 @@ export const ZiggyVue = {
 };
 
 export function useRoute(defaultConfig) {
-    if (!defaultConfig && !globalThis.Ziggy && typeof Ziggy === 'undefined') {
+    if (
+        !defaultConfig &&
+        !globalThis.Ziggy &&
+        typeof Ziggy === 'undefined' &&
+        !document.getElementById('ziggy-routes-json')
+    ) {
         throw new Error(
             'Ziggy error: missing configuration. Ensure that a `Ziggy` variable is defined globally or pass a config object into the useRoute hook.',
         );
diff --git a/tests/Unit/BladeRouteGeneratorTest.php b/tests/Unit/BladeRouteGeneratorTest.php
@@ -93,6 +93,12 @@
         ->toContain('<script type="text/javascript" nonce="test-nonce">');
 });
 
+test('render JSON', function () {
+    expect((new BladeRouteGenerator)->generate(json: true))
+        ->toContain('<script id="ziggy-routes-json" type="application/json">')
+        ->not->toContain('function');
+});
+
 test('render script tag', function () {
     Route::get('posts', fn () => '')->name('posts.index');
 
diff --git a/tests/js/route.test.js b/tests/js/route.test.js
@@ -1503,3 +1503,33 @@ describe('current()', () => {
         global.window = oldWindow;
     });
 });
+
+describe('json', () => {
+    test('generate a URL with routes loaded from JSON', () => {
+        let script = document.createElement('script');
+        script.id = 'ziggy-routes-json';
+        script.type = 'application/json';
+        script.textContent = JSON.stringify(defaultZiggy);
+        document.head.appendChild(script);
+        global.Ziggy = undefined;
+
+        expect(route('posts.index')).toBe('https://ziggy.dev/posts');
+
+        document.head.removeChild(script);
+    });
+
+    test('only parse JSON routes once', () => {
+        let script = document.createElement('script');
+        script.id = 'ziggy-routes-json';
+        script.type = 'application/json';
+        script.textContent = JSON.stringify(defaultZiggy);
+        document.head.appendChild(script);
+        global.Ziggy = undefined;
+
+        expect(route('posts.index')).toBe('https://ziggy.dev/posts');
+
+        document.head.removeChild(script);
+
+        expect(route('posts.show', 1)).toBe('https://ziggy.dev/posts/1');
+    });
+});
