---
description: How Content Security Policy works on Shopify storefronts and Hydrogen, and how to send CSP violation reports to Report URI.
---

# Shopify

CSP on Shopify depends entirely on how your storefront is built. On a headless storefront built with Hydrogen you get first-class CSP support with nonces. On a hosted Liquid storefront you do not control the response headers, so your options are narrower.

The checkout is a separate question again: Shopify hosts it, and Shopify sets its policy.

## What Shopify gives you

- **Hydrogen (headless):** the `createContentSecurityPolicy()` utility, called in `entry.server.jsx`, returns a nonce, a `NonceProvider` and the header value. The nonce reaches components through the `useNonce()` hook, and Hydrogen's `Script` component attaches it automatically.
- Custom directives can be passed straight into `createContentSecurityPolicy()` to extend the default policy, which already accounts for `cdn.shopify.com`.
- **Hosted Liquid storefronts:** no control panel setting for response headers. To deliver a CSP you need something in front of the storefront that can add one - see our [Cloudflare](/platforms/cloudflare/) page.
- **Checkout:** hosted and controlled by Shopify, with Shopify's own security headers. It is not yours to configure.

## Sending reports to Report URI

In Hydrogen, add a reporting directive to the policy you pass to `createContentSecurityPolicy()`. Your URL comes from the [Setup](https://report-uri.com/account/setup/) page:

    report-uri https://abc123.report-uri.com/r/d/csp/reportOnly

If you are adding the header in front of a hosted storefront instead, put the same directive in the header value you inject at the edge.

## Things to watch for

- Nonces need to be generated per response, which a hosted Liquid storefront cannot do. On those storefronts, hashes are the practical route for inline script content, and they have to be regenerated whenever a theme edit changes the script.
- Apps installed from the Shopify App Store add scripts you did not write. Run report-only for long enough to see all of them before enforcing anything.
- A policy that works on your storefront says nothing about the checkout, so do not assume checkout coverage from storefront reports.

## Official documentation

[Shopify - Add a content security policy](https://shopify.dev/docs/storefronts/headless/hydrogen/content-security-policy)

## Start Monitoring with Report URI

**Already using us for CSP?** Find your report-uri value on [Setup](https://report-uri.com/account/setup/), or view your [CSP reports](https://report-uri.com/account/reports/csp/).

**New to Report URI?** Create an account and grab your report-uri value from the [Setup](https://report-uri.com/account/setup/) page.

[Start your free trial](https://report-uri.com/register/?plan=starter2025)