Use SRI-stable artifacts for GraphiQL resources

graphene_django/static/graphene_django/graphiql.js

@@ -1,43 +1,55 @@
 (function (
   document,
+
   GRAPHENE_SETTINGS,
   GraphiQL,
   React,
   ReactDOM,
   SubscriptionsTransportWs,
+  fetch,
   history,
   location,
 ) {
   // Parse the cookie value for a CSRF token
   var csrftoken;
-  var cookies = ('; ' + document.cookie).split('; csrftoken=');
+  var cookies = ("; " + document.cookie).split("; csrftoken=");
   if (cookies.length == 2) {
-    csrftoken = cookies.pop().split(';').shift();
+    csrftoken = cookies.pop().split(";").shift();
   } else {
     csrftoken = document.querySelector("[name=csrfmiddlewaretoken]").value;
   }
 
   // Collect the URL parameters
   var parameters = {};
-  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));
-    }
-  });
+  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('&');
+    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
+    operationName: true,
   };
   var otherParams = {};
   for (var k in parameters) {
@@ -51,26 +63,28 @@
   // Defines a GraphQL fetcher using the fetch API.
   function httpClient(graphQLParams) {
     var headers = {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
+      Accept: "application/json",
+      "Content-Type": "application/json",
     };
     if (csrftoken) {
-      headers['X-CSRFToken'] = csrftoken;
+      headers["X-CSRFToken"] = csrftoken;
     }
     return fetch(fetchURL, {
-      method: 'post',
+      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;
-      }
-    });
+      credentials: "include",
+    })
+      .then(function (response) {
+        return response.text();
+      })
+      .then(function (responseBody) {
+        try {
+          return JSON.parse(responseBody);
+        } catch (error) {
+          return responseBody;
+        }
+      });
   }
 
   // Derive the subscription URL. If the SUBSCRIPTION_URL setting is specified, uses that value. Otherwise
@@ -157,7 +171,7 @@
     onEditVariables: onEditVariables,
     onEditOperationName: onEditOperationName,
     query: parameters.query,
-  }
+  };
   if (parameters.variables) {
     options.variables = parameters.variables;
   }
@@ -167,15 +181,17 @@
   // Render <GraphiQL /> into the body.
   ReactDOM.render(
     React.createElement(GraphiQL, options),
-    document.getElementById("editor")
+    document.getElementById("editor"),
   );
 })(
   document,
+
   window.GRAPHENE_SETTINGS,
   window.GraphiQL,
   window.React,
   window.ReactDOM,
   window.SubscriptionsTransportWs,
+  window.fetch,
   window.history,
   window.location,
 );

graphene_django/templates/graphene/graphiql.html

@@ -21,7 +21,7 @@ add "&raw" to the end of the URL within a browser.
         integrity="{{graphiql_css_sri}}"
         rel="stylesheet"
         crossorigin="anonymous" />
-  <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@{{whatwg_fetch_version}}/fetch.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@{{whatwg_fetch_version}}/dist/fetch.umd.js"
           integrity="{{whatwg_fetch_sri}}"
           crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/react@{{react_version}}/umd/react.production.min.js"
@@ -33,7 +33,7 @@ add "&raw" to the end of the URL within a browser.
   <script src="https://cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.min.js"
           integrity="{{graphiql_sri}}"
           crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/subscriptions-transport-ws@{{subscriptions_transport_ws_version}}/browser/client.min.js"
+  <script src="https://cdn.jsdelivr.net/npm/subscriptions-transport-ws@{{subscriptions_transport_ws_version}}/browser/client.js"
           integrity="{{subscriptions_transport_ws_sri}}"
           crossorigin="anonymous"></script>
 </head>

graphene_django/views.py

@@ -56,7 +56,7 @@ class GraphQLView(View):
 
     # Polyfill for window.fetch.
     whatwg_fetch_version = "3.2.0"
-    whatwg_fetch_sri = "sha256-OdOTEWtaemRcFdpGZD+NWFkiCZgo5s6LU3kIT3w2iQk="
+    whatwg_fetch_sri = "sha256-l6HCB9TT2v89oWbDdo2Z3j+PSVypKNLA/nqfzSbM8mo="
 
     # React and ReactDOM.
     react_version = "16.13.1"
@@ -71,7 +71,7 @@ class GraphQLView(View):
     # The websocket transport library for subscriptions.
     subscriptions_transport_ws_version = "0.9.17"
     subscriptions_transport_ws_sri = (
-        "sha256-AYkMMCvLy9lmI+vvCqO5sVM40CeY6Bf+EdulzGlwTXI="
+        "sha256-kCDzver8iRaIQ/SVlfrIwxaBQ/avXf9GQFJRLlErBnk="
     )
 
     schema = None