# 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](https://docs.keyless.io/web-sdk/web-sdk-reference/multi-threading "mention")
{% 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.
