AppDefender Web SDK

Client path

Full Client path (private package, mobile + web): Client integration.

Client integration

Gate 1 — every website stack

Local demo: /sdk/web/demo (add ?appId= from the console). Local script: http://127.0.0.1:3200/sdk/web/v1/appdefender.min.js. Never pass secretKey, encryption keys, or third-party private credentials into initialize.

await AppDefender.initialize({
  appId: "APP_ID",
  environment: "sandbox",
  appName: "Client website",
});
const launch = await AppDefender.launchSecurityCheck();
if (launch.decision === "BLOCK") return;

Install (npm or Yarn)

CDN (no private token): https://sdk.appdefender.dev/web/v1/appdefender.min.js. Do not use legacy @appdefender/web.

# .npmrc — paste the fragment Super Admin issues

npm install @appdefenderdev/sdk.web@1.0.4
# or
yarn add @appdefenderdev/sdk.web@1.0.4

# Optional kit
npm install @appdefenderdev/sdk.integration.web@1.0.4
# or
yarn add @appdefenderdev/sdk.integration.web@1.0.4

Framework adapters

React and Next.js wrap the first screen in AppDefenderGate. Angular registers appDefenderInitializer. Vue calls runGate before mount. Svelte calls startAppDefender in onMount / +layout.

import AppDefender from "@appdefenderdev/sdk.web";
import { AppDefenderGate } from "@appdefenderdev/sdk.web/react";
import { AppDefenderGate } from "@appdefenderdev/sdk.web/nextjs";
import { appDefenderInitializer } from "@appdefenderdev/sdk.web/angular";
import { runGate } from "@appdefenderdev/sdk.web/vue";
import { startAppDefender } from "@appdefenderdev/sdk.web/svelte";

How policy arrives

Super Admin and Client Admin change DevTools, automation, integrity, and risk thresholds remotely. The Client does not rebuild the website. A copied Production App ID on evil-domain.com is DOMAIN_MISMATCH and follows policy — Production defaults to BLOCK.

Browser
  │  public App ID + hostname
  ▼
AppDefender Edge
  ├── Application validation
  ├── Domain validation
  ├── Environment validation
  └── Non-sensitive policy
          │
          ▼
     Web RASP engine

Callbacks and authorize

await AppDefender.initialize({
  appId: "APP_ID",
  environment: "production",
  callbacks: {
    onReady: (state) => {},
    onRiskDetected: (event) => {},
    onPolicyUpdate: (policy) => {},
    onBlocked: (reason) => {},
    onSessionChanged: (state) => {},
  },
});
const launch = await AppDefender.launchSecurityCheck();
if (launch.decision === "BLOCK") return;

const decision = await AppDefender.authorize({
  action: "PAYMENT",
  resource: "ORDER_123",
});
// advisory only — the Client API must authorize

DevTools is a signal

The SDK can report DevTools, automation, iframe, and domain mismatch. It does not hide the Network tab. Policy maps a signal to MONITOR, CHALLENGE, STEP-UP, LIMIT, BLOCK, LOCK, or REVOKE.

KeysDefender on the web

Public site keys may be classified for restricted browser use. Confidential credentials stay on the KeysDefender broker.

const key = await AppDefender.getKey("MOENGAGE_APP_KEY");
// { released: false, keyName, reason: "WEB_BROKER_REQUIRED" }

KeysDefender

OTP

The browser must not call an SMS gateway. Use AppDefender.auth.requestOtp / verifyOtp. DLT PE ID, header, and template stay on the API.

DLT, OTP, and SMVDefender

Offline / cloud unavailable

The SDK applies the last signed cached policy plus local signals. Client Admin sets LOW=ALLOW, MEDIUM=MONITOR, HIGH=CHALLENGE, CRITICAL=BLOCK. Sensitive applications should not blindly fail-open.

Offline Threat Handling

One platform

Web and mobile share Policy Engine, Risk Engine, ATS / ATS Lite, KeysDefender, Sandbox / Production, Maker–Checker, and Super Admin / Client Admin.

React Native SDK