Running into many CSP Errors when embedding my form

Support
1

I built out some forms using many API calls to salesforce, airtable, zapier etc.
Here is an example form: Lead Gen Cloud Page

we’re using the following code to embed feathery on a page, on a site which has a very strict Content Security Policy (CSP).

<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script> <div id='container'></div> <script> (() => { Feathery.init('<SDKKey>'); // Change to true if your form uses Stytch or Firebase for login. const loginEnabled = false; Feathery.renderAt('container', { formId: '<formId>' }, loginEnabled); })(); </script>

We believe we’ve sorted out the various fetch directive allowances (connect-src, script-src) as follows:
connect-src

  • api.feathery.io/api/
  • api-static-2.feathery.io/api/custom-request/
  • cdn.feathery.io/api/panel/

script-src

  • cdn.jsdelivr.net/npm/@feathery/react@latest/umd/

Are there any other CSP directives we need to be aware of to ensure smooth integration with Feathery JS embeds?

2

Hi @bercohen,

Because CSP violations will be logged in the browser console, you should see clear error messages indicating which directive is failing. That’s the best indicator of what additional allowances might be necessary.

If you run into any specific errors, feel free to share them, and we can help pinpoint the exact adjustments needed.

1 Like