Add CSP documentation page with nonce configuration guide

Co-authored-by: danielpaul <333233+danielpaul@users.noreply.github.com>

Author: Copilot

docs.json

@@ -62,7 +62,8 @@
               "docs/features/identify-users",
               "docs/advanced/custom-update-consent-button",
               "docs/advanced/custom-css",
-              "docs/advanced/callbacks-events"
+              "docs/advanced/callbacks-events",
+              "docs/advanced/content-security-policy"
             ]
           }
         ]

docs/advanced/content-security-policy.mdx

@@ -0,0 +1,46 @@
+---
+title: "Content Security Policy (CSP)"
+description: "Configure CookieChimp to work with Content Security Policy using nonce attributes."
+icon: "shield"
+---
+
+If your website uses Content Security Policy (CSP) with a `nonce` attribute, you can configure CookieChimp to work with it by adding a nonce to our script tag.
+
+## How it Works
+
+1. Add a `nonce` attribute to the CookieChimp script tag with your server-generated nonce value.
+2. CookieChimp will automatically detect the nonce and apply it to all dynamically created CSS and JavaScript elements.
+3. This ensures all our resources comply with your CSP policy.
+
+## Example with Nonce
+
+```html
+<script nonce="YOUR_SERVER_NONCE" src="https://cookiechimp.com/widget/abc123.js"></script>
+```
+
+<Note>
+  Replace `YOUR_SERVER_NONCE` with a cryptographically secure random value generated by your server for each page request.
+</Note>
+
+## Required CSP Headers
+
+Your Content-Security-Policy header must allow CookieChimp resources. Here's a recommended configuration:
+
+```text
+Content-Security-Policy:
+  script-src 'nonce-YOUR_SERVER_NONCE' https://cookiechimp.com https://*.cookiechimp.com;
+  style-src 'nonce-YOUR_SERVER_NONCE' https://cookiechimp.com https://*.cookiechimp.com;
+  connect-src https://cookiechimp.com https://*.cookiechimp.com;
+  frame-src https://cookiechimp.com https://*.cookiechimp.com;
+```
+
+### CSP Directives Explained
+
+- `script-src` - Allows our widget script and dependencies from cookiechimp.com
+- `style-src` - Allows consent modal stylesheets from cookiechimp.com
+- `connect-src` - Allows API requests to log consent and fetch translations
+- `frame-src` - Allows rendering the preferences modal and embedding the privacy portal vendor list
+
+<Tip>
+  If you're using additional features like Meta Pixel integration, you may need to add `https://connect.facebook.net` to your `script-src` directive.
+</Tip>