Using a Content Security Policy (CSP)

A Content Security Policy is a security layer that helps prevent cross-site scripting (XSS) and other code injection attacks. If you use a CSP on your website, you must configure it to allow the Puzzel loader script to execute correctly.
There are two primary methods to configure your CSP for this purpose.

Method 1 - nonce

Using a nonce
This method uses a cryptographic nonce (number used once) to allow specific inline scripts to run. It requires your web application to generate a unique, random string for each page request, which is then added to both your CSP header and the script tag.

1. Update Your CSP Header
Add https://*.puzzel.com and the nonce source expression to the script-src directive in your Content-Security-Policy HTTP header.

 Content-Security-Policy: script-src 'self' https://*.puzzel.com 'nonce-{SERVER_GENERATED_NONCE}';

Replace {SERVER_GENERATED_NONCE} with the unique nonce generated for that specific page load.

2. Add the nonce to the Script
Next, add the same server-generated nonce value to two places within the Puzzel loader script tag:
In the opening <script> tag.
In the loader.setAttribute('nonce', ...) line for the dynamically loaded script.

<script nonce="{SERVER_GENERATED_NONCE}" type="text/javascript">
(function (a, b) {
    var loader = a.createElement('script');
   loader.type = 'text/javascript';
   loader.src = 'https://app-cdn.puzzel.com/public/js/pzl_loader.js';
   loader.setAttribute('id', 'pzlModuleLoader');
   loader.setAttribute('data-customer-id', b);
    // Add the same nonce here for the dynamically loaded script
   loader.setAttribute('nonce', "{SERVER_GENERATED_NONCE}");
   a.body.append(loader);
})(document, 'YOUR_CUSTOMER_ID');
</script>

Ensure you replace {SERVER_GENERATED_NONCE} with your dynamically generated value and 'YOUR_CUSTOMER_ID' with your actual Puzzel Customer ID.

Method 2 - unsafe-inline

Using 'unsafe-inline'
This method involves adding the 'unsafe-inline' keyword to your CSP header. This directive permits the execution of all inline scripts and event handlers on the page.

Update Your CSP Header
Add both 'unsafe-inline' and https://*.puzzel.com to the script-src directive in your CSP header.

Content-Security-Policy: script-src 'self' https://*.puzzel.com 'unsafe-inline';

When using this policy, the Puzzel script does not require any nonce attributes to be added.