---
title: createContentSecurityPolicy
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.
api_version: 2023-07
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/2023-07/utilities/createcontentsecuritypolicy
  md: >-
    https://shopify.dev/docs/api/hydrogen/2023-07/utilities/createcontentsecuritypolicy.md
---

# create​Content​Security​Policyutility

Create a [content security policy](https://shopify.dev/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.

## create​Content​Security​Policy([directives](#props-propertydetail-directives)​)

### Parameters

* directives

  Record\<string, string | boolean | string\[]>

  Default: {}

  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.

### Returns

* ContentSecurityPolicy

  ### 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}>

### ContentSecurityPolicy

* nonce

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

  ```ts
  string
  ```

* header

  The content security policy header

  ```ts
  string
  ```

* NonceProvider

  ```ts
  ComponentType<{children: ReactNode}>
  ```

```ts
{
  /** 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}>;
}
```

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  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,
    });
  }
  ```

  ##### TypeScript

  ```tsx
  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,
    });
  }
  ```

## Related

[- useNonce](https://shopify.dev/docs/api/hydrogen/2023-07/hooks/usenonce)

[- Script](https://shopify.dev/docs/api/hydrogen/2023-07/components/script)