Issues with Content Security Policy (CSP)

If you integrate AppNavi directly into your web application via script link, you may get the following error message.
'because it violates the following content security policy directive'. This is a browser error message that occurs when Content Security Policy is blocking a resource from loading.

What is Content Security Policy (CSP)?

It is a security feature built into all browsers that blocks resources that don't match the policy. This policy helps to restrict the resources that can be loaded or executed in a web application. The policy is delivered either as an HTTP header, or as an HTML meta tag.

What is being blocked?

It's usually in the error message, some examples of content being blocked:

• Refused to load the script 'https:.../scripts.js' because it violates is stating that the script https:.../scripts.js was blocked from being downloaded and executed.

• Refused to execute inline script because it violates means that inline Javascript was blocked. Inline javascript includes <script> tags and onevent handlers <button onclick="doThing()">

• Refused to apply inline style because it violates means an inline CSS was blocked. This could be either <style> tags or an inline style attribute <div style="font-size: 12px">

How to fix it?

To enable CSP, you need to configure your web server to return the Content-Security-Policy HTTP header. (Sometimes you may see mentions of the X-Content-Security-Policy header, but that's an older version and you don't need to specify it anymore.) To fix AppNavi CSP issues, you need to set the following policies:

• 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;

If you do not have access to the webserver header configuration you can alternativly configure the Content-Security-Policy in your html code using the meta element.