problem in calling external API from within hubspot extension

[SMukhhopadhya]

Hello,

I am trying to create a public app. Since serverless is not going to work so I created a backend which is hosted in aws and I am trying to call the API. 

1. I have created a API, created a domain using ngrok (an https call is required to be created, hence used it )

2. I made the call using the following call. 

try {
const response = await fetch('https://ec9b-54-158-1-10.ngrok-free.app/tracking', {

method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});

3. I get the following error. 

Refused to connect to 'https://ec9b-54-158-1-10.ngrok-free.app/tracking' because it violates the following Content Security Policy directive: "connect-src none".

4. I find that the iframe sandbox has the following security policy and hence whenever I make a call I get an error that security policy is violated.
<iframe sandbox="allow-scripts allow-same-origin" src="https://static.hubspot-extensions.com/ui-extension/v1/sandbox.html" ...>

Under such a situation how do I call the hosted backend ? Since it is a public app so earlier it was suggested of not using serverless. A pointer in the direction would be helpful.

[zach_threadint · Accepted solution]

Hi @SMukhhopadhya 👋

Have you added the relevant domains to the "allowUrls" array in your public-app.json file (see this HubSpot documentation)?

// Taken directly from HubSpot documentation: https://developers.hubspot.com/docs/guides/crm/public-apps/fetching-data
// See "Specify URLs to fetch from" section
// ----------------------------------------

// Example public-app.json
{
  "name": "My public app",
  "uid": "my-public-app",
  "description": "This is my public app.",
  "logo": "./my-company.png"
  "allowedUrls": [
    "https://app.example.com",
    "https://app.example2.com:8080",
    "https://api.example.com/user/",
    "https://api.example2.com/user"
  ]
 ...
}

I hope that proves helpful. Please let me know if you have any follow-up questions.

[SMukhhopadhya]

The other way of avoiding it ( I am not sure)  might be creating a serverless function. The extensions call the serverless functions. The serverless functions call the backend AWS API.

The problem here is that I am not able to upload a serverless function. I have been trying to look through  to find out how a serverless functions configuration files should look like without success. 

Does there exists a git project where there is some basic code with serverless function. I tried to move the public-app.json from within <project_root>/src/app to <project_root> and constantly getting errors as the following. 
[ERROR] No *-hsmeta.json files found, make sure you are inside a project

Searching the internet someone recommended that the serverlessDir is relative to the srcDir. But I am not sure if there is any mistake I am doing. 

{
"name":"Hubspot UPS AppCard",
"platformVersion":"2023.2",
"srcDir":"src",
"serverlessDir":"../serverless"
}

But I could not find the serverless function anywhere when I did hs project upload.
~

[zach_threadint · Accepted solution]

Hi @SMukhhopadhya 👋

Have you added the relevant domains to the "allowUrls" array in your public-app.json file (see this HubSpot documentation)?

// Taken directly from HubSpot documentation: https://developers.hubspot.com/docs/guides/crm/public-apps/fetching-data
// See "Specify URLs to fetch from" section
// ----------------------------------------

// Example public-app.json
{
  "name": "My public app",
  "uid": "my-public-app",
  "description": "This is my public app.",
  "logo": "./my-company.png"
  "allowedUrls": [
    "https://app.example.com",
    "https://app.example2.com:8080",
    "https://api.example.com/user/",
    "https://api.example2.com/user"
  ]
 ...
}

I hope that proves helpful. Please let me know if you have any follow-up questions.

[SMukhhopadhya]

oh yes, I had already done that , highlighted in bold. Please find my public-app.json as the sample. That had not solved the problem.

{
"name": "Hubspot UPS AppCard 04112025",
"uid": "get-started-public-app",
"description": "An example to demonstrate how to build a public app with developer projects.",
"allowedUrls": ["https://api.hubapi.com",
"https://wwwcie.ups.com",
"https://54.158.1.10:3000/tracking",
"https://ec9b-54-158-1-10.ngrok-free.app/tracking"
],
"auth": {
"redirectUrls": ["http://localhost:3000/oauth-callback"],
"requiredScopes": ["crm.objects.deals.read", "crm.objects.deals.write","crm.objects.contacts.read", "crm.objects.contacts.write","oauth"],
"optionalScopes": [],
"conditionallyRequiredScopes": []
},
"support": {
"supportEmail": "support@example.com",
"documentationUrl": "https://example.com/docs",
"supportUrl": "https://example.com/support",
"supportPhone": "+18005555555"
},
"extensions": {
"crm": {
"cards": [
{
"file": "./extensions/example-card.json"
}
]
}
},
"webhooks": {
"file": "./webhooks/webhooks.json"
},
"serverless": {
"functions": {
"call-ups": {
"file": "call-ups.js",
"method": "GET",
"path": "/call-ups"
}
}
}
}

[MKatewa · Accepted solution]

Hi @SMukhhopadhya 

To make API requests within a HubSpot UI Extension, you should use hubspot.fetch() instead of the native fetch() method.
I recommend reviewing the official documentation here:
https://developers.hubspot.com/docs/guides/crm/public-apps/fetching-data

I hope this helps! If it resolves your issue, please consider marking this as the accepted solution and giving it an upvote to assist others in the community as well.

Thanks!

[Jaycee_Lewis]

Hi, @SMukhhopadhya 👋 Thanks for your question! I'd like to invite some of our community experts to the conversation — hey @zach_threadint @Kevin-C  @Mike_Eastwood have you tackled anything like this in your recent project work? Thanks! — Jaycee