Skip to main content

# Web component integration

A web component is a tool that enables flawless integration of BAF with a web interface.

## How it works​

- The web component operates through an integration created on the server side.

- The integration acts as the entry point, defining the settings and data the component will use.

- Without an integration, the component cannot function.

## Integration structure​

- Integrations are linked to accounts.

- Each account can have multiple integrations.

- However, one integration can only belong to one account.

- Integrations function independently, allowing different settings for different integrations within the same account.

Example: One integration may collect biometric data with recorded videos, while another does not.

## Key rules​

- A web component can only work with one integration at a time.

- Switching integrations requires restarting the component with new parameters.

- Updating settings: Simply update the integration parameters—no need to modify the component itself.

However, users who have already loaded the component must refresh their page to apply new settings.

## Domain verification​

A web component retrieves settings only if the request originates from a domain specified in the integration settings. The system verifies the request headers in this order:

1. Origin – Must fully match the domain in the integration, including schema (e.g., https://example.com).

2. Referrer – Checked like Origin, but the last slash (/) is ignored.

3. Host – Matches only the domain and port.

If both Origin and Referrer headers exist, only Origin is checked.

Multiple integrations can be created for the same domain.

note

Integration management is available only in the dashboard.

## Web component authentication​

To protect the API with which the component interacts, the system provides two authentication modes. The authentication settings themselves are available on the Web Components page.

### IntegrationId mode​

In this mode, the component uses the integration ID for authentication. This method is provided for backward compatibility and is not recommended for use with newer versions of the web component.

If an attacker obtains the integration ID in any way, they will be able to access the API without hindrance. Since the integration ID is easily viewable in the browser's network requests, this mode does not provide an adequate level of security.

### JWT mode​

In this mode, the component authenticates using a short-lived JWT token. The main idea is that the token is generated by the integrator immediately before starting the validation process through the web component. It is assumed that the token generation itself is protected by some additional factor.

For example, the user confirms their phone number, after which the integrator generates a JWT and passes it to the component. If the token can be generated without verifying any factors, its main purpose is lost — an attacker will gain access to the API through a token generated for themselves.

A separate API is provided for token generation, protected by a PK token.

Additionally, it is possible to protect the JWT token generation API by checking the client secret. In this context, a client refers to the program that initialises the component and communicates with the server.

For example, a browser, mobile application, or program inside a self-service kiosk.

danger

For client secret verification to work, the client must be considered confidential. This means that the secret embedded in the client cannot be retrieved externally.

A browser running on a user device cannot be considered confidential — the user has full access to the browser's data. At the same time, a browser running inside a self-service kiosk makes it possible to securely hide the secret from an attacker.

When client secret verification is enabled, the token generation API starts requiring this secret as input. Each integration contains its own set of secrets: when generating a token, the provided secret must match one of the secrets configured for that component.