As is, the code says:

posthog.init('phc_6iWc02QPj39avNptuPSS0il7XQtdGkvCMXRiAewcT6m', {
  prepare_external_dependency_script = (script) => {
    script.nonce = '<your-nonce-value>'
    return script
  },
  prepare_external_dependency_stylesheet = (stylesheet) => {
    stylesheet.nonce = '<your-nonce-value>'
    return stylesheet
  }
})

But, we're passing an object to init. So prepare_* are keys, not variables. The = should be ::

posthog.init('phc_6iWc02QPj39avNptuPSS0il7XQtdGkvCMXRiAewcT6m', {
  prepare_external_dependency_script: (script) => {
    script.nonce = '<your-nonce-value>'
    return script
  },
  prepare_external_dependency_stylesheet: (stylesheet) => {
    stylesheet.nonce = '<your-nonce-value>'
    return stylesheet
  }
})

In a React app using the posthog-js package, how to set the nonce attribute for the recorder.js and surveys.js scripts that are fetched dynamically?

I'm encountering some difficulties configuring PostHog in my application due to Content Security Policy (CSP) restrictions. I hope someone can provide some guidance or suggestions to help resolve these issues!

Context: I'm trying to implement PostHog for event tracking in my application, but the CSP settings are causing conflicts, resulting in errors related to the use of inline scripts, inline styles, and restrictions on external fonts.

Is there a CSP configuration recommended by the PostHog community that can help minimize these issues without compromising security?

Here’s my current implementation:

In my CSP header, which directives do I need to include *.posthog.com to? Just connect-src and script-src, or do I need to add others?