Merge pull request #508 from danpalmer/graphiql-no-querystring

Improve Security of GraphiQL
graphql-python · Mar 16, 2019 · 297b807 · 297b807
2 parents 8759239 + 2b08e59
commit 297b807
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 109 deletions.
diff --git a/README.md b/README.md
@@ -20,6 +20,7 @@ pip install "graphene-django>=2.0"
 ```python
 INSTALLED_APPS = (
     # ...
+    'django.contrib.staticfiles', # Required for GraphiQL
     'graphene_django',
 )
 

diff --git a/graphene_django/static/graphene_django/graphiql.js b/graphene_django/static/graphene_django/graphiql.js
@@ -0,0 +1,99 @@
+(function() {
+
+  // Parse the cookie value for a CSRF token
+  var csrftoken;
+  var cookies = ('; ' + document.cookie).split('; csrftoken=');
+  if (cookies.length == 2)
+    csrftoken = cookies.pop().split(';').shift();
+
+  // Collect the URL parameters
+  var parameters = {};
+  window.location.hash.substr(1).split('&').forEach(function (entry) {
+    var eq = entry.indexOf('=');
+    if (eq >= 0) {
+      parameters[decodeURIComponent(entry.slice(0, eq))] =
+        decodeURIComponent(entry.slice(eq + 1));
+    }
+  });
+  // Produce a Location fragment string from a parameter object.
+  function locationQuery(params) {
+    return '#' + Object.keys(params).map(function (key) {
+      return encodeURIComponent(key) + '=' +
+        encodeURIComponent(params[key]);
+    }).join('&');
+  }
+  // Derive a fetch URL from the current URL, sans the GraphQL parameters.
+  var graphqlParamNames = {
+    query: true,
+    variables: true,
+    operationName: true
+  };
+  var otherParams = {};
+  for (var k in parameters) {
+    if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
+      otherParams[k] = parameters[k];
+    }
+  }
+
+  var fetchURL = locationQuery(otherParams);
+
+  // Defines a GraphQL fetcher using the fetch API.
+  function graphQLFetcher(graphQLParams) {
+    var headers = {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    };
+    if (csrftoken) {
+      headers['X-CSRFToken'] = csrftoken;
+    }
+    return fetch(fetchURL, {
+      method: 'post',
+      headers: headers,
+      body: JSON.stringify(graphQLParams),
+      credentials: 'include',
+    }).then(function (response) {
+      return response.text();
+    }).then(function (responseBody) {
+      try {
+        return JSON.parse(responseBody);
+      } catch (error) {
+        return responseBody;
+      }
+    });
+  }
+  // When the query and variables string is edited, update the URL bar so
+  // that it can be easily shared.
+  function onEditQuery(newQuery) {
+    parameters.query = newQuery;
+    updateURL();
+  }
+  function onEditVariables(newVariables) {
+    parameters.variables = newVariables;
+    updateURL();
+  }
+  function onEditOperationName(newOperationName) {
+    parameters.operationName = newOperationName;
+    updateURL();
+  }
+  function updateURL() {
+    history.replaceState(null, null, locationQuery(parameters));
+  }
+  var options = {
+    fetcher: graphQLFetcher,
+      onEditQuery: onEditQuery,
+      onEditVariables: onEditVariables,
+      onEditOperationName: onEditOperationName,
+      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
+  );
+})();
diff --git a/graphene_django/templates/graphene/graphiql.html b/graphene_django/templates/graphene/graphiql.html
@@ -5,6 +5,7 @@
 If you wish to receive JSON, provide the header "Accept: application/json" or
 add "&raw" to the end of the URL within a browser.
 -->
+{% load static %}
 <!DOCTYPE html>
 <html>
 <head>
@@ -23,101 +24,6 @@
   <script src="//cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.min.js"></script>
 </head>
 <body>
-  <script>
-    // Parse the cookie value for a CSRF token
-    var csrftoken;
-    var cookies = ('; ' + document.cookie).split('; csrftoken=');
-    if (cookies.length == 2)
-      csrftoken = cookies.pop().split(';').shift();
-
-    // Collect the URL parameters
-    var parameters = {};
-    window.location.search.substr(1).split('&').forEach(function (entry) {
-      var eq = entry.indexOf('=');
-      if (eq >= 0) {
-        parameters[decodeURIComponent(entry.slice(0, eq))] =
-          decodeURIComponent(entry.slice(eq + 1));
-      }
-    });
-    // Produce a Location query string from a parameter object.
-    function locationQuery(params) {
-      return '?' + Object.keys(params).map(function (key) {
-        return encodeURIComponent(key) + '=' +
-          encodeURIComponent(params[key]);
-      }).join('&');
-    }
-    // Derive a fetch URL from the current URL, sans the GraphQL parameters.
-    var graphqlParamNames = {
-      query: true,
-      variables: true,
-      operationName: true
-    };
-    var otherParams = {};
-    for (var k in parameters) {
-      if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
-        otherParams[k] = parameters[k];
-      }
-    }
-    var fetchURL = locationQuery(otherParams);
-    // Defines a GraphQL fetcher using the fetch API.
-    function graphQLFetcher(graphQLParams) {
-      var headers = {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-      };
-      if (csrftoken) {
-        headers['X-CSRFToken'] = csrftoken;
-      }
-      return fetch(fetchURL, {
-        method: 'post',
-        headers: headers,
-        body: JSON.stringify(graphQLParams),
-        credentials: 'include',
-      }).then(function (response) {
-        return response.text();
-      }).then(function (responseBody) {
-        try {
-          return JSON.parse(responseBody);
-        } catch (error) {
-          return responseBody;
-        }
-      });
-    }
-    // When the query and variables string is edited, update the URL bar so
-    // that it can be easily shared.
-    function onEditQuery(newQuery) {
-      parameters.query = newQuery;
-      updateURL();
-    }
-    function onEditVariables(newVariables) {
-      parameters.variables = newVariables;
-      updateURL();
-    }
-    function onEditOperationName(newOperationName) {
-      parameters.operationName = newOperationName;
-      updateURL();
-    }
-    function updateURL() {
-      history.replaceState(null, null, locationQuery(parameters));
-    }
-    // Render <GraphiQL /> into the body.
-    ReactDOM.render(
-      React.createElement(GraphiQL, {
-        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 %}
-      }),
-      document.body
-    );
-  </script>
+  <script src="{% static 'graphene_django/graphiql.js' %}"></script>
 </body>
 </html>
diff --git a/graphene_django/views.py b/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"
             )