Configuring Content Security Policy (CSP)

Many organizations use a Content Security Policy (CSP) to prevent cross-site scripting (XSS) attacks and data injection. A CSP header tells the browser which dynamic resources, such as JavaScript, Stylesheets, and images, can run. If your website uses a strict CSP, you must add GetFeedback to your allowlist to ensure your feedback assets load properly.

Add CSP Hash (optional)

If your web setup requires exact hash-based matching, copy the values generated inside your installation screen and add them directly to your web server response header rules:

On script-src: 'sha256-l2ABcDC7VZcirDGllBhNKaAYFYNnOZGjFc6nWjJmnLQ='
On style-src: 'nonce-17ddf23a141a'

Finding Your CSP

You can see your CSP directly in your browser. If you installed the GetFeedback snippet but your survey doesn’t show up or lacks styling, you can find your active rules using 3 standard methods:

Option 1 - Use Developer Tools

Open your developer tools panel and select Network.
Reload your page and select the primary document file that builds your web page, typically matching your active root domain string.
Verify you see a successful 200 OK response, and scroll down to the Response Headers section.
Look for a line named Content-Security-Policy to review your results.

Option 2 - Use a Browser Extension

Be cautious when installing security extensions in your work browser, as some request invasive data access permissions. Check with your IT admin first.

You can download browser extensions that automatically list active server policies for your current tab.

Option 3 - Use the Page Source

Open a new tab, go to your website, and right-click any empty space to select View Page Source.
Open your browser's search tool (Ctrl + F on Windows, or Cmd + F on Mac)
Search for Content-Security-Policy.
If you find an inline match, your policy parameters will follow directly inside that element's content attribute.

Resolving CSP Errors

If a specific CSP error message shows up in your browser console, you can resolve the constraint by adding the appropriate parameters from the list below to your configuration rules:

Required CSP Directives

script-src: Authorizes the JavaScript calls required to run your interactive surveys.
img-src: Validates loading permissions for assets, feedback graphics, and user icons in your custom themes.
style-src: Unlocks stylesheets. Because the engine uses inline styles, you may need to add an explicit 'unsafe-inline' bypass value in this section.
frame-src: Allows secure iFrames to render on your page.
connect-src: Permits client-side scripts to run API calls that safely transmit submission feedback payloads back to our data storage servers.
font-src: Unblocks typography downloads or external asset files, such as Google Fonts, used in your visual interface.

Basic Policy Allowlist Template

Share this basic template with your web development team to use as a guide:

Plaintext

script-src 'self' 'sha256-l2ABcDC7VZcirDGllBhNKaAYFYNnOZGjFc6nWjJmnLQ=' https://d6tizftlrpuof.cloudfront.net *.usabilla.com;
img-src 'self' https://d6tizftlrpuof.cloudfront.net https://*.usabilla.com;
style-src 'self' 'unsafe-inline' https://d6tizftlrpuof.cloudfront.net *.usabilla.com https://fonts.googleapis.com;
frame-src 'self' https://d6tizftlrpuof.cloudfront.net *.usabilla.com;
connect-src 'self' https://d6tizftlrpuof.cloudfront.net *.usabilla.com;
font-src 'self' https://d6tizftlrpuof.cloudfront.net *.usabilla.com https://fonts.googleapis.com;

Style Restrictions

Some strict network policies completely block rules like 'unsafe-inline' within the live style-src directive block.

If your policy forces these constraints, expect the following impact:

Affected elements: Your passive Feedback buttons and active questionnaire modules will lose their dynamic styling characteristics (rendering layout blocks as flat, distorted text fields or unformatted broken rows).
Unaffected elements: Automated background behaviors and contextual behavioral campaign logic rules will continue to execute normally behind the scenes.

Alternative Script Workaround

If your team can’t change the style-src rules for the tracking snippet, you need to set up a manual callback interface. To do this, deploy custom hooks to grab and restyle the native usabilla_live_button_container node element after the core solution has completed initializing on your page.

If your team has more technical questions about custom nonce channels, contact us.

Using Content Security Policy (CSP) with GetFeedback Digital

Billing Details, Invoices, and Payment History

Getting Started with GetFeedback