Shopify · ofri-peretz · Aug 25, 2026 · Aug 25, 2026
diff --git a/.changeset/graphiql-cdn-integrity.md b/.changeset/graphiql-cdn-integrity.md
@@ -0,0 +1,6 @@
+---
+'@shopify/cli-kit': patch
+'@shopify/theme': patch
+---
+
+Add subresource integrity to the CDN assets used by the GraphiQL and theme error pages, and pin the React CDN URLs to the exact version their existing hashes describe
@@ -1,6 +1,7 @@
 import nxPlugin from '@nx/eslint-plugin'
 import cliPlugin from '@shopify/eslint-plugin-cli'
 import jsdocPlugin from 'eslint-plugin-jsdoc'
+import nodeSecurity from 'eslint-plugin-node-security'
 
 // Spread the CLI plugin's base config which includes all necessary plugins
 const config = [
@@ -32,6 +33,25 @@ const config = [
     },
   },
 
+  // The three templates that build HTML around assets fetched from a public
+  // CDN. Without an `integrity` attribute, whatever the CDN returns is what the
+  // page runs — `graphiql.min.js` is three megabytes of executed script — and a
+  // hash pinned against a floating version range breaks silently the day the
+  // range resolves further.
+  //
+  // Scoped to those files, which are clean under the rule after this PR and
+  // were not before, so it turns CI red only on a new one. Pinned to 4.13.1,
+  // published nine days ago, so it clears the `cooldown: default-days: 7` in
+  // .github/dependabot.yml rather than asking for an exception.
+  {
+    files: [
+      'packages/cli-kit/src/public/node/graphiql/templates/*.tsx',
+      'packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts',
+    ],
+    plugins: {'node-security': nodeSecurity},
+    rules: {'node-security/require-dependency-integrity': 'error'},
+  },
+
   // NX module boundaries
   {
     files: ['**/*.ts', '**/*.tsx'],

@@ -61,6 +61,7 @@
     "esbuild": "0.28.1",
     "eslint": "^9.39.5",
     "eslint-plugin-jsdoc": "50.8.0",
+    "eslint-plugin-node-security": "4.13.1",
     "execa": "^7.2.0",
     "fast-glob": "3.3.3",
     "find-up": "^6.3.0",

@@ -73,7 +73,12 @@ export function graphiqlTemplate({
   <head>
     <title>GraphiQL</title>
     <link rel="shortcut icon" href="{{url}}/graphiql/favicon.ico" type="image/x-icon" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shopify/polaris@12.10.0/build/esm/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@shopify/polaris@12.10.0/build/esm/styles.css"
+      integrity="sha384-Hf961G5EtH2Bzpf8q3a7FibjfEPaKMyUpa1RUlLZa8NFyHi0Oel0bOUI30HMIucL"
+      crossorigin="anonymous"
+    />
     <style>
       body {
         height: 100%;
@@ -167,16 +172,21 @@ export function graphiqlTemplate({
     </style>
 
     <script
-      src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"
+      src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"
       integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
       crossorigin="anonymous"
     ></script>
     <script
-      src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"
+      src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"
       integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
       crossorigin="anonymous"
     ></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphiql@3.0.4/graphiql.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/graphiql@3.0.4/graphiql.min.css"
+      integrity="sha384-yz3/sqpuplkA7msMo0FE4ekg0xdwdvZ8JX9MVZREsxipqjU4h8IRfmAMRcb1QpUy"
+      crossorigin="anonymous"
+    />
   </head>
   <body>
     <div id="graphiql">
@@ -243,6 +253,8 @@ export function graphiqlTemplate({
     </div>
     <script
       src="https://cdn.jsdelivr.net/npm/graphiql@3.0.4/graphiql.min.js"
+      integrity="sha384-U3dCpShwVLfbejTspleBBfS9rdysKUq1R5EGWFJk2DTXtc/cRsmwkDYYJ+xP19mO"
+      crossorigin="anonymous"
       type="application/javascript"
     ></script>
     <script>

@@ -118,7 +118,12 @@ export function unauthorizedTemplate({hasAppContext}: UnauthorizedTemplateOption
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shopify/polaris@12.10.0/build/esm/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@shopify/polaris@12.10.0/build/esm/styles.css"
+      integrity="sha384-Hf961G5EtH2Bzpf8q3a7FibjfEPaKMyUpa1RUlLZa8NFyHi0Oel0bOUI30HMIucL"
+      crossorigin="anonymous"
+    />
     <style>
       .vertical-center {
         display: flex;

@@ -4,6 +4,8 @@ interface Error {
 }
 
 const POLARIS_STYLESHEET_URL = 'https://unpkg.com/@shopify/polaris@13.9.2/build/esm/styles.css'
+const POLARIS_STYLESHEET_INTEGRITY =
+  'sha384-Jq1vfnAkgaXSSTna4RtH/iWyr/gTsjmgGgyBAia59wtMRN1TbZqpBPcmRh5DEnN6'
 
 function escapeHtml(unsafe: string) {
   return unsafe
@@ -20,7 +22,12 @@ export function getErrorPage(options: {title: string; header: string; errors: Er
     <html>
       <head>
         <title>${options.title}</title>
-        <link rel="stylesheet" href="${POLARIS_STYLESHEET_URL}" />
+        <link
+          rel="stylesheet"
+          href="${POLARIS_STYLESHEET_URL}"
+          integrity="${POLARIS_STYLESHEET_INTEGRITY}"
+          crossorigin="anonymous"
+        />
       </head>
       <body>
         <div style="display: flex; justify-content: center; padding-top: 2rem;">