@apollo/server - npm Package Compare versions

Comparing version 4.7.3 to 4.7.4

dist/cjs/ApolloServer.js

@@ -501,2 +501,16 @@ "use strict";
                 this.prefersHTML(httpGraphQLRequest)) {
+                let renderedHtml;
+                if (typeof runningServerState.landingPage.html === 'string') {
+                    renderedHtml = runningServerState.landingPage.html;
+                }
+                else {
+                    try {
+                        renderedHtml = await runningServerState.landingPage.html();
+                    }
+                    catch (maybeError) {
+                        const error = (0, errorNormalize_js_1.ensureError)(maybeError);
+                        this.logger.error(`Landing page \`html\` function threw: ${error}`);
+                        return this.errorResponse(error, httpGraphQLRequest);
+                    }
+                }
                 return {
@@ -506,3 +520,3 @@ headers: new HeaderMap_js_1.HeaderMap([['content-type', 'text/html']]),
                         kind: 'complete',
-                        string: runningServerState.landingPage.html,
+                        string: renderedHtml,
                     },
@@ -509,0 +523,0 @@ };

dist/cjs/generated/packageVersion.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.packageVersion = void 0;
-exports.packageVersion = "4.7.3";
+exports.packageVersion = "4.7.4";
 //# sourceMappingURL=packageVersion.js.map

dist/cjs/plugin/landingPage/default/getEmbeddedHTML.js

@@ -43,2 +43,3 @@ "use strict";
         runTelemetry: productionLandingPageEmbedConfigOrDefault.runTelemetry,
+        allowDynamicStyles: false,
     };
@@ -50,11 +51,17 @@ return `
 </div>
-<style>
+<style nonce=${nonce}>
   iframe {
     background-color: white;
+    height: 100%;
+    width: 100%;
+    border: none;
   }
+  #embeddableExplorer {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+  }
 </style>
-<div
-style="width: 100vw; height: 100vh; position: absolute; top: 0;"
-id="embeddableExplorer"
-></div>
+<div id="embeddableExplorer"></div>
 <script nonce="${nonce}" src="https://embeddable-explorer.cdn.apollographql.com/${encodeURIComponent(explorerCdnVersion)}/embeddable-explorer.umd.production.min.js?runtime=${encodeURIComponent(apolloServerVersion)}"></script>
@@ -102,2 +109,3 @@ <script nonce="${nonce}">
         runTelemetry: localDevelopmentEmbedConfigOrDefault.runTelemetry,
+        allowDynamicStyles: false,
     };
@@ -109,11 +117,17 @@ return `
 </div>
-<style>
+<style nonce=${nonce}>
   iframe {
     background-color: white;
+    height: 100%;
+    width: 100%;
+    border: none;
   }
+  #embeddableSandbox {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+  }
 </style>
-<div
-style="width: 100vw; height: 100vh; position: absolute; top: 0;"
-id="embeddableSandbox"
-></div>
+<div id="embeddableSandbox"></div>
 <script nonce="${nonce}" src="https://embeddable-sandbox.cdn.apollographql.com/${encodeURIComponent(sandboxCdnVersion)}/embeddable-sandbox.umd.production.min.js?runtime=${encodeURIComponent(apolloServerVersion)}"></script>
@@ -120,0 +134,0 @@ <script nonce="${nonce}">

dist/cjs/plugin/landingPage/default/index.js

@@ -45,10 +45,36 @@ "use strict";
     const apolloServerVersion = `@apollo/server@${packageVersion_js_1.packageVersion}`;
