Add CSP documentation page

[Copilot]

Adds documentation for configuring CookieChimp with Content Security Policy (CSP) using nonce attributes.

Changes

• New page docs/advanced/content-security-policy.mdx covering:
  • General introduction to Content Security Policy (CSP) and its importance
  • Explanation of how CSP works with third-party scripts
  • Detailed explanation of nonces as a security mechanism
  • Nonce attribute configuration for the CookieChimp script tag
  • Required CSP header directives (script-src, style-src, connect-src, frame-src)
  • Tips for additional integrations (e.g., Meta Pixel)
• Added page to navigation under Advanced section in docs.json

Example usage

<script nonce="YOUR_SERVER_NONCE" src="https://cookiechimp.com/widget/abc123.js"></script>

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;

• Fixes Create a page for CSP #45

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Create a page for CSP</issue_title>
<issue_description>This is some of the instructions on how it works that we can make into a guide:

.mt-8{"x-data": "{ open: false }"}
      %h6.font-semibold.leading-6.text-gray-900.flex.items-center.gap-2.cursor-pointer{"@click": "open = !open"}
        %i.fas.fa-shield-halved.text-primary
        %span Using Content Security Policy (CSP)?
        %i.fas.fa-chevron-down.ml-1.transition-transform.duration-200.text-gray-500{":class": "open ? 'rotate-180' : ''"}
      
      .mt-3.text-sm.text-gray-600.space-y-3.border.border-gray-200.rounded-lg.p-4.bg-gray-50{"x-show": "open", "x-collapse": true, "x-cloak": ""}
        %p.text-pretty
          If your website uses Content Security Policy (CSP) with a
          %code.bg-gray-200.px-1.rounded nonce
          attribute, you can configure CookieChimp to work with it by adding a nonce to our script tag.
        
        %p.font-medium.text-gray-700.mt-3 How it works:
        %ol.list-decimal.pl-5.space-y-2.mt-2
          %li
            Add a
            %code.bg-gray-200.px-1.rounded nonce
            attribute to the CookieChimp script tag with your server-generated nonce value.
          %li
            CookieChimp will automatically detect the nonce and apply it to all dynamically created CSS and JavaScript elements.
          %li
            This ensures all our resources comply with your CSP policy.
        
        %p.font-medium.text-gray-700.mt-4 Example with nonce:
        .mt-2.bg-gray-900.rounded.p-3.overflow-x-auto
          %pre.text-sm.mb-0
            %code.language-html.text-gray-100
              = '<script nonce="YOUR_SERVER_NONCE" src="https://cookiechimp.com/widget/' + current_account.hashid + '.js"></script>'
        
        %p.mt-4.text-pretty.text-gray-500.italic
          %strong Note:
          Replace
          %code.bg-gray-200.px-1.rounded YOUR_SERVER_NONCE
          with a cryptographically secure random value generated by your server for each page request.
        
        %p.font-medium.text-gray-700.mt-4 Required CSP Headers:
        %p.text-pretty.mt-2
          Your Content-Security-Policy header must allow CookieChimp resources. Here's a recommended configuration:
        
        .mt-2.bg-gray-900.rounded.p-3.overflow-x-auto
          %pre.text-sm.mb-0
            %code.language-text.text-gray-100
              :preserve
                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;
        
        %ul.list-disc.pl-5.space-y-1.mt-3.text-sm
          %li
            %code.bg-gray-200.px-1.rounded script-src
            \- Allows our widget script and dependencies from cdn.cookiechimp.com
          %li
            %code.bg-gray-200.px-1.rounded style-src
            \- Allows consent modal stylesheets from cdn.cookiechimp.com
          %li
            %code.bg-gray-200.px-1.rounded connect-src
            \- Allows API requests to log consent and fetch translations
          %li
            %code.bg-gray-200.px-1.rounded frame-src
            \- Allows rendering the preferences modal and embedding the privacy portal vendor list
        
        %p.mt-3.text-pretty.text-gray-500.italic.text-xs
          %strong Tip:
          If you're using additional features like Meta Pixel integration, you may need to add
          %code.bg-gray-200.px-1.rounded https://connect.facebook.net
          to your script-src directive.
```</issue_description>

## Comments on the Issue (you are @copilot in this section)

<comments>
</comments>

• Fixes Create a page for CSP #45

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[danielpaul]

@copilot say and talk about CSP in general and also about how nonces also work as one of the mechanisms we support.

[Copilot]

@copilot say and talk about CSP in general and also about how nonces also work as one of the mechanisms we support.

Added a general introduction to CSP explaining what it is and why it matters, plus a detailed section on how nonces work as a security mechanism. See commit 252c6a1.