Content Security Policy

This guide shows you how to integrate Appzi in environments with strict Content Security Policy (CSP) settings.

Content Security Policy is a security standard that helps prevent cross-site scripting (XSS), clickjacking, and other code injection attacks. It works by specifying which domains a browser should consider as valid sources for executable scripts, stylesheets, images, and other resources.

Implementation Steps

1. Include the Appzi Script

Add or update the Appzi script to your HTML using strict.js instead of w.js

<!-- Before: -->
<script async src="https://w.appzi.io/w.js?token=PORTAL_TOKEN"></script>

<!-- After (for strict CSP): -->
<script async src="https://w.appzi.io/strict.js?token=PORTAL_TOKEN"></script>

The main difference between these two is that strict.js uses src for iframes, while w.js uses srcdoc. Our tests show that srcdoc performs slightly better in animation rendering, however in real-life scenarios, the difference is negligible.

2. Configure CSP Headers:

Set the Content-Security-Policy header in your server response with the necessary directives. These CSP directives are essential for Appzi to function properly in strict mode in production environments:

connect-src https://api.appzi.io https://w.appzi.io;
font-src https://fonts.gstatic.com;
frame-src https://w.appzi.io;
script-src https://w.appzi.io;
img-src https://w.appzi.io https://survey-assets.appzi.io;
style-src https://w.appzi.io;

Why Each Directive is Needed

• connect-src https://api.appzi.io https://w.appzi.io: This directive is necessary to load the Appzi engine.

• frame-src https://w.appzi.io: This directive is needed because Appzi loads feedback surveys and buttons in iframes to enhance isolation and security.

• script-src https://w.appzi.io: This directive is crucial for loading the Appzi JavaScript code that powers the survey functionality.

• style-src https://w.appzi.io: This directive is required to load the CSS styles that format and position the Appzi Survey correctly on your page.

• img-src https://w.appzi.io https://survey-assets.appzi.io: Required to display images in the Appzi interface assets such as logos, icons, and other visual elements. If custom logos are not used, https://survey-assets.appzi.io can be omitted.

• font-src https://fonts.gstatic.com: Required for loading Google Fonts used in Appzi Surveys. This directive can be omitted if your survey only uses web-safe fonts (such as Georgia or Verdana).

Troubleshooting

If the Appzi Surveys are not loading properly:

1. Check Browser Console for CSP Violation Errors: Open the browser’s developer tools and check the console for any CSP-related errors. These errors will indicate which resources are being blocked by the CSP.

2. Verify Required Domains in CSP Directives: Ensure that all the required domains are included in the appropriate CSP directives:

   • https://api.appzi.io
   • https://w.appzi.io
   • https://survey-assets.appzi.io
   • https://fonts.gstatic.com

3. Confirm Correct Appzi Script Source: Double-check that the Appzi script is being loaded from the correct domain:

   <script async src="https://w.appzi.io/strict.js?token=YOUR_TOKEN"></script>

4. Ensure Proper CSP Header Formatting: Make sure that your CSP header is properly formatted without any line breaks or syntax errors. Incorrect formatting can cause the CSP to be ignored or misinterpreted by the browser.

5. Check for Conflicting CSP Rules: Review your CSP policy to ensure there are no conflicting rules that might be blocking the Appzi resources.

6. Review Server Configuration: Ensure that your server is correctly configured to send the CSP headers with the appropriate directives.

If you have followed all these steps and are still experiencing issues, consider reaching out to support@appzi.io for further assistance.