Content Security Policy (CSP)

Introduction

Content Security Policy (CSP) is a powerful security mechanism that helps websites prevent various types of attacks, such as Cross-Site Scripting (XSS).

If you use a strict CSP on your website and plan to embed the Alive5 live chat widget, you may notice that the widget could be blocked by your browser unless properly configured.

In this article, we’ll show you how to easily update your CSP settings using the nonce method to ensure that the Alive5 widget loads smoothly and securely.

Why CSP can block the Alive5 widget

When you embed the Alive5 widget, it includes a small inline JavaScript block that dynamically loads our widget resources.

Browsers that enforce a strict CSP will block any inline JavaScript unless you explicitly authorize it using a nonce — a special, random value.

Using a nonce provides strong security while still allowing trusted inline scripts, like the Alive5 widget.

TL;DR

• There are 2 options - without nonce and using nonce
• Without nonce - replace existing widget code with embed script.
• Nonce method - generate a fresh random nonce for each page load. Include that nonce in your CSP script-src directive.
• Update your Content Security Policy header

Option 1: WITHOUT NONCE METHOD

If you prefer not to handle nonce generation, we recommend using our external loader script instead. This method avoids inline JavaScript and works with most strict CSP configurations.

1. Remove existing Alive5 widget JS code

Since we are embedding a new script, please remove any existing Alive5 widget JS code on your website. There should only be the Embed Script on your website, and the Alive5 widget code is no longer needed.

2. Embed Script:

<script src="https://alive5.com/js/a5app-loader.js" async defer data-widget_code_id="YOUR_WIDGET_ID_HERE"></script>

🔁 Replace YOUR_WIDGET_ID_HERE with your actual Alive5 widget ID.

3. Update CSP Header for External Script

Your Content Security Policy should allow scripts from Alive5:

Content-Security-Policy: script-src 'self' https://alive5.com; style-src 'self' 'unsafe-inline'; img-src 'self';

Option 2: WITH NONCE METHOD

1. Update existing Alive5 widget JS code

Add a nonce attribute to the <script> tag that embeds the Alive5 widget:

<script type="text/javascript" nonce="RANDOM_NONCE_GENERATED">
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) { return; }
  js = d.createElement(s); js.id = id;
  js.async = true;
  js.src = "https://alive5.com/js/a5app.js";
  js.setAttribute("data-widget_code_id", "YOUR_WIDGET_ID_HERE");
  fjs.parentNode.insertBefore(js, fjs);
}(document, "script", "a5widget"));
</script>

🔁 Replace RANDOM_NONCE_GENERATED with a real random string generated per page load.

🔁 Replace YOUR_WIDGET_ID_HERE with your actual Alive5 widget ID.

💡 Always use https://alive5.com (with HTTPS).

2. Update Your CSP Header

You must include the same nonce value in your CSP script-src directive.

Example:

Content-Security-Policy: script-src 'self' 'nonce-RANDOM_NONCE_GENERATED' https://alive5.com; style-src 'self' 'unsafe-inline'; img-src 'self';

• 'self' allows your own domain.
• 'nonce-RANDOM_NONCE_GENERATED' authorizes the inline script.
• https://alive5.com whitelists the Alive5 external scripts.

3. How to Generate a Nonce (Server-Side Example)

Here’s an example in Node.js to generate a random nonce:

const crypto = require('crypto');
const nonce = crypto.randomBytes(16).toString('base64');

// When responding to a request:
reply.header('Content-Security-Policy', `script-src 'self' 'nonce-${nonce}' https://alive5.com`);
reply.locals.nonce = nonce;

And in your HTML template:

<script type="text/javascript" nonce="{{nonce}}">
// Alive5 Widget code
</script>

Common Issues to Avoid

• Using an old or reused nonce: Always generate a fresh random nonce for every page load.
• Mismatched nonce: Ensure that the nonce value in the HTML exactly matches the CSP header.
• Missing HTTPS in the script source: Always use https://alive5.com.

Conclusion

Following the nonce method allows you to embed the Alive5 widget securely without disabling important CSP protections on your website. This way, you maintain a high level of security while still providing an excellent live chat experience for your visitors.

If you encounter any issues or need help adjusting your CSP settings, feel free to contact our support team !