Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. If you are running into an issue with your CSP, you might need to make an adjustment to allow Pendo full functionality.
This article outlines the minimum required directives to allow Pendo full functionality, as well as compatible guide content examples for applications with strict CSP.
If you are using Feedback, see Feedback's Content Security Policy.
Guide Delivery Settings
For applications with strict CSP, you must ensure your Guide Delivery Settings are set to XHR.
To access your Guide Delivery settings, navigate to the App Details page, select the Agent Settings tab, and then Manage Production Settings.
Ensure the XHR radio button is selected.
CSP without CNAME
For descriptions of the directives and entries in the code block examples, below, see Glossary of directives and entries.
foo.example.com below with your hostname. Replace SUB_ID with your Subscription ID. Your Subscription ID is displayed in the page URL when you're logged into Pendo. It uses the following formathttps://app.pendo.io/s/[SUB_ID]/. The subscription ID immediately follows /s/. Don't accidentally grab the unique ID for a guide or report that populates at the end of the URL path when navigating Pendo.You may include
https:// before any hostnames if desired.Minimum Required CSP Directives for US/Worldwide Non-EU Clients:
Full functionality, including the Designer:
script-src foo.example.com 'unsafe-inline' 'unsafe-eval' app.pendo.io pendo-io-static.storage.googleapis.com cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
style-src foo.example.com 'unsafe-inline' app.pendo.io cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com;
img-src foo.example.com cdn.pendo.io app.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
connect-src app.pendo.io data.pendo.io pendo-static-SUB_ID.storage.googleapis.com;
frame-ancestors app.pendo.io;
frame-src app.pendo.io;
child-src app.pendo.io;script-src foo.example.com pendo-io-static.storage.googleapis.com cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
style-src foo.example.com app.pendo.io cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com;
img-src foo.example.com cdn.pendo.io app.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
connect-src app.pendo.io data.pendo.io pendo-static-SUB_ID.storage.googleapis.com; frame-ancestors app.pendo.io;script-src foo.example.com app.pendo.io pendo-io-static.storage.googleapis.com cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
style-src foo.example.com app.pendo.io cdn.pendo.io pendo-static-SUB_ID.storage.googleapis.com;
img-src foo.example.com cdn.pendo.io app.pendo.io pendo-static-SUB_ID.storage.googleapis.com data.pendo.io;
connect-src app.pendo.io data.pendo.io pendo-static-SUB_ID.storage.googleapis.com; frame-ancestors app.pendo.io;Compatible Guide Content
While Pendo is compatible with strict CSP directives, it is the user’s responsibility to ensure the guide content is compatible with your CSP restrictions.
If unsafe-inline is not present within the style-src and script-src directives, inline CSS and JavaScript within the HTML tab of the guide will not function correctly. To prevent an unexpected guide experience, all inline styles and scripts should be moved to the CSS and JS tabs of the guide code block or template.
With properly set minimal CSP directives (no inline directives), you should be able to fully use the Pendo Designer to show and tag your features. The X-Frame-Options plugin should enable you to use the Designer in guide editing mode with strict CSP. It is important to test guide content outside of the designer and with the X-Frame-Options plugin turned off.
Example of Strict CSP Compatible Content
The basic concept is to remove all "unsafe-inline" styling and JavaScript.
For example, all of the inline styling and JavaScript within this HTML button:
<button class="_pendo-guide-next_" style="color:blue;"
onclick="pendo.onGuideAdvanced()">Next</button>
HTML
<button class="_pendo-guide-next_ blue-button">Next</button>
CSS
.bluebutton { color: blue; }
JavaScript
(function wireGuideAdvanceButton (step) {
step && step.attachEvent(step.guideElement[0], 'click', function (e) {
var advanceButton = pendo.dom(e.target || e.srcElement).closest('._pendo-guide-next_');
if (advanceButton.length) {
pendo.onGuideAdvanced();
}
});
})(step,guide);
| Host | Description |
cdn.pendo.io |
Location of the Pendo agent, referenced in your install script ("snippet"). This is where the Pendo agent is downloaded from by default. |
pendo-io-static.storage.googleapis.com |
Location of the Pendo agent downloaded for staging domains. |
pendo-static-{{ SUB_ID }}.storage.googleapis.com |
Location of all guide content. |
data.pendo.io |
Used to download the list of guides that a Visitor is eligible for. This is only needed for JSONP delivery methods. |
app.pendo.io |
Only required to use the Designer. |
'unsafe-inline' |
Only required if using custom code blocks or classic guides while in the Designer. |
'unsafe-eval' |
Required if using custom code blocks or classic guides while in the Designer. |
Directive: style-src
These entries (hosts) allow Pendo styles to be used on your site.