Content Security Policy

Content Security Policy (CSP) is a security mechanism defending against content injection attacks like XSS. At the most basic level, it is a set of rules that restricts or green lights what content loads onto your website. It safeguards websites and apps from clickjacking, XSS, and malicious code injections. CSP employs rules to control content loading, making it a vital security standard for all website operators.

Front recommends two methods for specifying what is safe to load:

• connect-src—Allows you to specify the exact domains that you want to allow code from.
• nonce—Allows your server to inject a key into the response payload that tells the client browser to only execute scripts the server explicitly allows.

Implement through connect-src

Implement the following directives to ensure that Front Chat works correctly with your CSP across all regions:

👍

You can remove regions that do not apply to you

The provided directives includes all regions for Front servers. You can omit servers from regions you know do not apply to you (for example, if you know your Front instance does not run on any servers in Europe, you can remove the eu directives). If you are unsure which servers apply to your instance, leave all of them in place.

connect-src:
  chat-assets.frontapp.com
  chat.frontapp.com
  us-west-1-chat-server.frontapp.com
  us-west-2-chat-server.frontapp.com
  eu-west-1-chat-server.frontapp.com
  wss://front-us-realtime.ably.io
  wss://front-eu-realtime.ably.io
  https://chat-webhook.frontapp.com
  *.bugsnag.com
  https://*.browser-intake-datadoghq.com

img-src:
  chat.frontapp.com
  chat-assets.frontusercontent.com

style-src:
  blob:

📘

The Bugsnag and Datadog directives are not required for Front Chat to work with your CSP. However, Front highly recommends including them so that our developers can investigate and fix performance and security issues that may arise.

Implement through nonce

One of the possible ways to specify a CSP script-source is via nonce-<unique val>. This mechanism leverages a nonce that is generated on the server randomly (and used only once) to inject the proper CSP directive into both the header and content of the response so the browser knows it can securely evaluate the scripts in the page.

To do so, first add a line to your CSP that specifies a nonce-based script-source, such as:

Content-Security-Policy:
  script-src 'nonce-2726c7f26c'

The value must begin with nonce and the 2726c7f26c portion must be generated randomly and never used for more than one request.

For more details about using CSP nonces, see Mozilla's MDN documentation.

After you have the nonce value set up, you must inject the nonce value from the your CSP (2726c7f26c in the example above) when you generate the page that contains the Front Chat widget. For example:

<script type="text/javascript" src="chat.bundle.js" nonce="2726c7f26c"></script>
<script nonce="2726c7f26c">
  window.FrontChat('init', {
    chatId: 'b107a36...', 
    useDefaultLauncher: true, 
    nonce: '2726c7f26c'
  });
</script>

📘

The nonce value must also be injected as a separate parameter when initializing Front Chat because it creates other script tags that need to leverage the same nonce value.