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).

Strict CSP

If you prefer to define a more strict Content Security Policy (CSP) that does not include 'unsafe-inline' and/or 'unsafe-eval', then the following options are available:

Option 1: Using a 'nonce' and 'strict-dynamic' for the script-src directive

To avoid using 'unsafe-inline' and/or 'unsafe-eval' in the script-src directive, you can optionally implement a nonce and 'strict-dynamic' in the script-src directive to still allow LivePerson scripts to be trusted to run inline.

To implement this with LivePerson web messaging/chat, you must have the capability to dynamically apply a random nonce to your CSP, and while loading the Web Tag.

Examples

CSP example with nonce and 'strict-dynamic' in the script-src directive (instead of 'unsafe-inline' and 'unsafe-eval'):
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 'nonce-rAnd0m' 'strict-dynamic' 'self' https:;
style-src 'self' 'unsafe-inline' *.lpsnmedia.net *.liveperson.net;

Web Tag example with nonce when executed with in-line JavaScript:

<script nonce="rAnd0m">
  .. Web Tag script code ..
</script>

Web Tag example with nonce when self-hosted via external Javascript file:
<script nonce="rAnd0m" type="text/javascript" src="..URL/source.."></script>

Supporting older browsers

'script-dynamic' is only supported in CSP level 3 browsers (Chrome 52+ / Edge 79+, Firefox 52+). If you prefer to also support order CSP level 1 and 2 browsers, you must still define 'unsafe-inline' for the script-src directive in addition to 'strict-dynamic' and implementing the nonce. In this case, 'unsafe-inline' will be ignored in modern CSP level 3 browsers that support 'script-dynamic', and will only be used as a fallback in CSP level 1/2 browsers.

Disclaimers

While this option removes the requirement for 'unsafe-inline' in the script-src directive, please note that 'unsafe-inline' is still required in the style-src directive. This option solely prevents the execution of inline JavaScript and script-based XSS unless nonced.

Due to the increased complexity of implementing a nonce and the lack of support in older browsers, the most recommended approach is still to use 'unsafe-inline' in both script-src and style-src directives as in the "Recommended CSP" above.

Option 2. Enable Strict CSP Mode

To avoid using 'unsafe-inline' and/or 'unsafe-eval' in both the script-src and style-src directives, then “Strict CSP Mode” can be enabled on your account to allow it to work with a CSP that disallows unsafe inline styles and scripts. However, this mode has some technical limitations.

Due to the technical limitations of Strict CSP Mode (listed below), this option is only suggested as a last resort after considering either the first "Recommended CSP" or "Option 1: Using a 'nonce' and 'strict-dynamic' for the script-src directive" Strict CSP above.

How to enable:

1. To have Strict CSP Mode enabled for your account, contact LivePerson Technical Support (use the chat on this page, or message Support).
2. 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)
3. [Optional] Determine whether you also need to utilize a nonce and strict-dynamic for scripts (see instructions above)

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 below

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