Content Security Policy (CSP) Configuration Guide for AppNavi

Overview

This document guides on configuring Content Security Policy (CSP) for integrating AppNavi into your web application.

CSP is a security mechanism implemented by modern web browsers to prevent unauthorized execution of scripts, styles, and other resources. Incorrect CSP configurations may prevent AppNavi from functioning correctly.

More information about CSP can be found here.

What is a Content Security Policy (CSP)?

CSP restricts the types of content that a web page can load. It is defined using:

HTTP Headers (Recommended)
HTML <meta> Tags (Alternative)

A correctly configured CSP helps prevent security vulnerabilities such as Cross-Site Scripting (XSS) and data injection attacks.

ℹ️ Note: AppNavi, via its Chrome extension, never updates or modifies the host website's CSP policy.

Identifying CSP Errors

When AppNavi is blocked by CSP, your browser may display errors in the developer console (F12 → Console tab).

Common CSP Errors and Their Causes

Cause	Error Message
The external script is blocked.	`Refused to load the script 'https://example.com/script.js' because it violates the Content Security Policy directive.`
Inline JavaScript is blocked.	`Refused to execute inline script because it violates the Content Security Policy directive.`
Inline CSS is blocked.	`Refused to apply inline style because it violates the Content Security Policy directive.`

Configuring CSP for AppNavi

Recommended: Using HTTP Headers

The best practice is to configure your web server to include the following CSP directive in the response headers:

Content-Security-Policy: 
  default-src 'none'; 
  connect-src *.inappnavi.com; 
  script-src *.inappnavi.com; 
  img-src data: *.inappnavi.com; 
  font-src data: *.inappnavi.com; 
  style-src 'unsafe-inline' *.inappnavi.com;

Example of configuring CSP for AppNavi using http Headers

Alternative: Using an HTML `<meta>` Tag

If you do not have access to server configurations, you can include the CSP policy in your HTML:

<meta http-equiv="Content-Security-Policy" 
            content="default-src 'none'; 
            connect-src *.inappnavi.com; 
            script-src 'unsafe-inline'/nonce  *.inappnavi.com; 
            img-src data: *.inappnavi.com; 
            font-src data: *.inappnavi.com; 
            style-src 'unsafe-inline' *.inappnavi.com;">

Example of configuring CSP for AppNavi using meta tag

Explanation of CSP Directives

Directive	Description
`default-src 'none';`	Blocks all resources unless explicitly allowed.
`connect-src 'unsafe-inline'/nonce *.inappnavi.com;`	- 'unsafe-inline': Allows inline scripts, but risky. - nonce: Use for dynamic inline scripts (secure). - hash: Use for static inline scripts (secure).Recommendation: Avoid 'unsafe-inline', use nonce or hash.
`script-src *.inappnavi.com;`	Permits scripts only from AppNavi.
`img-src data: *.inappnavi.com;`	Allows images from AppNavi and base64-encoded images.
`font-src data: *.inappnavi.com;`	Permits fonts from AppNavi and base64-encoded fonts.
`style-src 'unsafe-inline' *.inappnavi.com;`	Allows inline styles and styles from AppNavi.

Frequently Asked Questions (FAQs)

Q1: Why is my AppNavi integration blocked by CSP?

If you see CSP errors in the browser console, it means that the policy is too restrictive. Make sure that script-src, connect-src, img-src, font-src, and style-src include *.inappnavi.com.

Q2: How can I check if my CSP settings are correct?

✅ Use browser developer tools:

Open Chrome DevTools (F12 → Console).
Look for CSP violation messages.
Adjust the CSP policy accordingly.

✅ Use Google’s CSP Evaluator:

CSP Evaluator helps analyze security risks in your CSP settings.

Q3: What if I need to allow scripts/styles from multiple domains?

You can specify multiple domains by separating them with a space:

script-src 'self' https://cdn.example.com *.inappnavi.com;

This allows scripts from your own site ('self'), cdn.example.com, and inappnavi.com.

Q4: Can I test my CSP before enforcing it?

Yes! Use CSP Report-Only Mode to log violations without blocking resources:

Content-Security-Policy-Report-Only: script-src *.inappnavi.com;

This helps identify potential issues before enforcing strict CSP rules.

If you require further assistance, please contact your AppNavi support team.