[6.x] GraphQL introspection config

config/graphql.php

@@ -88,4 +88,17 @@
         'expiry' => 60,
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Introspection
+    |--------------------------------------------------------------------------
+    |
+    | Introspection queries allow a user to see the schema and will power
+    | development tools. This is "auto" by default, which will enable
+    | it locally and keep it disabled everywhere else for security.
+    |
+    */
+
+    'introspection' => env('STATAMIC_GRAPHQL_INTROSPECTION_ENABLED', 'auto'),
+
 ];

resources/views/graphql/graphiql.blade.php

@@ -7,7 +7,6 @@
         <style>
             body {
                 margin: 0;
-                overflow: hidden; /* in Firefox */
             }
 
             #graphiql {
@@ -24,63 +23,63 @@
         </style>
         <link
             rel="stylesheet"
-            href="https://esm.sh/graphiql@4.0.0/dist/style.css"
+            href="https://esm.sh/graphiql/dist/style.css"
         >
         <link
             rel="stylesheet"
-            href="https://esm.sh/@graphiql/plugin-explorer@4.0.0/dist/style.css"
+            href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
         >
-        <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
+
+        @if (!$introspection)
+        <style>
+            button[aria-label*="Re-fetch GraphQL schema"] { visibility: hidden; }
+        </style>
+        @endif
+
         <script type="importmap">
             {
               "imports": {
                 "react": "https://esm.sh/react@19.1.0",
-                "react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
+                "react/": "https://esm.sh/react@19.1.0/",
 
                 "react-dom": "https://esm.sh/react-dom@19.1.0",
-                "react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
+                "react-dom/": "https://esm.sh/react-dom@19.1.0/",
 
-                "graphiql": "https://esm.sh/graphiql@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react",
-                "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@4.0.0?standalone&external=react,react/jsx-runtime,react-dom,@graphiql/react,graphql",
-                "@graphiql/react": "https://esm.sh/@graphiql/react@0.30.0?standalone&external=react,react/jsx-runtime,react-dom,graphql,@graphiql/toolkit",
+                "graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
+                "graphiql/": "https://esm.sh/graphiql/",
+                "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
+                "@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
 
-                "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.2?standalone&external=graphql",
-                "graphql": "https://esm.sh/graphql@16.11.0"
+                "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
+                "graphql": "https://esm.sh/graphql@16.11.0",
+                "@emotion/is-prop-valid": "data:text/javascript,"
               }
             }
         </script>
         <script type="module">
-            // Import React and ReactDOM
             import React from 'react';
             import ReactDOM from 'react-dom/client';
-            // Import GraphiQL and the Explorer plugin
-            import { GraphiQL } from 'graphiql';
+            import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
             import { createGraphiQLFetcher } from '@graphiql/toolkit';
             import { explorerPlugin } from '@graphiql/plugin-explorer';
+            import 'graphiql/setup-workers/esm.sh';
 
-            var xcsrfToken = null;
+            const introspectionEnabled = {{ \Statamic\Support\Str::bool($introspection) }};
 
             const fetcher = createGraphiQLFetcher({
                 url: '{{ $url }}',
-                headers: {
-                    Accept: 'application/json',
-                    'Content-Type': 'application/json',
-                    'x-csrf-token': xcsrfToken || '{{ csrf_token() }}',
-                },
-                fetch: async (fetchURL, fetchOptions) => {
-                    return await fetch(fetchURL, fetchOptions).then((response) => {
-                        xcsrfToken = response.headers.get('x-csrf-token');
-                        return response;
-                    });
-                },
             });
 
-            const explorer = explorerPlugin();
+            let plugins = [HISTORY_PLUGIN];
+            if (introspectionEnabled) plugins.push(explorerPlugin());
 
             function App() {
                 return React.createElement(GraphiQL, {
                     fetcher,
-                    plugins: [explorer],
+                    plugins,
+                    defaultEditorToolsVisibility: true,
+                    referencePlugin: introspectionEnabled ? undefined : null,
+                    schema: introspectionEnabled ? undefined : null,
                 });
             }
 

src/Facades/GraphQL.php

@@ -22,6 +22,7 @@
  * @method static array getExtraQueries()
  * @method static void addMiddleware($middleware)
  * @method static array getExtraMiddleware()
+ * @method static bool introspectionEnabled()
  *
  * @see \Statamic\GraphQL\Manager
  */

src/GraphQL/Manager.php

