Further GraphiQL fixes

Author: mxsasha

irrd/server/graphql/graphiql_csp.py

@@ -11,6 +11,7 @@
 
 import base64
 import hashlib
+import re
 from html.parser import HTMLParser
 from typing import NamedTuple
 
@@ -96,6 +97,25 @@ def handle_endtag(self, tag):
         self._capturing = None
 
 
+def _hoist_importmap(html: str) -> str:
+    # Ariadne's inline module script imports bare specifiers like `from 'react'`;
+    # its <script type="importmap"> maps those names to URLs. Per spec the
+    # importmap must come before any module reference, but ariadne emits
+    # <link rel="modulepreload"> tags first, so the map is ignored and imports
+    # fail. Move the importmap to just before the first modulepreload.
+    # See https://github.com/mirumee/ariadne/issues/1326
+    match = re.search(r'<script type="importmap">.*?</script>\n', html, re.DOTALL)
+    if not match or '<link rel="modulepreload"' not in html[: match.start()]:
+        return html
+    importmap = match.group(0)
+    html = html.replace(importmap, "", 1)
+    return html.replace(
+        '<link rel="modulepreload"',
+        importmap + '    <link rel="modulepreload"',
+        1,
+    )
+
+
 def _inject_sri(html: str) -> str:
     # ariadne already emits `crossorigin="anonymous"` on its external loads;
     # we add `integrity=` so SRI verification runs. If ariadne ever changes
@@ -119,6 +139,7 @@ def build_explorer() -> GraphiQLExplorerBuild:
     import time so the failure is loud.
     """
     explorer = ExplorerGraphiQL(title="IRRD GraphQL", explorer_plugin=True)
+    explorer.parsed_html = _hoist_importmap(explorer.parsed_html)
     explorer.parsed_html = _inject_sri(explorer.parsed_html)
 
     scan = _ExplorerScan()

irrd/server/graphql/tests/test_graphiql_csp.py

@@ -34,6 +34,10 @@ def test_inject_sri_silent_noop_fails(self, monkeypatch):
         with pytest.raises(RuntimeError, match="integrity"):
             build_explorer()
 
+    def test_hoist_importmap_noop_when_already_correct(self):
+        html = '<script type="importmap"></script>\n<link rel="modulepreload" />'
+        assert graphiql_csp._hoist_importmap(html) == html
+
     def test_explorer_scan_captures_script_src(self):
         # ariadne 1.1.0 emits ESM via <link rel=modulepreload>, but _ExplorerScan
         # still recognises <script src=...> as defense if ariadne ever reverts.

irrd/server/http/app.py

@@ -209,7 +209,9 @@ async def __call__(self, scope: Scope, receive: Receive, send: Send) -> None:
     # (/graphql, /v1/*), this header must be changed to cross-origin for those routes,
     # otherwise CORP will override CORS and block cross-origin browser clients.
     b"cross-origin-resource-policy": b"same-origin",
-    b"cross-origin-embedder-policy": b"require-corp",
+    # Cross-Origin-Embedder-Policy is intentionally not set: esm.sh, which
+    # serves the GraphiQL bundles, does not send Cross-Origin-Resource-Policy,
+    # so `require-corp` would block GraphiQL.
     b"x-permitted-cross-domain-policies": b"none",
 }