# Frontend - Prevent Token Exposure in Instrumented Applications

## **Problem**

If your application is deployed in environments that are **accessible outside your organization** or to users who should not have access to sensitive credentials, exposing a Sealights token in the frontend code can increase the risk of misuse. To reduce token exposure, you need a secure way to **instrument browser-based applications without embedding tokens** in client-side JavaScript.

## **Solution**

Enable **tokenless instrumentation** to remove the token from the browser configuration and route all browser agent traffic through a **Sealights HTTP Collector** installed in a secure internal network or a controlled access zone (such as a DMZ). The Collector acts as a secure proxy, mediating requests to Sealights and ensuring tokens remain protected.

In this mode, the **Collector communicates with the Sealights backend** and adds its own token to requests. The browser agent never handles or exposes any token.

This approach reduces token exposure and ensures **sanitized instrumentation** in external environments.

### **TL;DR**

* Use `--excludeTokenFromBrowserConfig` during instrumentation to enable tokenless mode.
* Configure the browser agent to communicate only with your Collector (`collectorUrl`).
* On the Collector, set `disableTokenValidation=true` to allow tokenless requests.

### **Configuration**

{% stepper %}
{% step %}
**Configure the HTTPS Collector**

{% hint style="info" %}
For [setup instructions](https://docs.sealights.io/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/https-collector/download-and-installation) and [configuration details](https://docs.sealights.io/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/https-collector/usage-with-other-agents#instrumenting-an-application-for-the-browser-using-collector-url), refer to the dedicated [Sealights HTTP Collector Documentation](https://docs.sealights.io/knowledgebase/setup-and-configuration/sealights-agents-and-plugins/https-collector)
{% endhint %}

* Ensure the Collector is running and accessible via HTTPS.
* Configure it to:
  * Cache and serve the browser agent bundle.
  * Forward API calls to the Sealights backend.
  * Disable token validation for browser traffic by setting its option `disableTokenValidation` to `true`
    {% endstep %}

{% step %}
**Enable Tokenless Mode in Instrumentation**

You can enable tokenless mode via environment variables or CLI flags in the `slnodejs` instrumentation step

{% tabs %}
{% tab title="Environment Variables" %}

```bash
SL_ExcludeTokenFromBrowserConfig=true
SL_collectorUrl=<YOUR_COLLECTOR_BASE_URL>
```

{% endtab %}

{% tab title="CLI" %}
{% code overflow="wrap" %}

```bash
slnodejs instrument [...] --excludeTokenFromBrowserConfig --collectorUrl <YOUR_COLLECTOR_BASE_URL>
```

{% endcode %}
{% endtab %}
{% endtabs %}
{% endstep %}
{% endstepper %}

{% hint style="success" %}
When properly configured, you'll see:

* In the Cockpit Live Agents page, a collector entry
* In the Browser Developer Console, the instrumented code without any token.
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sealights.io/knowledgebase/setup-and-configuration/troubleshooting-faq/node-javascript/frontend-prevent-token-exposure-in-instrumented-applications.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.