From 1f8acd7b6ab0aa78e2a882e59cf69887109504be Mon Sep 17 00:00:00 2001
From: Bret Little <bret.little@shopify.com>
Date: Wed, 30 Aug 2023 14:32:41 -0400
Subject: [PATCH] Add a content security policy implementation and update
 templates (#1235)

---
 .changeset/two-carrots-relax.md               |   7 +
 examples/customer-api/app/entry.server.tsx    |   9 +-
 examples/customer-api/app/root.tsx            |   8 +-
 examples/express/app/entry.server.tsx         |  33 ++-
 examples/express/app/root.tsx                 |   8 +-
 package-lock.json                             |  15 ++
 .../docs/generated/generated_docs_data.json   | 210 ++++++++++++++++++
 packages/hydrogen/package.json                |   3 +-
 packages/hydrogen/src/csp/Script.doc.ts       |  48 ++++
 packages/hydrogen/src/csp/Script.example.jsx  |  32 +++
 packages/hydrogen/src/csp/Script.example.tsx  |  32 +++
 packages/hydrogen/src/csp/Script.test.ts      |  29 +++
 packages/hydrogen/src/csp/Script.tsx          |  11 +
 .../csp/createContentSecurityPolicy.doc.ts    |  48 ++++
 .../createContentSecurityPolicy.example.jsx   |  46 ++++
 .../createContentSecurityPolicy.example.tsx   |  47 ++++
 packages/hydrogen/src/csp/csp.test.ts         |  80 +++++++
 packages/hydrogen/src/csp/csp.ts              |  88 ++++++++
 packages/hydrogen/src/csp/nonce.ts            |  17 ++
 packages/hydrogen/src/csp/useNonce.doc.ts     |  48 ++++
 .../hydrogen/src/csp/useNonce.example.jsx     |  30 +++
 .../hydrogen/src/csp/useNonce.example.tsx     |  30 +++
 packages/hydrogen/src/index.ts                |   3 +
 templates/demo-store/app/entry.server.tsx     |   8 +-
 templates/demo-store/app/root.tsx             |  15 +-
 templates/hello-world/app/entry.server.tsx    |   9 +-
 templates/hello-world/app/root.tsx            |   8 +-
 templates/skeleton/app/entry.server.tsx       |  10 +-
 templates/skeleton/app/root.tsx               |  15 +-
 29 files changed, 911 insertions(+), 36 deletions(-)
 create mode 100644 .changeset/two-carrots-relax.md
 create mode 100644 packages/hydrogen/src/csp/Script.doc.ts
 create mode 100644 packages/hydrogen/src/csp/Script.example.jsx
 create mode 100644 packages/hydrogen/src/csp/Script.example.tsx
 create mode 100644 packages/hydrogen/src/csp/Script.test.ts
 create mode 100644 packages/hydrogen/src/csp/Script.tsx
 create mode 100644 packages/hydrogen/src/csp/createContentSecurityPolicy.doc.ts
 create mode 100644 packages/hydrogen/src/csp/createContentSecurityPolicy.example.jsx
 create mode 100644 packages/hydrogen/src/csp/createContentSecurityPolicy.example.tsx
 create mode 100644 packages/hydrogen/src/csp/csp.test.ts
 create mode 100644 packages/hydrogen/src/csp/csp.ts
 create mode 100644 packages/hydrogen/src/csp/nonce.ts
 create mode 100644 packages/hydrogen/src/csp/useNonce.doc.ts
 create mode 100644 packages/hydrogen/src/csp/useNonce.example.jsx
 create mode 100644 packages/hydrogen/src/csp/useNonce.example.tsx

diff --git a/.changeset/two-carrots-relax.md b/.changeset/two-carrots-relax.md
new file mode 100644
index 0000000000..baa8149769
--- /dev/null
+++ b/.changeset/two-carrots-relax.md
@@ -0,0 +1,7 @@
+---
+'@shopify/cli-hydrogen': patch
+'@shopify/create-hydrogen': patch
+'@shopify/hydrogen': patch
+---
+
+Add functionality for creating a Content Security Policy. See the [guide on Content Security Policies](https://shopify.dev/docs/custom-storefronts/hydrogen/content-security-policy) for more details.
diff --git a/examples/customer-api/app/entry.server.tsx b/examples/customer-api/app/entry.server.tsx
index 05b0c9a587..61db2b9507 100644
--- a/examples/customer-api/app/entry.server.tsx
+++ b/examples/customer-api/app/entry.server.tsx
@@ -2,6 +2,7 @@ import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
 
 export default async function handleRequest(
   request: Request,
@@ -9,9 +10,14 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
+
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
     {
+      nonce,
       signal: request.signal,
       onError(error) {
         // eslint-disable-next-line no-console
@@ -26,6 +32,7 @@ export default async function handleRequest(
   }
 
   responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
   return new Response(body, {
     headers: responseHeaders,
     status: responseStatusCode,
diff --git a/examples/customer-api/app/root.tsx b/examples/customer-api/app/root.tsx
index 5c29ed1b97..d1a90880ec 100644
--- a/examples/customer-api/app/root.tsx
+++ b/examples/customer-api/app/root.tsx
@@ -11,6 +11,7 @@ import {
 import type {Shop} from '@shopify/hydrogen/storefront-api-types';
 import styles from './styles/app.css';
 import favicon from '../public/favicon.svg';
+import {useNonce} from '@shopify/hydrogen';
 
 export const links: LinksFunction = () => {
   return [
@@ -34,6 +35,7 @@ export async function loader({context}: LoaderArgs) {
 
 export default function App() {
   const data = useLoaderData<typeof loader>();
+  const nonce = useNonce();
 
   const {name} = data.layout.shop;
 
@@ -51,9 +53,9 @@ export default function App() {
           This is an example of Hydrogen using the Customer API
         </p>
         <Outlet />
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
diff --git a/examples/express/app/entry.server.tsx b/examples/express/app/entry.server.tsx
index a0b5629d53..b71bf93c44 100644
--- a/examples/express/app/entry.server.tsx
+++ b/examples/express/app/entry.server.tsx
@@ -11,6 +11,7 @@ import {Response} from '@remix-run/node';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToPipeableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
 
 const ABORT_DELAY = 5_000;
 
@@ -43,17 +44,23 @@ function handleBotRequest(
   remixContext: EntryContext,
 ) {
   return new Promise((resolve, reject) => {
+    const {nonce, header, NonceProvider} = createContentSecurityPolicy();
+
     const {pipe, abort} = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <NonceProvider>
+        <RemixServer
+          context={remixContext}
+          url={request.url}
+          abortDelay={ABORT_DELAY}
+        />
+      </NonceProvider>,
       {
+        nonce,
         onAllReady() {
           const body = new PassThrough();
 
           responseHeaders.set('Content-Type', 'text/html');
+          responseHeaders.set('Content-Security-Policy', header);
 
           resolve(
             new Response(body, {
@@ -84,18 +91,24 @@ function handleBrowserRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
+
   return new Promise((resolve, reject) => {
     const {pipe, abort} = renderToPipeableStream(
-      <RemixServer
-        context={remixContext}
-        url={request.url}
-        abortDelay={ABORT_DELAY}
-      />,
+      <NonceProvider>
+        <RemixServer
+          context={remixContext}
+          url={request.url}
+          abortDelay={ABORT_DELAY}
+        />
+      </NonceProvider>,
       {
+        nonce,
         onShellReady() {
           const body = new PassThrough();
 
           responseHeaders.set('Content-Type', 'text/html');
+          responseHeaders.set('Content-Security-Policy', header);
 
           resolve(
             new Response(body, {
diff --git a/examples/express/app/root.tsx b/examples/express/app/root.tsx
index 0609dfae1b..0ecbc22946 100644
--- a/examples/express/app/root.tsx
+++ b/examples/express/app/root.tsx
@@ -12,6 +12,7 @@ import type {Cart, Shop} from '@shopify/hydrogen/storefront-api-types';
 import {Layout} from '~/components/Layout';
 import styles from './styles/app.css';
 import favicon from '../public/favicon.svg';
+import {useNonce} from '@shopify/hydrogen';
 
 export const links: LinksFunction = () => {
   return [
@@ -64,6 +65,7 @@ export async function loader({context}: LoaderArgs) {
 
 export default function App() {
   const data = useLoaderData<typeof loader>();
+  const nonce = useNonce();
 
   const {name, description} = data.layout.shop;
 
@@ -79,9 +81,9 @@ export default function App() {
         <Layout description={description} title={name}>
           <Outlet />
         </Layout>
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
diff --git a/package-lock.json b/package-lock.json
index 3a26e523d0..48811503c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10767,6 +10767,14 @@
       ],
       "license": "MIT"
     },
+    "node_modules/content-security-policy-builder": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/content-security-policy-builder/-/content-security-policy-builder-2.1.1.tgz",
+      "integrity": "sha512-Bga6d4W37VMAeu3QQOorIbfEr16CIUuC8ZzKz+GecFfnBUWoU2RUdk8DTeb+ihe2BeDCs6T4PRAxFKU7lLh0mA==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/content-type": {
       "version": "1.0.5",
       "license": "MIT",
@@ -25983,6 +25991,7 @@
       "license": "MIT",
       "dependencies": {
         "@shopify/hydrogen-react": "2023.7.2",
+        "content-security-policy-builder": "^2.1.1",
         "react": "^18.2.0"
       },
       "devDependencies": {
@@ -31018,6 +31027,7 @@
         "@shopify/generate-docs": "0.10.7",
         "@shopify/hydrogen-react": "2023.7.2",
         "@testing-library/react": "^14.0.0",
+        "content-security-policy-builder": "^2.1.1",
         "happy-dom": "^8.9.0",
         "react": "^18.2.0",
         "schema-dts": "^1.1.0",
@@ -33600,6 +33610,11 @@
         }
       }
     },
+    "content-security-policy-builder": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/content-security-policy-builder/-/content-security-policy-builder-2.1.1.tgz",
+      "integrity": "sha512-Bga6d4W37VMAeu3QQOorIbfEr16CIUuC8ZzKz+GecFfnBUWoU2RUdk8DTeb+ihe2BeDCs6T4PRAxFKU7lLh0mA=="
+    },
     "content-type": {
       "version": "1.0.5"
     },
diff --git a/packages/hydrogen/docs/generated/generated_docs_data.json b/packages/hydrogen/docs/generated/generated_docs_data.json
index 85e90e20e1..a55896e3e8 100644
--- a/packages/hydrogen/docs/generated/generated_docs_data.json
+++ b/packages/hydrogen/docs/generated/generated_docs_data.json
@@ -8317,6 +8317,216 @@
       }
     ]
   },
+  {
+    "name": "Script",
+    "category": "components",
+    "isVisualComponent": false,
+    "related": [
+      {
+        "name": "createContentSecurityPolicy",
+        "type": "utilities",
+        "url": "/docs/api/hydrogen/2023-07/utilities/createcontentsecuritypolicy"
+      },
+      {
+        "name": "useNonce",
+        "type": "hooks",
+        "url": "/docs/api/hydrogen/2023-07/hooks/usenonce"
+      }
+    ],
+    "description": "Use the `Script` component to add third-party scripts to your app. It automatically adds a nonce attribute from your [content security policy](/docs/custom-storefronts/hydrogen/content-security-policy).",
+    "type": "component",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import {\n  Links,\n  LiveReload,\n  Meta,\n  Outlet,\n  Scripts,\n  ScrollRestoration,\n} from '@remix-run/react';\nimport {useNonce, Script} from '@shopify/hydrogen';\nexport default function App() {\n  const nonce = useNonce();\n\n  return (\n    <html lang=\"en\">\n      <head>\n        <meta charSet=\"utf-8\" />\n        <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n        <Meta />\n        <Links />\n      </head>\n      <body>\n        <Outlet />\n        {/* Note you don't need to pass a nonce to the script component \n        because it's automatically added */}\n        <Script src=\"https://some-custom-script.js\" />\n        <ScrollRestoration nonce={nonce} />\n        <Scripts nonce={nonce} />\n        <LiveReload nonce={nonce} />\n      </body>\n    </html>\n  );\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import {\n  Links,\n  LiveReload,\n  Meta,\n  Outlet,\n  Scripts,\n  ScrollRestoration,\n} from '@remix-run/react';\nimport {useNonce, Script} from '@shopify/hydrogen';\nexport default function App() {\n  const nonce = useNonce();\n\n  return (\n    <html lang=\"en\">\n      <head>\n        <meta charSet=\"utf-8\" />\n        <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n        <Meta />\n        <Links />\n      </head>\n      <body>\n        <Outlet />\n        {/* Note you don't need to pass a nonce to the script component \n        because it's automatically added */}\n        <Script src=\"https://some-custom-script.js\" />\n        <ScrollRestoration nonce={nonce} />\n        <Scripts nonce={nonce} />\n        <LiveReload nonce={nonce} />\n      </body>\n    </html>\n  );\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "ScriptProps",
+        "typeDefinitions": {
+          "ScriptProps": {
+            "filePath": "/csp/Script.tsx",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "ScriptProps",
+            "value": "JSX.IntrinsicElements['script']",
+            "description": ""
+          }
+        }
+      }
+    ]
+  },
+  {
+    "name": "createContentSecurityPolicy",
+    "category": "utilities",
+    "isVisualComponent": false,
+    "related": [
+      {
+        "name": "useNonce",
+        "type": "hooks",
+        "url": "/docs/api/hydrogen/2023-07/hooks/usenonce"
+      },
+      {
+        "name": "Script",
+        "type": "components",
+        "url": "/docs/api/hydrogen/2023-07/components/script"
+      }
+    ],
+    "description": "Create a [content security policy](/docs/custom-storefronts/hydrogen/content-security-policy) to secure your application. The default content security policy includes exclusions for cdn.shopify.com and a script nonce.",
+    "type": "utility",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import {RemixServer} from '@remix-run/react';\nimport isbot from 'isbot';\nimport {renderToReadableStream} from 'react-dom/server';\nimport {createContentSecurityPolicy} from '@shopify/hydrogen';\n\nexport default async function handleRequest(\n  request,\n  responseStatusCode,\n  responseHeaders,\n  remixContext,\n) {\n  const {nonce, header, NonceProvider} = createContentSecurityPolicy({\n    // pass a custom directive to load content from a third party domain\n    styleSrc: [\n      \"'self'\",\n      'https://cdn.shopify.com',\n      'https://some-custom-css.cdn',\n    ],\n  });\n  const body = await renderToReadableStream(\n    <NonceProvider>\n      <RemixServer context={remixContext} url={request.url} />\n    </NonceProvider>,\n    {\n      nonce,\n      signal: request.signal,\n      onError(error) {\n        // eslint-disable-next-line no-console\n        console.error(error);\n        responseStatusCode = 500;\n      },\n    },\n  );\n\n  if (isbot(request.headers.get('user-agent'))) {\n    await body.allReady;\n  }\n\n  responseHeaders.set('Content-Type', 'text/html');\n  responseHeaders.set('Content-Security-Policy', header);\n\n  return new Response(body, {\n    headers: responseHeaders,\n    status: responseStatusCode,\n  });\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import type {EntryContext} from '@shopify/remix-oxygen';\nimport {RemixServer} from '@remix-run/react';\nimport isbot from 'isbot';\nimport {renderToReadableStream} from 'react-dom/server';\nimport {createContentSecurityPolicy} from '@shopify/hydrogen';\n\nexport default async function handleRequest(\n  request: Request,\n  responseStatusCode: number,\n  responseHeaders: Headers,\n  remixContext: EntryContext,\n) {\n  const {nonce, header, NonceProvider} = createContentSecurityPolicy({\n    // pass a custom directive to load content from a third party domain\n    styleSrc: [\n      \"'self'\",\n      'https://cdn.shopify.com',\n      'https://some-custom-css.cdn',\n    ],\n  });\n  const body = await renderToReadableStream(\n    <NonceProvider>\n      <RemixServer context={remixContext} url={request.url} />\n    </NonceProvider>,\n    {\n      nonce,\n      signal: request.signal,\n      onError(error) {\n        // eslint-disable-next-line no-console\n        console.error(error);\n        responseStatusCode = 500;\n      },\n    },\n  );\n\n  if (isbot(request.headers.get('user-agent'))) {\n    await body.allReady;\n  }\n\n  responseHeaders.set('Content-Type', 'text/html');\n  responseHeaders.set('Content-Security-Policy', header);\n\n  return new Response(body, {\n    headers: responseHeaders,\n    status: responseStatusCode,\n  });\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "CreateContentSecurityPolicyGeneratedType",
+        "typeDefinitions": {
+          "CreateContentSecurityPolicyGeneratedType": {
+            "filePath": "/csp/csp.ts",
+            "name": "CreateContentSecurityPolicyGeneratedType",
+            "description": "",
+            "params": [
+              {
+                "name": "directives",
+                "description": "Pass custom [content security policy directives](https://content-security-policy.com/). This is important if you load content in your app from third-party domains.",
+                "value": "Record<string, string | boolean | string[]>",
+                "isOptional": true,
+                "defaultValue": "{}",
+                "filePath": "/csp/csp.ts"
+              }
+            ],
+            "returns": {
+              "filePath": "/csp/csp.ts",
+              "description": "",
+              "name": "ContentSecurityPolicy",
+              "value": "ContentSecurityPolicy"
+            },
+            "value": "export function createContentSecurityPolicy(\n  directives: Record<string, string[] | string | boolean> = {},\n): ContentSecurityPolicy {\n  const nonce = generateNonce();\n  const header = createCSPHeader(nonce, directives);\n\n  const Provider = ({children}: {children: ReactNode}) => {\n    return createElement(NonceProvider, {value: nonce}, children);\n  };\n\n  return {\n    nonce,\n    header,\n    NonceProvider: Provider,\n  };\n}"
+          },
+          "ContentSecurityPolicy": {
+            "filePath": "/csp/csp.ts",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "ContentSecurityPolicy",
+            "value": "{\n  /** A randomly generated nonce string that should be passed to any custom `script` element */\n  nonce: string;\n  /** The content security policy header */\n  header: string;\n  NonceProvider: ComponentType<{children: ReactNode}>;\n}",
+            "description": "",
+            "members": [
+              {
+                "filePath": "/csp/csp.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "nonce",
+                "value": "string",
+                "description": "A randomly generated nonce string that should be passed to any custom `script` element"
+              },
+              {
+                "filePath": "/csp/csp.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "header",
+                "value": "string",
+                "description": "The content security policy header"
+              },
+              {
+                "filePath": "/csp/csp.ts",
+                "syntaxKind": "PropertySignature",
+                "name": "NonceProvider",
+                "value": "ComponentType<{children: ReactNode}>",
+                "description": ""
+              }
+            ]
+          }
+        }
+      }
+    ]
+  },
+  {
+    "name": "useNonce",
+    "category": "hooks",
+    "isVisualComponent": false,
+    "related": [
+      {
+        "name": "createContentSecurityPolicy",
+        "type": "utilities",
+        "url": "/docs/api/hydrogen/2023-07/utilities/createcontentsecuritypolicy"
+      },
+      {
+        "name": "Script",
+        "type": "components",
+        "url": "/docs/api/hydrogen/2023-07/components/script"
+      }
+    ],
+    "description": "The `useNonce` hook returns the [content security policy](/docs/custom-storefronts/hydrogen/content-security-policy) nonce. Use the hook to manually add a nonce to third party scripts. The `Script` component automatically does this for you. Note, the nonce should never be available in the client, and should always return undefined in the browser.",
+    "type": "hook",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import {\n  Links,\n  LiveReload,\n  Meta,\n  Outlet,\n  Scripts,\n  ScrollRestoration,\n} from '@remix-run/react';\nimport {useNonce} from '@shopify/hydrogen';\n\nexport default function App() {\n  const nonce = useNonce();\n\n  return (\n    <html lang=\"en\">\n      <head>\n        <meta charSet=\"utf-8\" />\n        <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n        <Meta />\n        <Links />\n      </head>\n      <body>\n        <Outlet />\n        <ScrollRestoration nonce={nonce} />\n        <Scripts nonce={nonce} />\n        <LiveReload nonce={nonce} />\n      </body>\n    </html>\n  );\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import {\n  Links,\n  LiveReload,\n  Meta,\n  Outlet,\n  Scripts,\n  ScrollRestoration,\n} from '@remix-run/react';\nimport {useNonce} from '@shopify/hydrogen';\n\nexport default function App() {\n  const nonce = useNonce();\n\n  return (\n    <html lang=\"en\">\n      <head>\n        <meta charSet=\"utf-8\" />\n        <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n        <Meta />\n        <Links />\n      </head>\n      <body>\n        <Outlet />\n        <ScrollRestoration nonce={nonce} />\n        <Scripts nonce={nonce} />\n        <LiveReload nonce={nonce} />\n      </body>\n    </html>\n  );\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "UseNonceGeneratedType",
+        "typeDefinitions": {
+          "UseNonceGeneratedType": {
+            "filePath": "/csp/csp.ts",
+            "name": "UseNonceGeneratedType",
+            "description": "",
+            "params": [],
+            "returns": {
+              "filePath": "/csp/csp.ts",
+              "description": "",
+              "name": "",
+              "value": ""
+            },
+            "value": "useNonce = () => useContext(NonceContext)"
+          }
+        }
+      }
+    ]
+  },
   {
     "name": "Pagination",
     "category": "components",
diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json
index 6c9c0b32df..f76baa9082 100644
--- a/packages/hydrogen/package.json
+++ b/packages/hydrogen/package.json
@@ -54,7 +54,8 @@
   ],
   "dependencies": {
     "@shopify/hydrogen-react": "2023.7.2",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "content-security-policy-builder": "^2.1.1"
   },
   "peerDependencies": {
     "@remix-run/react": "1.19.1",
diff --git a/packages/hydrogen/src/csp/Script.doc.ts b/packages/hydrogen/src/csp/Script.doc.ts
new file mode 100644
index 0000000000..d7cbb1bda1
--- /dev/null
+++ b/packages/hydrogen/src/csp/Script.doc.ts
@@ -0,0 +1,48 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'Script',
+  category: 'components',
+  isVisualComponent: false,
+  related: [
+    {
+      name: 'createContentSecurityPolicy',
+      type: 'utilities',
+      url: '/docs/api/hydrogen/2023-07/utilities/createcontentsecuritypolicy',
+    },
+    {
+      name: 'useNonce',
+      type: 'hooks',
+      url: '/docs/api/hydrogen/2023-07/hooks/usenonce',
+    },
+  ],
+  description: `Use the \`Script\` component to add third-party scripts to your app. It automatically adds a nonce attribute from your [content security policy](/docs/custom-storefronts/hydrogen/content-security-policy).`,
+  type: 'component',
+  defaultExample: {
+    description: 'I am the default example',
+    codeblock: {
+      tabs: [
+        {
+          title: 'JavaScript',
+          code: './Script.example.jsx',
+          language: 'jsx',
+        },
+        {
+          title: 'TypeScript',
+          code: './Script.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: 'Props',
+      type: 'ScriptProps',
+      description: '',
+    },
+  ],
+};
+
+export default data;
diff --git a/packages/hydrogen/src/csp/Script.example.jsx b/packages/hydrogen/src/csp/Script.example.jsx
new file mode 100644
index 0000000000..4e7257fba5
--- /dev/null
+++ b/packages/hydrogen/src/csp/Script.example.jsx
@@ -0,0 +1,32 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react';
+import {useNonce, Script} from '@shopify/hydrogen';
+export default function App() {
+  const nonce = useNonce();
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        {/* Note you don't need to pass a nonce to the script component 
+        because it's automatically added */}
+        <Script src="https://some-custom-script.js" />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
+      </body>
+    </html>
+  );
+}
diff --git a/packages/hydrogen/src/csp/Script.example.tsx b/packages/hydrogen/src/csp/Script.example.tsx
new file mode 100644
index 0000000000..4e7257fba5
--- /dev/null
+++ b/packages/hydrogen/src/csp/Script.example.tsx
@@ -0,0 +1,32 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react';
+import {useNonce, Script} from '@shopify/hydrogen';
+export default function App() {
+  const nonce = useNonce();
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        {/* Note you don't need to pass a nonce to the script component 
+        because it's automatically added */}
+        <Script src="https://some-custom-script.js" />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
+      </body>
+    </html>
+  );
+}
diff --git a/packages/hydrogen/src/csp/Script.test.ts b/packages/hydrogen/src/csp/Script.test.ts
new file mode 100644
index 0000000000..ddd3331e0d
--- /dev/null
+++ b/packages/hydrogen/src/csp/Script.test.ts
@@ -0,0 +1,29 @@
+import {createElement} from 'react';
+import {Script} from './Script';
+import {describe, it, expect, afterEach} from 'vitest';
+import {cleanup, render} from '@testing-library/react';
+import {NonceProvider} from './csp';
+
+describe('<Script />', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should add a nonce to the script', () => {
+    const {asFragment} = render(
+      createElement(NonceProvider, {
+        value: 'somenonce',
+        children: createElement(Script, {src: 'https://some-src.js'}),
+      }),
+    );
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <script
+          nonce="somenonce"
+          src="https://some-src.js"
+        />
+      </DocumentFragment>
+    `);
+  });
+});
diff --git a/packages/hydrogen/src/csp/Script.tsx b/packages/hydrogen/src/csp/Script.tsx
new file mode 100644
index 0000000000..eb7b648dbd
--- /dev/null
+++ b/packages/hydrogen/src/csp/Script.tsx
@@ -0,0 +1,11 @@
+import {forwardRef} from 'react';
+import {useNonce} from './csp';
+
+type ScriptProps = JSX.IntrinsicElements['script'];
+
+export const Script = forwardRef<HTMLScriptElement, ScriptProps>(
+  (props, ref) => {
+    const nonce = useNonce();
+    return <script {...props} nonce={nonce} ref={ref} />;
+  },
+);
diff --git a/packages/hydrogen/src/csp/createContentSecurityPolicy.doc.ts b/packages/hydrogen/src/csp/createContentSecurityPolicy.doc.ts
new file mode 100644
index 0000000000..027341c37a
--- /dev/null
+++ b/packages/hydrogen/src/csp/createContentSecurityPolicy.doc.ts
@@ -0,0 +1,48 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'createContentSecurityPolicy',
+  category: 'utilities',
+  isVisualComponent: false,
+  related: [
+    {
+      name: 'useNonce',
+      type: 'hooks',
+      url: '/docs/api/hydrogen/2023-07/hooks/usenonce',
+    },
+    {
+      name: 'Script',
+      type: 'components',
+      url: '/docs/api/hydrogen/2023-07/components/script',
+    },
+  ],
+  description: `Create a [content security policy](/docs/custom-storefronts/hydrogen/content-security-policy) to secure your application. The default content security policy includes exclusions for cdn.shopify.com and a script nonce.`,
+  type: 'utility',
+  defaultExample: {
+    description: 'I am the default example',
+    codeblock: {
+      tabs: [
+        {
+          title: 'JavaScript',
+          code: './createContentSecurityPolicy.example.jsx',
+          language: 'jsx',
+        },
+        {
+          title: 'TypeScript',
+          code: './createContentSecurityPolicy.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: 'Props',
+      type: 'CreateContentSecurityPolicyGeneratedType',
+      description: '',
+    },
+  ],
+};
+
+export default data;
diff --git a/packages/hydrogen/src/csp/createContentSecurityPolicy.example.jsx b/packages/hydrogen/src/csp/createContentSecurityPolicy.example.jsx
new file mode 100644
index 0000000000..e795a812b8
--- /dev/null
+++ b/packages/hydrogen/src/csp/createContentSecurityPolicy.example.jsx
@@ -0,0 +1,46 @@
+import {RemixServer} from '@remix-run/react';
+import isbot from 'isbot';
+import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
+
+export default async function handleRequest(
+  request,
+  responseStatusCode,
+  responseHeaders,
+  remixContext,
+) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
+    // pass a custom directive to load content from a third party domain
+    styleSrc: [
+      "'self'",
+      'https://cdn.shopify.com',
+      'https://some-custom-css.cdn',
+    ],
+  });
+  const body = await renderToReadableStream(
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
+    {
+      nonce,
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
+  );
+
+  if (isbot(request.headers.get('user-agent'))) {
+    await body.allReady;
+  }
+
+  responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
+
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}
diff --git a/packages/hydrogen/src/csp/createContentSecurityPolicy.example.tsx b/packages/hydrogen/src/csp/createContentSecurityPolicy.example.tsx
new file mode 100644
index 0000000000..127321376d
--- /dev/null
+++ b/packages/hydrogen/src/csp/createContentSecurityPolicy.example.tsx
@@ -0,0 +1,47 @@
+import type {EntryContext} from '@shopify/remix-oxygen';
+import {RemixServer} from '@remix-run/react';
+import isbot from 'isbot';
+import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
+    // pass a custom directive to load content from a third party domain
+    styleSrc: [
+      "'self'",
+      'https://cdn.shopify.com',
+      'https://some-custom-css.cdn',
+    ],
+  });
+  const body = await renderToReadableStream(
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
+    {
+      nonce,
+      signal: request.signal,
+      onError(error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        responseStatusCode = 500;
+      },
+    },
+  );
+
+  if (isbot(request.headers.get('user-agent'))) {
+    await body.allReady;
+  }
+
+  responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
+
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}
diff --git a/packages/hydrogen/src/csp/csp.test.ts b/packages/hydrogen/src/csp/csp.test.ts
new file mode 100644
index 0000000000..96abbe8ae7
--- /dev/null
+++ b/packages/hydrogen/src/csp/csp.test.ts
@@ -0,0 +1,80 @@
+import {createContentSecurityPolicy, useNonce} from './csp';
+import {createElement} from 'react';
+import {describe, it, expect, afterEach, vi} from 'vitest';
+import {cleanup, render} from '@testing-library/react';
+
+vi.mock('./nonce.js', () => {
+  return {
+    generateNonce() {
+      return 'somenonce';
+    },
+  };
+});
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+describe('createContentSecurityPolicy', () => {
+  it('creates default policy', () => {
+    expect(createContentSecurityPolicy().header).toBe(
+      `base-uri 'self'; default-src 'self' 'nonce-somenonce' https://cdn.shopify.com https://shopify.com; frame-ancestors none; style-src 'self' 'unsafe-inline' https://cdn.shopify.com; connect-src self https://monorail-edge.shopifysvc.com`,
+    );
+  });
+
+  it('adds custom directives', () => {
+    expect(
+      createContentSecurityPolicy({
+        styleSrc: [
+          "'self'",
+          'https://cdn.shopify.com',
+          'https://some-custom-css.cdn',
+        ],
+      }).header,
+    ).toBe(
+      `base-uri 'self'; default-src 'self' 'nonce-somenonce' https://cdn.shopify.com https://shopify.com; frame-ancestors none; style-src 'self' https://cdn.shopify.com https://some-custom-css.cdn; connect-src self https://monorail-edge.shopifysvc.com`,
+    );
+  });
+
+  it('adds nonce to custom directives', () => {
+    expect(
+      createContentSecurityPolicy({
+        scriptSrc: [
+          "'self'",
+          'https://cdn.shopify.com',
+          'https://some-custom-css.cdn',
+        ],
+      }).header,
+    ).toBe(
+      `base-uri 'self'; default-src 'self' 'nonce-somenonce' https://cdn.shopify.com https://shopify.com; frame-ancestors none; style-src 'self' 'unsafe-inline' https://cdn.shopify.com; connect-src self https://monorail-edge.shopifysvc.com; script-src 'self' https://cdn.shopify.com https://some-custom-css.cdn 'nonce-somenonce'`,
+    );
+  });
+});
+
+describe('useNonce', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("get's the nonce", () => {
+    const {NonceProvider} = createContentSecurityPolicy();
+    const {asFragment} = render(
+      createElement(NonceProvider, {
+        children: createElement(SomeComponent),
+      }),
+    );
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <div>
+          somenonce
+        </div>
+      </DocumentFragment>
+    `);
+  });
+});
+
+function SomeComponent() {
+  const nonce = useNonce();
+  return createElement('div', null, nonce);
+}
diff --git a/packages/hydrogen/src/csp/csp.ts b/packages/hydrogen/src/csp/csp.ts
new file mode 100644
index 0000000000..81ab47ffef
--- /dev/null
+++ b/packages/hydrogen/src/csp/csp.ts
@@ -0,0 +1,88 @@
+import {
+  type ComponentType,
+  createContext,
+  createElement,
+  type ReactNode,
+  useContext,
+} from 'react';
+import cspBuilder from 'content-security-policy-builder';
+import {generateNonce} from './nonce';
+
+export const NonceContext = createContext<string | undefined>(undefined);
+export const NonceProvider = NonceContext.Provider;
+
+export const useNonce = () => useContext(NonceContext);
+
+type ContentSecurityPolicy = {
+  /** A randomly generated nonce string that should be passed to any custom `script` element */
+  nonce: string;
+  /** The content security policy header */
+  header: string;
+  NonceProvider: ComponentType<{children: ReactNode}>;
+};
+
+/**
+ * @param directives - Pass custom [content security policy directives](https://content-security-policy.com/). This is important if you load content in your app from third-party domains.
+ */
+export function createContentSecurityPolicy(
+  directives: Record<string, string[] | string | boolean> = {},
+): ContentSecurityPolicy {
+  const nonce = generateNonce();
+  const header = createCSPHeader(nonce, directives);
+
+  const Provider = ({children}: {children: ReactNode}) => {
+    return createElement(NonceProvider, {value: nonce}, children);
+  };
+
+  return {
+    nonce,
+    header,
+    NonceProvider: Provider,
+  };
+}
+
+function createCSPHeader(
+  nonce: string,
+  directives: Record<string, string[] | string | boolean> = {},
+): string {
+  const nonceString = `'nonce-${nonce}'`;
+  const defaultDirectives: Record<string, string[] | string | boolean> = {
+    baseUri: ["'self'"],
+    defaultSrc: [
+      "'self'",
+      nonceString,
+      'https://cdn.shopify.com',
+      // Used for the Customer Account API
+      'https://shopify.com',
+    ],
+    frameAncestors: ['none'],
+    styleSrc: ["'self'", "'unsafe-inline'", 'https://cdn.shopify.com'],
+    connectSrc: ['self', 'https://monorail-edge.shopifysvc.com'],
+  };
+
+  // Support HMR in local development
+  if (process.env.NODE_ENV === 'development') {
+    defaultDirectives.connectSrc = ['*'];
+  }
+
+  const combinedDirectives = Object.assign({}, defaultDirectives, directives);
+
+  // Make sure that at least script-src includes a nonce directive.
+  // If someone doesn't want a nonce in their CSP, they probably
+  // shouldn't use our utilities and just manually create their CSP.
+  if (
+    combinedDirectives.scriptSrc instanceof Array &&
+    !combinedDirectives.scriptSrc.includes(nonceString)
+  ) {
+    combinedDirectives.scriptSrc.push(nonceString);
+  } else if (
+    combinedDirectives.defaultSrc instanceof Array &&
+    !combinedDirectives.defaultSrc.includes(nonceString)
+  ) {
+    combinedDirectives.defaultSrc.push(nonceString);
+  }
+
+  return cspBuilder({
+    directives: combinedDirectives,
+  });
+}
diff --git a/packages/hydrogen/src/csp/nonce.ts b/packages/hydrogen/src/csp/nonce.ts
new file mode 100644
index 0000000000..126a90516f
--- /dev/null
+++ b/packages/hydrogen/src/csp/nonce.ts
@@ -0,0 +1,17 @@
+export function generateNonce(): string {
+  return toHexString(randomUint8Array());
+}
+
+function randomUint8Array() {
+  try {
+    return crypto.getRandomValues(new Uint8Array(16));
+  } catch (e) {
+    return new Uint8Array(16).map(() => (Math.random() * 255) | 0);
+  }
+}
+
+function toHexString(byteArray: Uint8Array) {
+  return Array.from(byteArray, function (byte) {
+    return ('0' + (byte & 0xff).toString(16)).slice(-2);
+  }).join('');
+}
diff --git a/packages/hydrogen/src/csp/useNonce.doc.ts b/packages/hydrogen/src/csp/useNonce.doc.ts
new file mode 100644
index 0000000000..85049558c2
--- /dev/null
+++ b/packages/hydrogen/src/csp/useNonce.doc.ts
@@ -0,0 +1,48 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useNonce',
+  category: 'hooks',
+  isVisualComponent: false,
+  related: [
+    {
+      name: 'createContentSecurityPolicy',
+      type: 'utilities',
+      url: '/docs/api/hydrogen/2023-07/utilities/createcontentsecuritypolicy',
+    },
+    {
+      name: 'Script',
+      type: 'components',
+      url: '/docs/api/hydrogen/2023-07/components/script',
+    },
+  ],
+  description: `The \`useNonce\` hook returns the [content security policy](/docs/custom-storefronts/hydrogen/content-security-policy) nonce. Use the hook to manually add a nonce to third party scripts. The \`Script\` component automatically does this for you. Note, the nonce should never be available in the client, and should always return undefined in the browser.`,
+  type: 'hook',
+  defaultExample: {
+    description: 'I am the default example',
+    codeblock: {
+      tabs: [
+        {
+          title: 'JavaScript',
+          code: './useNonce.example.jsx',
+          language: 'jsx',
+        },
+        {
+          title: 'TypeScript',
+          code: './useNonce.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: 'Props',
+      type: 'UseNonceGeneratedType',
+      description: '',
+    },
+  ],
+};
+
+export default data;
diff --git a/packages/hydrogen/src/csp/useNonce.example.jsx b/packages/hydrogen/src/csp/useNonce.example.jsx
new file mode 100644
index 0000000000..7a05489a96
--- /dev/null
+++ b/packages/hydrogen/src/csp/useNonce.example.jsx
@@ -0,0 +1,30 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react';
+import {useNonce} from '@shopify/hydrogen';
+
+export default function App() {
+  const nonce = useNonce();
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
+      </body>
+    </html>
+  );
+}
diff --git a/packages/hydrogen/src/csp/useNonce.example.tsx b/packages/hydrogen/src/csp/useNonce.example.tsx
new file mode 100644
index 0000000000..7a05489a96
--- /dev/null
+++ b/packages/hydrogen/src/csp/useNonce.example.tsx
@@ -0,0 +1,30 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from '@remix-run/react';
+import {useNonce} from '@shopify/hydrogen';
+
+export default function App() {
+  const nonce = useNonce();
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
+      </body>
+    </html>
+  );
+}
diff --git a/packages/hydrogen/src/index.ts b/packages/hydrogen/src/index.ts
index 4b0ec4b9d0..78cef5388d 100644
--- a/packages/hydrogen/src/index.ts
+++ b/packages/hydrogen/src/index.ts
@@ -53,6 +53,9 @@ export type {
   VariantOptionValue,
 } from './product/VariantSelector';
 
+export {createContentSecurityPolicy, useNonce} from './csp/csp';
+export {Script} from './csp/Script';
+
 export {
   AnalyticsEventName,
   AnalyticsPageType,
diff --git a/templates/demo-store/app/entry.server.tsx b/templates/demo-store/app/entry.server.tsx
index 05b0c9a587..040f18b91b 100644
--- a/templates/demo-store/app/entry.server.tsx
+++ b/templates/demo-store/app/entry.server.tsx
@@ -2,6 +2,7 @@ import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
 
 export default async function handleRequest(
   request: Request,
@@ -9,9 +10,13 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
     {
+      nonce,
       signal: request.signal,
       onError(error) {
         // eslint-disable-next-line no-console
@@ -26,6 +31,7 @@ export default async function handleRequest(
   }
 
   responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
   return new Response(body, {
     headers: responseHeaders,
     status: responseStatusCode,
diff --git a/templates/demo-store/app/root.tsx b/templates/demo-store/app/root.tsx
index ebaf8314b4..eb44c28481 100644
--- a/templates/demo-store/app/root.tsx
+++ b/templates/demo-store/app/root.tsx
@@ -17,7 +17,7 @@ import {
   useRouteError,
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
-import {ShopifySalesChannel, Seo} from '@shopify/hydrogen';
+import {ShopifySalesChannel, Seo, useNonce} from '@shopify/hydrogen';
 import invariant from 'tiny-invariant';
 
 import {Layout} from '~/components';
@@ -88,6 +88,7 @@ export async function loader({request, context}: LoaderArgs) {
 }
 
 export default function App() {
+  const nonce = useNonce();
   const data = useLoaderData<typeof loader>();
   const locale = data.selectedLocale ?? DEFAULT_LOCALE;
   const hasUserConsent = true;
@@ -110,15 +111,16 @@ export default function App() {
         >
           <Outlet />
         </Layout>
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
 }
 
 export function ErrorBoundary({error}: {error: Error}) {
+  const nonce = useNonce();
   const [root] = useMatches();
   const locale = root?.data?.selectedLocale ?? DEFAULT_LOCALE;
   const routeError = useRouteError();
@@ -160,8 +162,9 @@ export function ErrorBoundary({error}: {error: Error}) {
             <GenericError error={error instanceof Error ? error : undefined} />
           )}
         </Layout>
-        <Scripts />
-        <LiveReload />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
diff --git a/templates/hello-world/app/entry.server.tsx b/templates/hello-world/app/entry.server.tsx
index 05b0c9a587..61db2b9507 100644
--- a/templates/hello-world/app/entry.server.tsx
+++ b/templates/hello-world/app/entry.server.tsx
@@ -2,6 +2,7 @@ import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
 
 export default async function handleRequest(
   request: Request,
@@ -9,9 +10,14 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
+
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
     {
+      nonce,
       signal: request.signal,
       onError(error) {
         // eslint-disable-next-line no-console
@@ -26,6 +32,7 @@ export default async function handleRequest(
   }
 
   responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
   return new Response(body, {
     headers: responseHeaders,
     status: responseStatusCode,
diff --git a/templates/hello-world/app/root.tsx b/templates/hello-world/app/root.tsx
index 30073e5bbb..7fbd7ac260 100644
--- a/templates/hello-world/app/root.tsx
+++ b/templates/hello-world/app/root.tsx
@@ -12,6 +12,7 @@ import {
 import type {Shop} from '@shopify/hydrogen/storefront-api-types';
 import appStyles from './styles/app.css';
 import favicon from '../public/favicon.svg';
+import {useNonce} from '@shopify/hydrogen';
 
 // This is important to avoid re-fetching root queries on sub-navigations
 export const shouldRevalidate: ShouldRevalidateFunction = ({
@@ -53,6 +54,7 @@ export async function loader({context}: LoaderArgs) {
 }
 
 export default function App() {
+  const nonce = useNonce();
   const data = useLoaderData<typeof loader>();
 
   const {name} = data.layout.shop;
@@ -69,9 +71,9 @@ export default function App() {
         <h1>Hello, {name}</h1>
         <p>This is a custom storefront powered by Hydrogen</p>
         <Outlet />
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
diff --git a/templates/skeleton/app/entry.server.tsx b/templates/skeleton/app/entry.server.tsx
index 05b0c9a587..a645a41078 100644
--- a/templates/skeleton/app/entry.server.tsx
+++ b/templates/skeleton/app/entry.server.tsx
@@ -2,6 +2,7 @@ import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
 
 export default async function handleRequest(
   request: Request,
@@ -9,9 +10,14 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
+
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
     {
+      nonce,
       signal: request.signal,
       onError(error) {
         // eslint-disable-next-line no-console
@@ -26,6 +32,8 @@ export default async function handleRequest(
   }
 
   responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
+
   return new Response(body, {
     headers: responseHeaders,
     status: responseStatusCode,
diff --git a/templates/skeleton/app/root.tsx b/templates/skeleton/app/root.tsx
index 8e7faaba13..e76daf9ee2 100644
--- a/templates/skeleton/app/root.tsx
+++ b/templates/skeleton/app/root.tsx
@@ -1,3 +1,4 @@
+import {useNonce} from '@shopify/hydrogen';
 import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
 import {
   Links,
@@ -98,6 +99,7 @@ export async function loader({context}: LoaderArgs) {
 }
 
 export default function App() {
+  const nonce = useNonce();
   const data = useLoaderData<typeof loader>();
 
   return (
@@ -112,9 +114,9 @@ export default function App() {
         <Layout {...data}>
           <Outlet />
         </Layout>
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
@@ -123,6 +125,7 @@ export default function App() {
 export function ErrorBoundary() {
   const error = useRouteError();
   const [root] = useMatches();
+  const nonce = useNonce();
   let errorMessage = 'Unknown error';
   let errorStatus = 500;
 
@@ -153,9 +156,9 @@ export function ErrorBoundary() {
             )}
           </div>
         </Layout>
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );