External API does not work with UI Extensions

Developer Support APIs & Integrations
1

I am developing a UI Extension using React and TypeScript. I am facing a Content Security Policy (CSP) block that I cannot resolve, even after configuring the permittedUrls.

The Scenario: I am trying to make a POST request to my external API from the React component. I have tried using both axios and hubspot.fetch, and both return the same blocking error in the browser console.

The Error: Refused to connect to ‘…’ because it violates the following Content Security Policy directive: “connect-src none”.

I appreciate any help!
Obs: Attached are some errors in addition to those I mentioned in the text.

1240170_1_error1.png

1240170_2_error2.png

2

Hi @maysaraujo

Thanks for sharing the details — CSP errors like connect-src ‘none’ can be really confusing, especially when you’ve already added permittedUrls.

I’d like to bring a few Community members into this conversation who are subject matter experts in UI Extensions, CSP, and hubspot.fetch.
@TTolley @evaldas @GRajput — hope you’re all having a great week! Have you run into UI Extensions where external API calls are blocked with connect-src none even after configuring permittedUrls? Any insight into what’s required (project config, environment/region constraints, calling via serverless/proxy, exact URL patterns, etc.) would be greatly appreciated.

Thanks in advance for any guidance you can share.
Best,
Victor