# Prerequisites

The Keyless Web SDK has three conditions that must be met in order for it to run, these conditions mainly revolve around module loading, bundling and security headers.

### Run as Module

The main Javascript entrypoint of the `@keyless/sdk-web` or `@keyless/sdk-web-components` module which is `index.js` must be loaded as a module.

{% tabs %}
{% tab title="Headless" %}

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Keyless Web SDK</title>
  </head>
  <body>
    <script type="module">
      import { ... } from '@keyless/sdk-web/index.js'
    </script>
  </body>
</html>
```

{% endtab %}

{% tab title="Web Components" %}

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Keyless Web SDK Components</title>
  </head>
  <body>
    <kl-auth-or-enroll></kl-auth-or-enroll>
    <script src="@keyless/sdk-web-components/index.js" type="module"></script>
  </body>
</html>
```

{% endtab %}
{% endtabs %}

### Web Assembly Bundling

When building web applications it's extremely common to use a bundler, make sure yours is capable of bundling `.wasm` files.

### Security Headers

{% hint style="info" %}
This requirement applies only when using multi-threading, read more on [Multi-Threading](/web-sdk/web-sdk-reference/multi-threading.md)
{% endhint %}

The Web Assembly module requires two security headers to run, if these headers are unset or have unfit values you won't be able to use the Keyless Web SDK.

| Name                         | Value        |
| ---------------------------- | ------------ |
| Cross-Origin-Embedder-Policy | require-corp |
| Cross-Origin-Opener-Policy   | same-origin  |

In case you are loading resources from an external domain, make sure to load those resources in crossorigin, please read [Cross-Origin-Embedder-Policy: Avoiding Blockage With CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cross-Origin-Embedder-Policy#avoiding_coep_blockage_with_cors) for more details.


---

# 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.keyless.io/web-sdk/web-sdk-guide/prerequisites.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.
