---
Source: https://docs.microblink.com/blinkid/v8000/sdk/web/resources
Title: Hosting resources
Description: Guide to hosting WebAssembly resources for BlinkID Web SDK in your application
---

# Hosting resources

BlinkID Web uses web assembly (WASM) to run recognition and extraction code.
WASM resources are not automatically served—you must make them available at a publicly accessible URL before the SDK can load them.

There are two ways to handle WASM resource hosting: same-domain and cross-domain hosting.

## Same-domain hosting

If you can, host the WASM resources on the **same domain** as your web application.
This avoids all cross-origin [security complexities](https://w3c.github.io/webappsec-secure-contexts/).

To do that, copy the WASM assets from the library you're using (e.g., `node_modules/@microblink/blinkid/dist/resources`) into a publicly accessible folder on your web server.

BlinkID will, by default, look for the WASM resources on the same domain, and will try to load `{YOUR DOMAIN}/resources/blinkid-worker.js`.

## Cross-domain hosting

If you must host resources on a different domain (for example if you use a CDN), you **should** configure the application server headers and you **must** configure the WASM resource server headers.

### Configure headers on your main application server

To use the multi-threaded (`SharedArrayBuffer`) version of BlinkID, your primary web application should serve its HTML pages with the following two headers.

- `Cross-Origin-Opener-Policy: same-origin`: Isolates your page context from other top-level windows.
- `Cross-Origin-Embedder-Policy: require-corp`: Requires all embedded cross-origin resources to explicitly opt-in via CORS.

<Tabs queryString="server">
  <TabItem value="netlify" label="Netlify" default>

```toml
[[headers]]
  for = "/*"
  [headers.values]
    Cross-Origin-Opener-Policy = "same-origin"
    Cross-Origin-Embedder-Policy = "require-corp"
```

  </TabItem>
  <TabItem value="nginx" label="nginx">

```nginx
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
```

  </TabItem>
  <TabItem value="apache" label="Apache">

```apache
<IfModule mod_headers.c>
  Header set Cross-Origin-Opener-Policy "same-origin"
  Header set Cross-Origin-Embedder-Policy "require-corp"
</IfModule>
```

  </TabItem>
  <TabItem value="vercel" label="Vercel">

```json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
      ]
    }
  ]
}
```

  </TabItem>
</Tabs>

If you don't set these headers, BlinkID will fall back to a non-threaded version.
Your scanning session will still work, but will be slower.

### Configure headers on your resource server (CDN)

The server hosting your WASM files **must** return the following headers.

- `Access-Control-Allow-Origin`: Explicitly permits your web application's domain to fetch the resources.
- `Cross-Origin-Resource-Policy: cross-origin`: Required when your main app uses `Cross-Origin-Embedder-Policy: require-corp`, so the browser allows the cross-origin resource to be loaded.

<Tabs queryString="server">
  <TabItem value="netlify" label="Netlify" default>

```toml
[[headers]]
  for = "/*"
  [headers.values]
    "Access-Control-Allow-Origin" = "https://my-app-url.com"
    "Cross-Origin-Resource-Policy" = "cross-origin"
```

  </TabItem>
  <TabItem value="nginx" label="nginx">

```nginx
add_header Access-Control-Allow-Origin "https://my-app-url.com" always;
add_header Cross-Origin-Resource-Policy "cross-origin" always;
```

  </TabItem>
  <TabItem value="apache" label="Apache">

```apache
<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "https://my-app-url.com"
  Header set Cross-Origin-Resource-Policy "cross-origin"
</IfModule>
```

  </TabItem>
  <TabItem value="vercel" label="Vercel">

```json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "https://my-app-url.com" },
        { "key": "Cross-Origin-Resource-Policy", "value": "cross-origin" }
      ]
    }
  ]
}
```

  </TabItem>
</Tabs>

### Use resourcesLocation to specify the location of your WASM binary

To load the resources from the CDN, you must explicitly specify the location when loading BlinkID.

```js

const blinkid = await createBlinkId({
  licenseKey: "your license key here",
  //highlight-next-line
  resourcesLocation: "your CDN URL here", // BlinkID will append "/resources/blinkid-worker.js" to this value
});
```

The key thing to note here is that you should pass the base URL, and the SDK will append the rest of the path.


Last updated on Jul 24, 2026