Improve Security of GraphiQL

graphene_django/templates/graphene/graphiql.html

@@ -32,7 +32,7 @@
 
     // Collect the URL parameters
     var parameters = {};
-    window.location.search.substr(1).split('&').forEach(function (entry) {
+    window.location.hash.substr(1).split('&').forEach(function (entry) {
       var eq = entry.indexOf('=');
       if (eq >= 0) {
         parameters[decodeURIComponent(entry.slice(0, eq))] =
@@ -41,7 +41,7 @@
     });
     // Produce a Location query string from a parameter object.
     function locationQuery(params) {
-      return '?' + Object.keys(params).map(function (key) {
+      return '#' + Object.keys(params).map(function (key) {
         return encodeURIComponent(key) + '=' +
           encodeURIComponent(params[key]);
       }).join('&');
@@ -100,22 +100,29 @@
     function updateURL() {
       history.replaceState(null, null, locationQuery(parameters));
     }
-    // Render <GraphiQL /> into the body.
-    ReactDOM.render(
-      React.createElement(GraphiQL, {
-        fetcher: graphQLFetcher,
+    // If there are any fragment parameters, confirm the user wants to use them.
+    var isReload = window.performance ? performance.navigation.type === 1 : false;
+    if (Object.keys(parameters).length
+      && !isReload
+      && !window.confirm("An untrusted query has been loaded, continue loading query?")) {
+      parameters = {};
+    }
+    var options = {
+      fetcher: graphQLFetcher,
         onEditQuery: onEditQuery,
         onEditVariables: onEditVariables,
         onEditOperationName: onEditOperationName,
-        query: '{{ query|escapejs }}',
-        response: '{{ result|escapejs }}',
-        {% if variables %}
-        variables: '{{ variables|escapejs }}',
-        {% endif %}
-        {% if operation_name %}
-        operationName: '{{ operation_name|escapejs }}',
-        {% endif %}
-      }),
+        query: parameters.query,
+    }
+    if (parameters.variables) {
+      options.variables = parameters.variables;
+    }
+    if (parameters.operation_name) {
+      options.operationName = parameters.operation_name;
+    }
+    // Render <GraphiQL /> into the body.
+    ReactDOM.render(
+      React.createElement(GraphiQL, options),
       document.body
     );
   </script>

graphene_django/views.py

@@ -124,6 +124,12 @@ def dispatch(self, request, *args, **kwargs):
             data = self.parse_body(request)
             show_graphiql = self.graphiql and self.can_display_graphiql(request, data)
 
+            if show_graphiql:
+                return self.render_graphiql(
+                    request,
+                    graphiql_version=self.graphiql_version,
+                )
+
             if self.batch:
                 responses = [self.get_response(request, entry) for entry in data]
                 result = "[{}]".format(
@@ -137,19 +143,6 @@ def dispatch(self, request, *args, **kwargs):
             else:
                 result, status_code = self.get_response(request, data, show_graphiql)
 
-            if show_graphiql:
-                query, variables, operation_name, id = self.get_graphql_params(
-                    request, data
-                )
-                return self.render_graphiql(
-                    request,
-                    graphiql_version=self.graphiql_version,
-                    query=query or "",
-                    variables=json.dumps(variables) or "",
-                    operation_name=operation_name or "",
-                    result=result or "",
-                )
-
             return HttpResponse(
                 status=status_code, content=result, content_type="application/json"
             )