If you have defined a Content Security Policy (CSP) for your website, and you’ve also integrated the Liveperson Web Messaging and/or Chat experience on your website via the Web Tag, the CSP may need to be modified to allow certain critical LivePerson resources to be loaded by consumer browsers.

What is a CSP?: an added layer of security to restrict/specify the sources and type of content (scripts/styles/iframes/etc.) that can be loaded on the web page. It helps to mitigate certain types of attacks, including Cross-Site Scripting (XSS).

Recommended CSP

In order for LivePerson Web Messaging/Chat to function properly, it is highly recommended to:

1. Whitelist the required LivePerson domains for specific directives of the CSP policy, so that they aren’t blocked by the browser
2. Since LivePerson Web Messaging/Chat application dynamically applies inline CSS and scripts, include the ‘unsafe-inline’ and ‘unsafe-eval’ CSP directives to allow the inline content to execute

Example

default-src 'self' *.lpsnmedia.net;
connect-src 'self' wss://*.liveperson.net *.liveperson.net *.lpsnmedia.net;
frame-src 'self' *.lpsnmedia.net *.liveperson.net;
img-src 'self' data: *.lpsnmedia.net;
media-src 'self' blob: *.lpsnmedia.net;
script-src 'self' 'unsafe-inline' 'unsafe-eval' *.lpsnmedia.net *.liveperson.net;
style-src 'self' 'unsafe-inline' *.lpsnmedia.net *.liveperson.net;

Details

If using explicit domains in your CSP instead of wildcard domains ('*'), then keep in mind that the subdomain of a given domain above may change slightly based on your account's LivePerson region/environment (i.e. 'va', 'lo'). Please contact LivePerson Technical Support if assistance is required (use the chat on this page, or message Support).

Using a 'nonce' and 'strict-dynamic'

Using a nonce and strict-dynamic in your CSP for scripts (script-src directive) is not recommended, but may be supported in certain situations. If desired, you must also implement the nonce when loading the Web Tag.

Testing

The "LivePerson Web Messaging Debugger" Chrome/Edge browser extension can be used to uncover CSP compliancy/compatibility issues with LivePerson web messaging/chat.

• The extension includes a developer tools panel that allows to verify that the required domains and CSP directives are not blocked on the current web page.
• This testing method is recommended for better future-proofing against future platform changes.
• The extension can be installed on both the Google Chrome or Microsoft Edge browsers

1. Pre-requisites

• Google Chrome or Microsoft Edge browser
• On the website, install the Web Tag
• Ensure the CSP is compliant for LivePerson web messaging according to the documentation.

2. Install the browser extension

Option A: Install from the Chrome extension store (Chrome and Edge support):

1. In Chrome or Edge, navigate to the install page in the Chrome extension store
2. Click on the “Add to Chrome” button on Chrome, or the “Get extension” button on Edge, to install the extension
3. If prompted, click the “Add extension” button to install the extension
4. Notice the new extension added by navigating to chrome://extensions/

Option B: Install from the Edge extension store (Edge-only support):

1. In Edge, navigate to the install page in the Edge extension store
2. Click on “Get” button to install the extension
3. If prompted, click the “Add extension” button to install the extension
4. Notice the new extension added by navigating to edge://extensions/

3. Using the debugger

1. Open the Developer Tools (View -> Developer -> Developer Tools)
2. Click on the tab in the Developer Tools named LivePerson
3. Wait for the view inside the tab to load..
4. After the tab view has loaded, if the host webpage is properly tagged, then “Web Tag detected”, and the account number will show at the top of the tab view.
   • If not, try reloading the webpage, closing/reopening the Developer Tools, or troubleshooting to make sure the Web Tag is integrated correctly on the webpage.
5. In the tab view, click on "CSP"
6. Read the gray instructions on how to start the test.
7. After the test runs, follow the instructions given for next steps according to the results of the test
8. Check the Console tab in the developer tools for any "Content Security Policy" errors

Troubleshooting

“Can’t find the extension in developer tools”:

• Try closing the developer tools, refreshing the current page, and/or relaunching the browser

Strict CSP Mode

If you have defined a more stringent Content Security Policy (CSP) than what is recommended above (i.e. one that disallows unsafe inline styles and scripts from executing), then further account changes may be required to allow LivePerson Web Messaging to function properly.

In LivePerson Web Messaging, “Strict CSP Mode” can be enabled on your account to allow it to work with a CSP that disallows unsafe inline styles and scripts, albeit with some limitations.

How to enable:

1. Whitelist the required LivePerson domains for specific directives of the CSP policy, so that they aren’t blocked by the browser (same as in the recommended solution)
2. Determine whether you need to utilize a nonce and strict-dynamic for scripts. If so, you must also implement the nonce when loading the Web Tag.
3. To have Strict CSP Mode enabled for your account, contact LivePerson Technical Support (use the chat on this page, or message Support).

Example

default-src 'self' *.lpsnmedia.net;
connect-src 'self' wss://*.liveperson.net *.liveperson.net *.lpsnmedia.net;
frame-src 'self' *.lpsnmedia.net *.liveperson.net;
img-src 'self' data: *.lpsnmedia.net;
media-src 'self' blob: *.lpsnmedia.net;
script-src 'self' *.lpsnmedia.net *.liveperson.net;
style-src 'self' *.lpsnmedia.net *.liveperson.net;

Strict CSP Mode known limitations:

• Strict CSP Mode only supported in Web Messaging (not Chat)
• Messaging window animations are not supported in Strict CSP Mode
• Based on technical limitations, Strict CSP Mode may affect the performance of the web messaging window (e.g. loading/rendering speed)
• Strict CSP Mode cannot be tested with the "LivePerson Web Messaging Debugger" Chrome extension