create
utility
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 props
props
&
ContentSecurityPolicy
header
string
The content security policy header
nonce
string
A randomly generated nonce string that should be passed to any custom script element
NonceProvider
ComponentType<{children: ReactNode}>
Was this section helpful?
Example code
import {ServerRouter} from 'react-router';
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>
<ServerRouter context={remixContext} url={request.url} nonce={nonce} />
</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,
});
}
