Guides

Content Security Policy Guide

A content security policy (CSP) is a security feature you configure on your website. It tells the browser which domains are allowed to:

  • Load JavaScript
  • Embed iFrames
  • Make network requests (for example, fetch or XHR calls)

Many organizations use a CSP to reduce the risk of malicious scripts or data exfiltration. When you embed our checkout widget, your CSP must explicitly allow our widget to load and communicate.

If your CSP does not explicitly allow our domain, your customers may see an empty space where the checkout should be or error messages in the browser console. Your team can still use our developer tools to test in isolation, but your CSP must be updated before you can fully test the widget on your own site.

How to allow our checkout page to work with your CSP

Add the required domains to three key directives

Your CSP should allow the domains used by the checkout widget in these directives:

  • script-src – so your site can load the checkout widget JavaScript

  • frame-src – so your site can embed the checkout widget iframe

  • connect-src – this allows the widget to make API calls back to our servers

There are two types of domains to account for:

  1. Environment-specific checkout domains

    Choose the set that matches the environment where the checkout is being hosted:

    1. Production: https://govhub.com, https://config.grantstreet.com
    2. Non-production (testing): https://demo.govhub.com, https://demo-config.grantstreet.com

  2. Shared service domains required in all environments

    These domains are required in both production and non-production:

    1. https://sentry.io for error tracking, so we can identify and troubleshoot issues affecting the checkout experience
    2. https://*.launchdarkly.com for feature flags, so we can safely control and limited new changes to checkout behavior

Examples

Example Production CSP

Content-Security-Policy:
  script-src  'self' https://govhub.com;
  frame-src   'self' https://govhub.com;
  connect-src 'self' https://config.grantstreet.com https://sentry.io https://*.launchdarkly.com;

Example Non-production CSP

Content-Security-Policy:
  script-src  'self' https://demo.govhub.com;
  frame-src   'self' https://demo.govhub.com;
  connect-src 'self' https://demo-config.grantstreet.com https://sentry.io https://*.launchdarkly.com;

Your actual header may include additional sources, nonces, or hashes. The important part is that these domains are present in each directive your team enforces for any production and non-production environments.