Logo
  1. Docs
  2. Build a Weaverse Hydrogen Theme

Content Security Policy

Published on Oct 11, 2023, updated a month ago

Understanding Content Security Policy

Content Security Policy (CSP) is a vital security feature implemented by modern web browsers. It defines and enforces a set of content restrictions for web pages. Essentially, CSP acts as a protective barrier, allowing you to specify which external resources and scripts your web page can load and execute.

Weaverse's Automatic CSP Setup

In Weaverse, the implementation of CSP is handled automatically using the createContentSecurityPolicy utility from the @shopify/hydrogen package within the entry.server.jsx file:

WEAVERSE_EMBEDED_CODE

Customizing CSP Policies

The default CSP policies used by Weaverse are returned from the getWeaverseCsp function. These policies include directives that allow the loading of Weaverse resources and enable seamless operation within Weaverse Studio.

WEAVERSE_EMBEDED_CODE

If your development scenario requires customization, you can easily tailor the CSP policies to your specific needs. To do this, update the getWeaverseCsp function to return custom directive values. You can refer to resources like content-security-policy.com for guidance on defining your custom CSP directives.

Was this article helpful?