-    const nonce = config.precomputedNonce ??
-        (0, utils_createhash_1.createHash)('sha256').update((0, uuid_1.v4)()).digest('hex');
+    const scriptSafeList = [
+        'https://apollo-server-landing-page.cdn.apollographql.com',
+        'https://embeddable-sandbox.cdn.apollographql.com',
+        'https://embeddable-explorer.cdn.apollographql.com',
+    ].join(' ');
+    const styleSafeList = [
+        'https://apollo-server-landing-page.cdn.apollographql.com',
+        'https://embeddable-sandbox.cdn.apollographql.com',
+        'https://embeddable-explorer.cdn.apollographql.com',
+        'https://fonts.googleapis.com',
+    ].join(' ');
+    const iframeSafeList = [
+        'https://explorer.embed.apollographql.com',
+        'https://sandbox.embed.apollographql.com',
+        'https://embed.apollo.local:3000',
+    ].join(' ');
     return {
         __internal_installed_implicitly__: false,
-        async serverWillStart() {
+        async serverWillStart(server) {
+            if (config.precomputedNonce) {
+                server.logger.warn("The `precomputedNonce` landing page configuration option is deprecated. Removing this option is strictly an improvement to Apollo Server's landing page Content Security Policy (CSP) implementation for preventing XSS attacks.");
+            }
             return {
                 async renderLandingPage() {
-                    const html = `
+                    const encodedVersion = encodeURIComponent(version);
+                    async function html() {
+                        const nonce = config.precomputedNonce ??
+                            (0, utils_createhash_1.createHash)('sha256').update((0, uuid_1.v4)()).digest('hex');
+                        const scriptCsp = `script-src 'self' 'nonce-${nonce}' ${scriptSafeList}`;
+                        const styleCsp = `style-src 'nonce-${nonce}' ${styleSafeList}`;
+                        const imageCsp = `img-src https://apollo-server-landing-page.cdn.apollographql.com`;
+                        const manifestCsp = `manifest-src https://apollo-server-landing-page.cdn.apollographql.com`;
+                        const frameCsp = `frame-src ${iframeSafeList}`;
+                        return `
 <!DOCTYPE html>
@@ -58,6 +84,6 @@ <html lang="en">
     <meta charset="utf-8" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-${nonce}' https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(version)}/static/js/main.js https://embeddable-sandbox.cdn.apollographql.com/${encodeURIComponent(version)}/embeddable-sandbox.umd.production.min.js https://embeddable-explorer.cdn.apollographql.com/${encodeURIComponent(version)}/embeddable-explorer.umd.production.min.js" />
+    <meta http-equiv="Content-Security-Policy" content="${scriptCsp}; ${styleCsp}; ${imageCsp}; ${manifestCsp}; ${frameCsp}" />
     <link
       rel="icon"
-      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(version)}/assets/favicon.png"
+      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodedVersion}/assets/favicon.png"
     />
@@ -74,14 +100,19 @@ <meta name="viewport" content="width=device-width,initial-scale=1" />
       rel="apple-touch-icon"
-      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(version)}/assets/favicon.png"
+      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodedVersion}/assets/favicon.png"
     />
     <link
       rel="manifest"
-      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(version)}/manifest.json"
+      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodedVersion}/manifest.json"
     />
     <title>Apollo Server</title>
   </head>
-  <body style="margin: 0; overflow-x: hidden; overflow-y: hidden">
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="react-root">
-      <style>
+      <style nonce=${nonce}>
+        body {
+          margin: 0;
+          overflow-x: hidden;
+          overflow-y: hidden;
+        }
         .fallback {
@@ -100,8 +131,8 @@ opacity: 0;
     ${config.embed
-                        ? 'graphRef' in config && config.graphRef
-                            ? (0, getEmbeddedHTML_js_1.getEmbeddedExplorerHTML)(version, config, apolloServerVersion, nonce)
-                            : !('graphRef' in config)
-                                ? (0, getEmbeddedHTML_js_1.getEmbeddedSandboxHTML)(version, config, apolloServerVersion, nonce)
-                                : getNonEmbeddedLandingPageHTML(version, config, apolloServerVersion, nonce)
-                        : getNonEmbeddedLandingPageHTML(version, config, apolloServerVersion, nonce)}
+                            ? 'graphRef' in config && config.graphRef
+                                ? (0, getEmbeddedHTML_js_1.getEmbeddedExplorerHTML)(version, config, apolloServerVersion, nonce)
+                                : !('graphRef' in config)
+                                    ? (0, getEmbeddedHTML_js_1.getEmbeddedSandboxHTML)(version, config, apolloServerVersion, nonce)
+                                    : getNonEmbeddedLandingPageHTML(version, config, apolloServerVersion, nonce)
+                            : getNonEmbeddedLandingPageHTML(version, config, apolloServerVersion, nonce)}
     </div>
@@ -111,2 +142,3 @@ </body>
           `;
+                    }
                     return { html };
@@ -113,0 +145,0 @@ },

dist/esm/ApolloServer.js

@@ -472,2 +472,16 @@ import { isNodeLike } from '@apollo/utils.isnodelike';
                 this.prefersHTML(httpGraphQLRequest)) {
+                let renderedHtml;
+                if (typeof runningServerState.landingPage.html === 'string') {
+                    renderedHtml = runningServerState.landingPage.html;
+                }
+                else {
+                    try {
+                        renderedHtml = await runningServerState.landingPage.html();
+                    }
+                    catch (maybeError) {
+                        const error = ensureError(maybeError);
+                        this.logger.error(`Landing page \`html\` function threw: ${error}`);
+                        return this.errorResponse(error, httpGraphQLRequest);
+                    }
+                }
                 return {
@@ -477,3 +491,3 @@ headers: new HeaderMap([['content-type', 'text/html']]),
                         kind: 'complete',
-                        string: runningServerState.landingPage.html,
+                        string: renderedHtml,
                     },
@@ -480,0 +494,0 @@ };

dist/esm/externalTypes/plugins.d.ts

@@ -44,3 +44,3 @@ import type { KeyValueCache } from '@apollo/utils.keyvaluecache';
 export interface LandingPage {
-    html: string;
+    html: string | (() => Promise<string>);
 }
@@ -47,0 +47,0 @@ export type GraphQLRequestListenerParsingDidEnd = (err?: Error) => Promise<void>;

dist/esm/generated/packageVersion.d.ts

@@ -1,2 +0,2 @@
-export declare const packageVersion = "4.7.3";
+export declare const packageVersion = "4.7.4";
 //# sourceMappingURL=packageVersion.d.ts.map

dist/esm/generated/packageVersion.js

@@ -1,2 +0,2 @@
-export const packageVersion = "4.7.3";
+export const packageVersion = "4.7.4";
 //# sourceMappingURL=packageVersion.js.map

dist/esm/plugin/landingPage/default/getEmbeddedHTML.js

@@ -40,2 +40,3 @@ function getConfigStringForHtml(config) {
         runTelemetry: productionLandingPageEmbedConfigOrDefault.runTelemetry,
+        allowDynamicStyles: false,
     };
@@ -47,11 +48,17 @@ return `
 </div>
-<style>
+<style nonce=${nonce}>
   iframe {
     background-color: white;
+    height: 100%;
+    width: 100%;
+    border: none;
   }
+  #embeddableExplorer {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+  }
 </style>
-<div
-style="width: 100vw; height: 100vh; position: absolute; top: 0;"
-id="embeddableExplorer"
-></div>
+<div id="embeddableExplorer"></div>
 <script nonce="${nonce}" src="https://embeddable-explorer.cdn.apollographql.com/${encodeURIComponent(explorerCdnVersion)}/embeddable-explorer.umd.production.min.js?runtime=${encodeURIComponent(apolloServerVersion)}"></script>
@@ -98,2 +105,3 @@ <script nonce="${nonce}">
         runTelemetry: localDevelopmentEmbedConfigOrDefault.runTelemetry,
+        allowDynamicStyles: false,
     };
@@ -105,11 +113,17 @@ return `
 </div>
-<style>
+<style nonce=${nonce}>
   iframe {
     background-color: white;
+    height: 100%;
+    width: 100%;
+    border: none;
   }
+  #embeddableSandbox {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+  }
 </style>
-<div
-style="width: 100vw; height: 100vh; position: absolute; top: 0;"
-id="embeddableSandbox"
-></div>
+<div id="embeddableSandbox"></div>
 <script nonce="${nonce}" src="https://embeddable-sandbox.cdn.apollographql.com/${encodeURIComponent(sandboxCdnVersion)}/embeddable-sandbox.umd.production.min.js?runtime=${encodeURIComponent(apolloServerVersion)}"></script>
@@ -116,0 +130,0 @@ <script nonce="${nonce}">

dist/esm/plugin/landingPage/default/index.js

@@ -40,10 +40,36 @@ import { getEmbeddedExplorerHTML, getEmbeddedSandboxHTML, } from './getEmbeddedHTML.js';
     const apolloServerVersion = `@apollo/server@${packageVersion}`;
-    const nonce = config.precomputedNonce ??
-        createHash('sha256').update(uuidv4()).digest('hex');
+    const scriptSafeList = [
+        'https://apollo-server-landing-page.cdn.apollographql.com',
+        'https://embeddable-sandbox.cdn.apollographql.com',
+        'https://embeddable-explorer.cdn.apollographql.com',
+    ].join(' ');
+    const styleSafeList = [
+        'https://apollo-server-landing-page.cdn.apollographql.com',
+        'https://embeddable-sandbox.cdn.apollographql.com',
+        'https://embeddable-explorer.cdn.apollographql.com',
+        'https://fonts.googleapis.com',
+    ].join(' ');
+    const iframeSafeList = [
+        'https://explorer.embed.apollographql.com',
+        'https://sandbox.embed.apollographql.com',
+        'https://embed.apollo.local:3000',
+    ].join(' ');
     return {
         __internal_installed_implicitly__: false,
-        async serverWillStart() {
+        async serverWillStart(server) {
+            if (config.precomputedNonce) {
+                server.logger.warn("The `precomputedNonce` landing page configuration option is deprecated. Removing this option is strictly an improvement to Apollo Server's landing page Content Security Policy (CSP) implementation for preventing XSS attacks.");
+            }
             return {
                 async renderLandingPage() {
-                    const html = `
+                    const encodedVersion = encodeURIComponent(version);
+                    async function html() {
+                        const nonce = config.precomputedNonce ??
+                            createHash('sha256').update(uuidv4()).digest('hex');
+                        const scriptCsp = `script-src 'self' 'nonce-${nonce}' ${scriptSafeList}`;
+                        const styleCsp = `style-src 'nonce-${nonce}' ${styleSafeList}`;
+                        const imageCsp = `img-src https://apollo-server-landing-page.cdn.apollographql.com`;
+                        const manifestCsp = `manifest-src https://apollo-server-landing-page.cdn.apollographql.com`;
+                        const frameCsp = `frame-src ${iframeSafeList}`;
+                        return `
 <!DOCTYPE html>
@@ -53,6 +79,6 @@ <html lang="en">
     <meta charset="utf-8" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-${nonce}' https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(version)}/static/js/main.js https://embeddable-sandbox.cdn.apollographql.com/${encodeURIComponent(version)}/embeddable-sandbox.umd.production.min.js https://embeddable-explorer.cdn.apollographql.com/${encodeURIComponent(version)}/embeddable-explorer.umd.production.min.js" />
+    <meta http-equiv="Content-Security-Policy" content="${scriptCsp}; ${styleCsp}; ${imageCsp}; ${manifestCsp}; ${frameCsp}" />
     <link
       rel="icon"
-      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(version)}/assets/favicon.png"
+      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodedVersion}/assets/favicon.png"
     />
@@ -69,14 +95,19 @@ <meta name="viewport" content="width=device-width,initial-scale=1" />
       rel="apple-touch-icon"
-      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(version)}/assets/favicon.png"
+      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodedVersion}/assets/favicon.png"
     />
     <link
       rel="manifest"
-      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(version)}/manifest.json"
+      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodedVersion}/manifest.json"
     />
     <title>Apollo Server</title>
   </head>
-  <body style="margin: 0; overflow-x: hidden; overflow-y: hidden">
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="react-root">
-      <style>
+      <style nonce=${nonce}>
+        body {
+          margin: 0;
+          overflow-x: hidden;
+          overflow-y: hidden;
+        }
         .fallback {
@@ -95,8 +126,8 @@ opacity: 0;
     ${config.embed
-                        ? 'graphRef' in config && config.graphRef
-                            ? getEmbeddedExplorerHTML(version, config, apolloServerVersion, nonce)
-                            : !('graphRef' in config)
-                                ? getEmbeddedSandboxHTML(version, config, apolloServerVersion, nonce)
-                                : getNonEmbeddedLandingPageHTML(version, config, apolloServerVersion, nonce)
-                        : getNonEmbeddedLandingPageHTML(version, config, apolloServerVersion, nonce)}
+                            ? 'graphRef' in config && config.graphRef
+                                ? getEmbeddedExplorerHTML(version, config, apolloServerVersion, nonce)
+                                : !('graphRef' in config)
+                                    ? getEmbeddedSandboxHTML(version, config, apolloServerVersion, nonce)
+                                    : getNonEmbeddedLandingPageHTML(version, config, apolloServerVersion, nonce)
+                            : getNonEmbeddedLandingPageHTML(version, config, apolloServerVersion, nonce)}
     </div>
@@ -106,2 +137,3 @@ </body>
           `;
+                    }
                     return { html };
@@ -108,0 +140,0 @@ },

package.json

 {
   "name": "@apollo/server",
-  "version": "4.7.3",
+  "version": "4.7.4",
   "description": "Core engine for Apollo GraphQL server",
@@ -5,0 +5,0 @@ "type": "module",

src/ApolloServer.ts

@@ -1019,2 +1019,15 @@ import { isNodeLike } from '@apollo/utils.isnodelike';
       ) {
+        let renderedHtml;
+        if (typeof runningServerState.landingPage.html === 'string') {
+          renderedHtml = runningServerState.landingPage.html;
+        } else {
+          try {
+            renderedHtml = await runningServerState.landingPage.html();
+          } catch (maybeError: unknown) {
+            const error = ensureError(maybeError);
+            this.logger.error(`Landing page \`html\` function threw: ${error}`);
+            return this.errorResponse(error, httpGraphQLRequest);
+          }
+        }
+
         return {
@@ -1024,3 +1037,3 @@ headers: new HeaderMap([['content-type', 'text/html']]),
             kind: 'complete',
-            string: runningServerState.landingPage.html,
+            string: renderedHtml,
           },
@@ -1027,0 +1040,0 @@ };

src/externalTypes/plugins.ts

@@ -116,3 +116,3 @@ /**
 export interface LandingPage {
-  html: string;
+  html: string | (() => Promise<string>);
 }
@@ -119,0 +119,0 @@

src/generated/packageVersion.ts

@@ -1,1 +0,1 @@
-export const packageVersion = "4.7.3";
+export const packageVersion = "4.7.4";

src/plugin/landingPage/default/getEmbeddedHTML.ts

@@ -52,2 +52,4 @@ import type {
     runTelemetry?: boolean;
+
+    allowDynamicStyles?: boolean; // defaults to 'true'
   }
@@ -89,2 +91,3 @@ const productionLandingPageEmbedConfigOrDefault = {
     runTelemetry: productionLandingPageEmbedConfigOrDefault.runTelemetry,
+    allowDynamicStyles: false, // disabled for CSP - we add the iframe styles ourselves instead
   };
@@ -97,11 +100,17 @@
 </div>
-<style>
+<style nonce=${nonce}>
   iframe {
     background-color: white;
+    height: 100%;
+    width: 100%;
+    border: none;
   }
+  #embeddableExplorer {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+  }
 </style>
-<div
-style="width: 100vw; height: 100vh; position: absolute; top: 0;"
-id="embeddableExplorer"
-></div>
+<div id="embeddableExplorer"></div>
 <script nonce="${nonce}" src="https://embeddable-explorer.cdn.apollographql.com/${encodeURIComponent(
@@ -160,2 +169,3 @@ explorerCdnVersion,
     runTelemetry: localDevelopmentEmbedConfigOrDefault.runTelemetry,
+    allowDynamicStyles: false, // disabled for CSP - we add the iframe styles ourselves instead
   };
@@ -167,11 +177,17 @@ return `
 </div>
-<style>
+<style nonce=${nonce}>
   iframe {
     background-color: white;
+    height: 100%;
+    width: 100%;
+    border: none;
   }
+  #embeddableSandbox {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+  }
 </style>
-<div
-style="width: 100vw; height: 100vh; position: absolute; top: 0;"
-id="embeddableSandbox"
-></div>
+<div id="embeddableSandbox"></div>
 <script nonce="${nonce}" src="https://embeddable-sandbox.cdn.apollographql.com/${encodeURIComponent(
@@ -178,0 +194,0 @@ sandboxCdnVersion,

src/plugin/landingPage/default/index.ts

@@ -92,12 +92,40 @@ import type {
 
-  const nonce =
-    config.precomputedNonce ??
-    createHash('sha256').update(uuidv4()).digest('hex');
+  const scriptSafeList = [
+    'https://apollo-server-landing-page.cdn.apollographql.com',
+    'https://embeddable-sandbox.cdn.apollographql.com',
+    'https://embeddable-explorer.cdn.apollographql.com',
+  ].join(' ');
+  const styleSafeList = [
+    'https://apollo-server-landing-page.cdn.apollographql.com',
+    'https://embeddable-sandbox.cdn.apollographql.com',
+    'https://embeddable-explorer.cdn.apollographql.com',
+    'https://fonts.googleapis.com',
+  ].join(' ');
+  const iframeSafeList = [
+    'https://explorer.embed.apollographql.com',
+    'https://sandbox.embed.apollographql.com',
+    'https://embed.apollo.local:3000',
+  ].join(' ');
 
   return {
     __internal_installed_implicitly__: false,
-    async serverWillStart() {
+    async serverWillStart(server) {
+      if (config.precomputedNonce) {
+        server.logger.warn(
+          "The `precomputedNonce` landing page configuration option is deprecated. Removing this option is strictly an improvement to Apollo Server's landing page Content Security Policy (CSP) implementation for preventing XSS attacks.",
+        );
+      }
       return {
         async renderLandingPage() {
-          const html = `
+          const encodedVersion = encodeURIComponent(version);
+          async function html() {
+            const nonce =
+              config.precomputedNonce ??
+              createHash('sha256').update(uuidv4()).digest('hex');
+            const scriptCsp = `script-src 'self' 'nonce-${nonce}' ${scriptSafeList}`;
+            const styleCsp = `style-src 'nonce-${nonce}' ${styleSafeList}`;
+            const imageCsp = `img-src https://apollo-server-landing-page.cdn.apollographql.com`;
+            const manifestCsp = `manifest-src https://apollo-server-landing-page.cdn.apollographql.com`;
+            const frameCsp = `frame-src ${iframeSafeList}`;
+            return `
 <!DOCTYPE html>
@@ -107,14 +135,6 @@ <html lang="en">
     <meta charset="utf-8" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-${nonce}' https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(
-            version,
-          )}/static/js/main.js https://embeddable-sandbox.cdn.apollographql.com/${encodeURIComponent(
-            version,
-          )}/embeddable-sandbox.umd.production.min.js https://embeddable-explorer.cdn.apollographql.com/${encodeURIComponent(
-            version,
-          )}/embeddable-explorer.umd.production.min.js" />
+    <meta http-equiv="Content-Security-Policy" content="${scriptCsp}; ${styleCsp}; ${imageCsp}; ${manifestCsp}; ${frameCsp}" />
     <link
       rel="icon"
-      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(
-        version,
-      )}/assets/favicon.png"
+      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodedVersion}/assets/favicon.png"
     />
@@ -131,18 +151,19 @@ <meta name="viewport" content="width=device-width,initial-scale=1" />
       rel="apple-touch-icon"
-      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(
-        version,
-      )}/assets/favicon.png"
+      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodedVersion}/assets/favicon.png"
     />
     <link
       rel="manifest"
-      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodeURIComponent(
-        version,
-      )}/manifest.json"
+      href="https://apollo-server-landing-page.cdn.apollographql.com/${encodedVersion}/manifest.json"
     />
     <title>Apollo Server</title>
   </head>
-  <body style="margin: 0; overflow-x: hidden; overflow-y: hidden">
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="react-root">
-      <style>
+      <style nonce=${nonce}>
+        body {
+          margin: 0;
+          overflow-x: hidden;
+          overflow-y: hidden;
+        }
         .fallback {
@@ -183,2 +204,3 @@ opacity: 0;
           `;
+          }
           return { html };
@@ -185,0 +207,0 @@ },

src/plugin/landingPage/default/types.ts

@@ -57,5 +57,9 @@ type InitialDocumentVariablesHeaders = {
   /**
-   * If specified, the landing page will use the provided nonce rather than
-   * compute its own. This is useful for Cloudflare Workers, which do not allow
-   * number generation on startup.
+   * @deprecated This was originally introduced to support Cloudflare Workers
+   * based on a misunderstanding of CSP nonces. A different, more complete
+   * solution has since been implemented which removes the need for this option
+   * altogether. Specifying this option degrades the security of your
+   * application since it reuses the same nonce for every request, whereas
+   * Apollo Server generates a new one for every request by default.
+   * TODO(AS5): Remove this option.
    */
@@ -62,0 +66,0 @@ precomputedNonce?: string;

No alert changes

Improved metrics

Total package byte prevSize

1618076

0.58%

Lines of code

29211

0.59%

No dependency changes