Skip to main content

Content Security Policy (CSP)

If your website has a Content Security Policy (CSP), at least you need to have the following CSP headers. Else, the LoyJoy chat will not load. Do not set up CSP headers for specific sub domains of loyjoy.com or files under the loyjoy.com domain, as this will break upon future LoyJoy releases when file paths or sub domains change.

script-src *.loyjoy.com;
style-src 'unsafe-inline' *.loyjoy.com;
connect-src *.loyjoy.com wss://*.loyjoy.com wss://lpru5mjumh.execute-api.eu-central-1.amazonaws.com;
font-src *.loyjoy.com;
frame-src https: *.loyjoy.com;
img-src blob: data: *.loyjoy.com;
media-src blob: data: *.loyjoy.com;

Explanation of the CSP headers:

  • script-src allows the LoyJoy chat to load and execute JavaScript files from the LoyJoy domain.
  • style-src allows the LoyJoy chat to load CSS files from the LoyJoy domain. The unsafe-inline is used to inject fonts dynamically for the LoyJoy chat.
  • connect-src allows the LoyJoy chat to send data such as chat messages to the LoyJoy server. The wss://*.loyjoy.com is needed for the WebSocket connection of Voice Chat. Many browsers do not treat wss:// connections as covered by *.loyjoy.com and therefore require the explicit wss:// entry. The wss://lpru5mjumh.execute-api.eu-central-1.amazonaws.com is optional and is used for a WebSocket connection in case the Live Chat module is active. If this header is not set, the LoyJoy chat will poll the LoyJoy server for new messages every few seconds, which is less efficient. Please note that no personal data (e.g. no chat messages) are sent to this endpoint, but only notifications about new messages and typing indicators.
  • font-src allows the LoyJoy chat to load fonts from the LoyJoy domain.
  • frame-src currently is needed for the Lottie module to render Lottie animations in a background iframe and the External Link module to embed YouTube videos in the chat.
  • img-src allows the LoyJoy chat to load images from the LoyJoy domain. The blob: and data: are needed for data URIs and images, which are generated dynamically and are provided as a blob URL or data URI in chat messages. If the chat should show images from other domains, those are needed here, too.
  • media-src allows the LoyJoy chat to load media files from the LoyJoy domain. The blob: and data: are needed for data URIs and media files, which are generated dynamically and are provided as a blob URL or data URI in chat messages. If the chat should show media from other domains, those are needed here, too.

Voice Chat​

Voice Chat needs no additional CSP directive beyond the ones above, as long as wss://*.loyjoy.com is part of connect-src. The voice audio is streamed over this WebSocket connection and played back with the Web Audio API, so neither media-src nor worker-src are involved.

Besides CSP, the following must be fulfilled for the microphone to work:

  1. The website must be served via HTTPS, as browsers only grant microphone access in a secure context.
  2. If your website sets a Permissions-Policy header, it must allow the microphone for your own origin, e.g. Permissions-Policy: microphone=(self). A value of microphone=() blocks Voice Chat.
  3. If the page with the LoyJoy chat is itself embedded in an iframe, the iframe needs the attribute allow="microphone".

Captcha Bot Check​

If the Captcha Bot Check of the email module is enabled, the CSP additionally has to allow CaptchaFox:

script-src https://cdn.captchafox.com;
style-src *.captchafox.com;
connect-src *.captchafox.com;
frame-src *.captchafox.com;
img-src *.captchafox.com;
media-src *.captchafox.com;
worker-src blob:;
  • script-src allows the chat to load the CaptchaFox widget script.
  • style-src, img-src and media-src allow the widget and the challenge popup (e.g. a slider) to load their stylesheets, images and media.
  • connect-src and frame-src allow the widget to request the check from CaptchaFox.
  • worker-src blob: allows the proof-of-work worker, which CaptchaFox starts from a blob URL.

If these directives are missing, the check fails and the email address cannot be stored.

CSP in Microsoft Sharepoint​

Starting in June Sharepoint requires CSP headers. In Sharepoint administation only script source URLs can be entered. In our tests entering *.loyjoy.com has shown to work, allowing not only script-src but also style-src and connect-src.

Examples​

The following test examples show combinations of ES module vs. non-ES module and nonce vs. no nonce.

  • CSP: /test/csp.html
  • CSP with nonce: /test/csp_nonce.html
  • CSP with ES module: /test/csp_esm.html
  • CSP with ES module and nonce: /test/csp_esm_nonce.html