---
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: 2025-07
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/latest/utilities/createcontentsecuritypolicy
  md: https://shopify.dev/docs/api/hydrogen/latest/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([props](#props-propertydetail-props)​)

### Parameters

* props

  CreateContentSecurityPolicy & ShopProp

### Returns

* ContentSecurityPolicy

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

### CreateContentSecurityPolicy

* baseUri

  ```ts
  DirectiveValues
  ```

* blockAllMixedContent

  ```ts
  boolean
  ```

* childSrc

  ```ts
  DirectiveValues
  ```

* connectSrc

  ```ts
  DirectiveValues
  ```

* defaultSrc

  ```ts
  DirectiveValues
  ```

* fontSrc

  ```ts
  DirectiveValues
  ```

* formAction

  ```ts
  DirectiveValues
  ```

* frameAncestors

  ```ts
  DirectiveValues
  ```

* frameSrc

  ```ts
  DirectiveValues
  ```

* imgSrc

  ```ts
  DirectiveValues
  ```

* manifestSrc

  ```ts
  DirectiveValues
  ```

* mediaSrc

  ```ts
  DirectiveValues
  ```

* navigateTo

  ```ts
  DirectiveValues
  ```

* objectSrc

  ```ts
  DirectiveValues
  ```

* pluginTypes

  ```ts
  DirectiveValues
  ```

* prefetchSrc

  ```ts
  DirectiveValues
  ```

* reportTo

  ```ts
  DirectiveValues
  ```

* reportUri

  ```ts
  DirectiveValues
  ```

* sandbox

  ```ts
  DirectiveValues
  ```

* scriptSrc

  ```ts
  DirectiveValues
  ```

* scriptSrcElem

  ```ts
  DirectiveValues
  ```

* styleSrc

  ```ts
  DirectiveValues
  ```

* upgradeInsecureRequests

  ```ts
  boolean
  ```

* workerSrc

  ```ts
  DirectiveValues
  ```

```ts
{
  defaultSrc?: DirectiveValues;
  scriptSrc?: DirectiveValues;
  scriptSrcElem?: DirectiveValues;
  styleSrc?: DirectiveValues;
  imgSrc?: DirectiveValues;
  connectSrc?: DirectiveValues;
  fontSrc?: DirectiveValues;
  objectSrc?: DirectiveValues;
  mediaSrc?: DirectiveValues;
  frameSrc?: DirectiveValues;
  sandbox?: DirectiveValues;
  reportUri?: DirectiveValues;
  childSrc?: DirectiveValues;
  formAction?: DirectiveValues;
  frameAncestors?: DirectiveValues;
  pluginTypes?: DirectiveValues;
  baseUri?: DirectiveValues;
  reportTo?: DirectiveValues;
  workerSrc?: DirectiveValues;
  manifestSrc?: DirectiveValues;
  prefetchSrc?: DirectiveValues;
  navigateTo?: DirectiveValues;
  upgradeInsecureRequests?: boolean;
  blockAllMixedContent?: boolean;
}
```

### DirectiveValues

```ts
string[] | string | boolean
```

### ShopProp

* shop

  Shop specific configurations

  ```ts
  ShopifyDomains
  ```

```ts
{
  /** Shop specific configurations */
  shop?: ShopifyDomains;
}
```

### ShopifyDomains

* checkoutDomain

  The production shop checkout domain url.

  ```ts
  string
  ```

* storeDomain

  The production shop domain url.

  ```ts
  string
  ```

```ts
{
  /** The production shop checkout domain url.  */
  checkoutDomain?: string;
  /** The production shop domain url. */
  storeDomain?: string;
}
```

### ContentSecurityPolicy

* header

  The content security policy header

  ```ts
  string
  ```

* nonce

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

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

  ##### TypeScript

  ```tsx
  import type {EntryContext} from '@shopify/remix-oxygen';
  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: 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>
        <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,
    });
  }
  ```

## Related

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

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