Skip to main content

createContentSecurityPolicy

Create a content security policy to secure your application. The default content security policy includes exclusions for cdn.shopify.com and a script nonce.

Anchor to createContentSecurityPolicy
createContentSecurityPolicy(
directives
)

Anchor to createContentSecurityPolicy-parametersParameters

Anchor to directives
directives
Record<string, string | boolean | string[]>
Default: {}

Pass custom content security policy directives. This is important if you load content in your app from third-party domains.

Anchor to createContentSecurityPolicy-returnsReturns

ContentSecurityPolicy

nonce
string

A randomly generated nonce string that should be passed to any custom script element

header
string

The content security policy header

NonceProvider
ComponentType<{children: ReactNode}>
Examples
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,
});
}

Anchor to relatedRelated

useNonce
Script
Was this page helpful?