@@ -95,4 +95,15 @@ public function getExtraMiddleware()
     {
         return $this->middleware;
     }
+
+    public function introspectionEnabled(): bool
+    {
+        if (config('graphql.security.disable_introspection')) {
+            return false;
+        }
+
+        $config = config('statamic.graphql.introspection') ?? 'auto';
+
+        return $config === 'auto' ? app()->isLocal() : (bool) $config;
+    }
 }

src/GraphQL/ServiceProvider.php

@@ -6,6 +6,7 @@
 use Illuminate\Support\ServiceProvider as LaravelProvider;
 use Rebing\GraphQL\GraphQLController;
 use Statamic\Contracts\GraphQL\ResponseCache;
+use Statamic\Facades\GraphQL;
 use Statamic\GraphQL\ResponseCache\DefaultCache;
 use Statamic\GraphQL\ResponseCache\NullCache;
 use Statamic\Http\Middleware\HandleToken;
@@ -32,6 +33,7 @@ public function register()
 
             $this->disableGraphiql();
             $this->setDefaultSchema();
+            $this->configureIntrospection();
         });
     }
 
@@ -71,4 +73,9 @@ private function setDefaultSchema()
     {
         config(['graphql.schemas.default' => DefaultSchema::class]);
     }
+
+    private function configureIntrospection()
+    {
+        config(['graphql.security.disable_introspection' => ! GraphQL::introspectionEnabled()]);
+    }
 }

src/Http/Controllers/CP/GraphQLController.php

@@ -2,6 +2,7 @@
 
 namespace Statamic\Http\Controllers\CP;
 
+use Statamic\Facades\GraphQL;
 use Statamic\Http\Middleware\RequireStatamicPro;
 
 class GraphQLController extends CpController
@@ -22,6 +23,7 @@ public function graphiql()
 
         return view('statamic::graphql.graphiql', [
             'url' => '/'.config('graphql.route.prefix'),
+            'introspection' => GraphQL::introspectionEnabled(),
         ]);
     }
 }

tests/GraphQL/ManagerTest.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace Tests\GraphQL;
+
+use PHPUnit\Framework\Attributes\DataProvider;
+use PHPUnit\Framework\Attributes\Group;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\GraphQL;
+use Tests\TestCase;
+
+#[Group('graphql')]
+class ManagerTest extends TestCase
+{
+    #[Test]
+    #[DataProvider('introspectionProvider')]
+    public function it_gets_introspection_enabled_state($packageEnabled, $statamicConfig, $environment, $expected)
+    {
+        config(['graphql.security.disable_introspection' => is_null($packageEnabled) ? null : ! $packageEnabled]);
+        config(['statamic.graphql.introspection' => $statamicConfig]);
+        $this->app['env'] = $environment;
+
+        $this->assertEquals($expected, GraphQL::introspectionEnabled());
+    }
+
+    public static function introspectionProvider()
+    {
+        return [
+            'pkg null, statamic null, local' => [null, null, 'local', true],
+            'pkg null, statamic null, prod' => [null, null, 'prod', false],
+
+            'pkg enabled, statamic null, local' => [true, null, 'local', true],
+            'pkg enabled, statamic null, prod' => [true, null, 'prod', false],
+            'pkg enabled, statamic auto, local' => [true, 'auto', 'local', true],
+            'pkg enabled, statamic auto, prod' => [true, 'auto', 'prod', false],
+            'pkg enabled, statamic enabled, local' => [true, true, 'local', true],
+            'pkg enabled, statamic enabled, prod' => [true, true, 'prod', true],
+            'pkg enabled, statamic disabled, local' => [true, false, 'local', false],
+            'pkg enabled, statamic disabled, prod' => [true, false, 'prod', false],
+
+            'pkg disabled, statamic null, local' => [false, null, 'local', false],
+            'pkg disabled, statamic null, prod' => [false, null, 'prod', false],
+            'pkg disabled, statamic auto, local' => [false, 'auto', 'local', false],
+            'pkg disabled, statamic auto, prod' => [false, 'auto', 'prod', false],
+            'pkg disabled, statamic enabled, local' => [false, true, 'local', false],
+            'pkg disabled, statamic enabled, prod' => [false, true, 'prod', false],
+            'pkg disabled, statamic disabled, local' => [false, false, 'local', false],
+            'pkg disabled, statamic disabled, prod' => [false, false, 'prod', false],
+        ];
+    }
+}