HomeEngagementOther resources
Guides

CSP-compliant personalization

Suggest Edits

Learn how to configure the Bloomreach JavaScript SDK to comply with Content Security Policy (CSP) requirements. This guide walks you through implementing nonce-based authentication, eliminating the unsafe-eval directive while maintaining web personalization, experiments, and managed tags.

Key benefits

  • Regulatory compliance: Meet strict security requirements without compromising personalization features.
  • Enhanced security: Removes reliance on JavaScript's Function() constructor, eliminating unsafe-eval risks.
  • Industry-standard approach: Uses nonce-based CSP with strict-dynamic directives.
  • Full functionality: Maintains complete weblayer, experiment, and managed tag capabilities.

Use case examples

  • Regulated industries: Financial services requiring strict CSP compliance for security audits.
  • Enterprise security policies: Organizations prohibiting unsafe-eval directives in production.
  • Global CSP enforcement: Single-page applications enforcing CSP policies across all pages.

How it works

The SDK uses a nonce-based approach where your server generates a unique cryptographic token for each page load. This nonce is added to both the CSP header and the Bloomreach SDK script tag. The strict-dynamic directive instructs the browser to trust any script loaded by a nonce-bearing script, even when not explicitly listed in the CSP. The SDK injects personalization content as external script tags rather than using inline code execution.

Prerequisites

Before implementing CSP-compliant personalization, ensure you have:

  • Browser compatibility: Chrome 52+, Edge 79+, Firefox 52+, or Safari 15.4+. Internet Explorer is not supported.
  • Server-side capabilities: Ability to generate cryptographically random nonces on the server for each request.
  • CSP header access: Permission to modify Content-Security-Policy headers to include nonce values and strict-dynamic directive.
  • SDK integration: Existing Bloomreach JavaScript SDK integration with ability to modify the SDK snippet.

Enable CSP script integration

Follow these steps to configure CSP-compliant personalization on your website.

Step 1: Add CSP configuration to SDK

Add the csp_script_integration configuration option to your SDK initialization:

!function(e,n,t,i,r,o){function s(e){if(...
exponea.start({
    target: "PROJECT_TARGET",
    token: "PROJECT_TOKEN",
    
    // Enable CSP script integration
    csp_script_integration: true,
});

This configuration tells the SDK to use external script tags instead of inline code execution.

Step 2: Generate server-side nonce

Generate a unique nonce for each request. The nonce must be cryptographically random and change with every page load.

Example in Node.js:

import crypto from "crypto";

app.use((req, res, next) => {
    res.locals.nonce = crypto.randomBytes(16).toString("base64");
    next();
});

Store the nonce so it's accessible when rendering both your CSP header and the SDK script tag.

Step 3: Configure CSP header

Add the nonce and strict-dynamic to your CSP header:

Content-Security-Policy: script-src 'self' 'nonce-{{nonce}}' 'strict-dynamic';

Replace {nonce} with the server-generated value from Step 2.

Important: The nonce value must be unique for each page load. Reusing nonces across requests defeats the security purpose of CSP.

Step 4: Add nonce to SDK script tag

Inject the nonce attribute when rendering the Bloomreach SDK script in your page template:

<script nonce="{{nonce}}">
// Bloomreach SDK initialization code
!function(e,n,t,i,r,o){function s(e){if(...
...
exponea.start({
    csp_script_integration: true,
});
</script>

The nonce value in the script tag must exactly match the nonce in your CSP header.

Verify the implementation

After completing the setup:

  1. Load a page with the CSP-compliant configuration.
  2. Open your browser's developer console.
  3. Check for CSP violation errors. If configured correctly, you shouldn't see any violations related to Bloomreach scripts.
  4. Verify that personalization features (weblayers, experiments, managed tags) load and function as expected.

If you encounter CSP violations, verify that:

  • The nonce value matches between the CSP header and script tag.
  • The nonce is unique for each page load.
  • The csp_script_integration: true option is present in your SDK configuration.
  • Your CSP header includes the 'strict-dynamic' directive.

Limitations

Affected channels: This CSP implementation applies to weblayers, experiments, and managed tags only.

Non-flickering experiments: The CSP-compliant implementation doesn't currently support non-flickering experiments. Use standard experiments instead.

Configuration method: Enable CSP compliance using the csp_script_integration: true configuration option in your SDK snippet. There's no feature flag available.

Implementation overhead: Requires server-side infrastructure to generate unique nonces for each page load and inject them into both CSP headers and script tags.

Browser support: Not supported in Internet Explorer. Requires modern browsers with CSP Level 3 support.

Technical complexity: You must modify both server-side code (for nonce generation) and client-side integration (for nonce injection).

Related resources

Updated about 13 hours ago