---
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: 2024-04
api_name: hydrogen
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen/2024-04/utilities/createcontentsecuritypolicy
  md: >-
    https://shopify.dev/docs/api/hydrogen/2024-04/utilities/createcontentsecuritypolicy.md
---

# create​Content​Security​Policy

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

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

### CreateContentSecurityPolicy

* defaultSrc

  ```ts
  DirectiveValues
  ```

* scriptSrc

  ```ts
  DirectiveValues
  ```

* scriptSrcElem

  ```ts
  DirectiveValues
  ```

* styleSrc

  ```ts
  DirectiveValues
  ```

* imgSrc

  ```ts
  DirectiveValues
  ```

* connectSrc

  ```ts
  DirectiveValues
  ```

* fontSrc

  ```ts
  DirectiveValues
  ```

* objectSrc

  ```ts
  DirectiveValues
  ```

* mediaSrc

  ```ts
  DirectiveValues
  ```

* frameSrc

  ```ts
  DirectiveValues
  ```

* sandbox

  ```ts
  DirectiveValues
  ```

* reportUri

  ```ts
  DirectiveValues
  ```

* childSrc

  ```ts
  DirectiveValues
  ```

* formAction

  ```ts
  DirectiveValues
  ```

* frameAncestors

  ```ts
  DirectiveValues
  ```

* pluginTypes

  ```ts
  DirectiveValues
  ```

* baseUri

  ```ts
  DirectiveValues
  ```

* reportTo

  ```ts
  DirectiveValues
  ```

* workerSrc

  ```ts
  DirectiveValues
  ```

* manifestSrc

  ```ts
  DirectiveValues
  ```

* prefetchSrc

  ```ts
  DirectiveValues
  ```

* navigateTo

  ```ts
  DirectiveValues
  ```

* upgradeInsecureRequests

  ```ts
  boolean
  ```

* blockAllMixedContent

  ```ts
  boolean
  ```

### DirectiveValues

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

### ShopProp

* shop

  Shop specific configurations

  ```ts
  ShopifyDomains
  ```

### ShopifyDomains

* checkoutDomain

  The production shop checkout domain url.

  ```ts
  string
  ```

* storeDomain

  The production shop domain url.

  ```ts
  string
  ```

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

Examples

### 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/2024-04/hooks/usenonce)

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