> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 0835c092-f880-4e71-99df-ac7b052eeda7
---

# no-native-http

> Prevent usage of browser HTTP APIs (fetch and XMLHttpRequest) in UI extensions.

The `no-native-http` rule prevents usage of browser HTTP APIs ([Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)) in UI extensions.

## Rule details

UI extensions run in a sandboxed web worker environment where browser HTTP APIs (`fetch()` and `XMLHttpRequest`) are intentionally replaced with error-throwing functions for security reasons.

All HTTP requests must go through either:

* [`hubspot.fetch()`](/apps/developer-platform/add-features/ui-extensions/fetching-data) for runtime HTTP requests with URL allowlisting.
* [Serverless functions](/apps/legacy-apps/private-apps/build-with-projects/serverless-functions) for backend API calls in privately distributed apps using platform version `2025.1`.

This rule detects and prevents usage of browser HTTP APIs that will fail at runtime.

<Info>
  `hubspot.fetch()` is not a one-to-one replacement for the browser `fetch()` method. For example, `hubspot.fetch()` can only call URLs that have been added to `permittedUrls` in your app's configuration. Learn more about [fetching data in UI extensions](/apps/developer-platform/add-features/ui-extensions/fetching-data).
</Info>

## Examples

### Browser fetch()

Instead of using `fetch()`:

```jsx theme={null}
// Incorrect
async function getData() {
  const response = await fetch('https://api.example.com/data');
  return response.json();
}
```

Use [`hubspot.fetch()`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#hubspot-fetch):

```jsx theme={null}
import { hubspot } from '@hubspot/ui-extensions';

async function getData() {
  const response = await hubspot.fetch('https://api.example.com/data');
  return response.json();
}
```

Destructuring from `hubspot` is also allowed:

```jsx theme={null}
import { hubspot } from '@hubspot/ui-extensions';

const { fetch } = hubspot;

async function getData() {
  const response = await fetch('https://api.example.com/data');
  return response.json();
}
```

### XMLHttpRequest

Instead of using `XMLHttpRequest`:

```jsx theme={null}
// Incorrect
function getData() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data');
  xhr.send();
}
```

Use [`hubspot.fetch()`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#hubspot-fetch):

```jsx theme={null}
import { hubspot } from '@hubspot/ui-extensions';

async function getData() {
  const response = await hubspot.fetch('https://api.example.com/data');
  return response.json();
}
```

## Related resources

* [Fetching data in UI extensions](/apps/developer-platform/add-features/ui-extensions/fetching-data)
* [hubspot.fetch() API](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#hubspot-fetch)