BUG Fix CSP headers by using Requirements API for custom script (#50)

Author: Maxime Rainville

src/Controller.php

@@ -11,6 +11,7 @@
 use SilverStripe\Core\Path;
 use SilverStripe\GraphQL\Schema\Schema;
 use SilverStripe\Security\SecurityToken;
+use SilverStripe\View\Requirements;
 
 class Controller extends BaseController
 {
@@ -34,26 +35,51 @@ class Controller extends BaseController
     public function index(HTTPRequest $request)
     {
         $routes = $this->getRoutes();
-        $json = null;
+        $endpoint = sizeof($routes ?? []) === 1 ? $routes[0] : null;
+        $csrf = SecurityToken::inst()->getValue();
+        $tabs = [];
         if (sizeof($routes ?? []) > 1) {
-            $tabs = [];
             foreach ($routes as $route) {
                 $tabs[] = [
                     'endpoint' => Director::absoluteURL($route),
                     'query' => '',
                     'name' => $route,
                     'headers' => [
-                        'X-CSRF-TOKEN' => SecurityToken::inst()->getValue(),
+                        'X-CSRF-TOKEN' => $csrf,
                     ]
                 ];
             }
+        }
+
+        $data = [
+            'headers' => [
+                'X-CSRF-TOKEN' => $csrf,
+            ],
+            'endpoint' => $endpoint,
+            'settings' => [
+                'request.globalHeaders' => [
+                    'X-CSRF-TOKEN' => $csrf,
+                ],
+                'request.credentials' => 'include',
+            ],
+        ];
 
-            $json = json_encode($tabs);
+        if ($tabs) {
+            $data['tabs'] = $tabs;
         }
 
+        $jsonPayload = json_encode($data);
+
+        Requirements::customScript(<<<JS
+          window.addEventListener('load', function (event) {
+            GraphQLPlayground.init(document.getElementById('root'), $jsonPayload)
+          });
+        JS
+        );
+
         return [
-            'Endpoint' => sizeof($routes ?? []) === 1 ? $routes[0] : null,
-            'TabsJSON' => $json,
+            'Endpoint' => $endpoint,
+            'TabsJSON' => $tabs ? json_encode($tabs): null,
         ];
     }
 

templates/DevTools.ss

@@ -7,7 +7,7 @@
     <title>GraphQL IDE | Silverstripe CMS</title>
     <link rel="shortcut icon" href="$resourceURL('silverstripe/graphql-devtools: client/favicon.png')" />
     <% require javascript('silverstripe/graphql-devtools: client/bundle.js') %>
-    
+
     <style>
         html, body {
             margin: 0;
@@ -91,22 +91,5 @@
         <span class="title">GraphQL Playground</span>
     </div>
 </div>
-<script>window.addEventListener('load', function (event) {
-    GraphQLPlayground.init(document.getElementById('root'), {
-        headers: {
-            'X-CSRF-TOKEN': '$SecurityID',
-        },
-        endpoint: '$Endpoint',
-        settings: {
-            'request.globalHeaders': {
-                'X-CSRF-TOKEN': '$SecurityID'
-            },
-            'request.credentials': 'include',
-        },
-        <% if $TabsJSON %>
-        tabs: $TabsJSON.RAW
-        <% end_if %>
-    })
-})</script>
 </body>
 </html>