Update

Shopify · Aug 17, 2023 · 8066aa5 · 8066aa5
1 parent 8f91138
commit 8066aa5
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json
@@ -55,7 +55,8 @@
   ],
   "dependencies": {
     "@shopify/hydrogen-react": "2023.7.0",
-    "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.tsx 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/csp.ts b/packages/hydrogen/src/csp/csp.ts
@@ -0,0 +1,30 @@
+import {createContext, useContext} from 'react';
+import cspBuilder from 'content-security-policy-builder';
+
+const CSPContext = createContext<string | undefined>(undefined);
+
+export const CSPProvider = CSPContext.Provider;
+
+export const useNonce = () => useContext(CSPContext);
+
+export function createCSPHeader(nonce: string, directives = {}) {
+  const defaultDirectives = {
+    baseUri: ["'self'"],
+    defaultSrc: ["'self'", `'nonce-${nonce}'`, 'https://cdn.shopify.com'],
+    frameAncestors: ['none'],
+    styleSrc: ["'self'", "'unsafe-inline'", 'https://cdn.shopify.com'],
+  };
+  return cspBuilder({
+    directives: Object.assign({}, defaultDirectives, directives),
+  });
+}
+
+export function generateNonce() {
+  return toHexString(crypto.getRandomValues(new Uint8Array(16)));
+}
+
+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/index.ts b/packages/hydrogen/src/index.ts
@@ -53,6 +53,9 @@ export type {
   VariantOptionValue,
 } from './product/VariantSelector';
 
+export {createCSPHeader, CSPProvider, generateNonce, useNonce} from './csp/csp';
+export {Script} from './csp/Script';
+
 export {
   AnalyticsEventName,
   AnalyticsPageType,

diff --git a/templates/skeleton/app/entry.server.tsx b/templates/skeleton/app/entry.server.tsx
@@ -2,20 +2,19 @@ import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
-import {NonceProvider} from './utils';
+import {generateNonce, CSPProvider, createCSPHeader} from '@shopify/hydrogen';
 
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
-  const nonce = (request as any).nonce as string;
-
+  const nonce = generateNonce();
   const body = await renderToReadableStream(
-    <NonceProvider value={nonce}>
+    <CSPProvider value={nonce}>
       <RemixServer context={remixContext} url={request.url} />
-    </NonceProvider>,
+    </CSPProvider>,
     {
       nonce,
       signal: request.signal,
@@ -32,6 +31,8 @@ export default async function handleRequest(
   }
 
   responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', createCSPHeader(nonce));
+
   return new Response(body, {
     headers: responseHeaders,
     status: responseStatusCode,

diff --git 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,
@@ -17,7 +18,6 @@ import favicon from '../public/favicon.svg';
 import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
-import {useNonce} from './utils';
 
 export function links() {
   return [

diff --git a/templates/skeleton/app/utils.ts b/templates/skeleton/app/utils.ts
@@ -44,7 +44,3 @@ export function getVariantUrl({
 
   return path + (searchString ? '?' + searchParams.toString() : '');
 }
-
-export const NonceContext = createContext<string | undefined>(undefined);
-export const NonceProvider = NonceContext.Provider;
-export const useNonce = () => useContext(NonceContext);
diff --git a/templates/skeleton/server.ts b/templates/skeleton/server.ts
@@ -15,12 +15,6 @@ import {
   type Session,
 } from '@shopify/remix-oxygen';
 
-function toHexString(byteArray: Uint8Array) {
-  return Array.from(byteArray, function (byte) {
-    return ('0' + (byte & 0xff).toString(16)).slice(-2);
-  }).join('');
-}
-
 /**
  * Export a fetch handler in module format.
  */
@@ -44,9 +38,6 @@ export default {
         HydrogenSession.init(request, [env.SESSION_SECRET]),
       ]);
 
-      const nonce = toHexString(crypto.getRandomValues(new Uint8Array(16)));
-      (request as any).nonce = nonce;
-
       /**
        * Create Hydrogen's Storefront client.
        */
@@ -84,11 +75,6 @@ export default {
 
       const response = await handleRequest(request);
 
-      response.headers.set(
-        'Content-Security-Policy',
-        `base-uri 'self'; default-src 'self' 'nonce-${nonce}' https://cdn.shopify.com; frame-ancestors 'none'; style-src 'self' 'unsafe-inline' https://cdn.shopify.com;`,
-      );
-
       if (response.status === 404) {
         /**
          * Check for redirects only when there's a 404 from the app.