SecureEmbed

@olib-ai/secure-embed

Securely embed third-party scripts (chat widgets, analytics, forms) without hardcoding API keys in your HTML/JavaScript. Uses Service Worker + WebAssembly encryption for runtime credential injection with maximum security.

The Problem

Modern websites need third-party embeds that require API keys:

<!-- DON'T DO THIS - API key visible to anyone -->
<script>
  window.intercomSettings = { app_id: "abc123secret" };
</script>

Anyone can view-source your page and steal your credentials.

The Solution

SecureEmbed v2.0 uses WebAssembly to protect your security logic from reverse engineering:

1. Credentials are encrypted at build time with domain-bound keys
2. Service Worker + Wasm intercepts requests to embed providers
3. Security logic is compiled to binary - algorithms can't be read from source
4. Decryption happens in memory - credentials never appear in source code
5. Domain verification ensures credentials only work on your site

Installation

npm install @olib-ai/secure-embed

Quick Start

1. Create a config file

// embed.json
{
  "provider": "intercom",
  "credentials": {
    "apiKey": "your-intercom-app-id"
  },
  "authorizedDomains": ["example.com", "www.example.com"]
}

2. Encrypt your credentials

npx @olib-ai/secure-embed encrypt --config embed.json --output public/.secure-embed

3. Copy the Service Worker and Wasm module

Copy these files to your public directory root:

# Service Worker (Wasm-protected)
cp node_modules/@olib-ai/secure-embed/dist/secure-sw.min.js public/secure-embed-sw.js

# WebAssembly crypto core
cp node_modules/@olib-ai/secure-embed/wasm/build/crypto-core.wasm public/secure-embed-core.wasm

4. Use in your app

React:

import { SecureEmbed } from '@olib-ai/secure-embed/react';

function App() {
  return (
    <SecureEmbed
      provider="intercom"
      configUrl="/.secure-embed/intercom.enc"
      onLoad={() => console.log('Chat loaded!')}
      onError={(err) => console.error(err)}
    >
      <div>Loading chat widget...</div>
    </SecureEmbed>
  );
}

Vanilla JavaScript:

import { SecureEmbed } from '@olib-ai/secure-embed';

SecureEmbed.init({
  provider: 'intercom',
  configUrl: '/.secure-embed/intercom.enc'
}).then(() => {
  console.log('Chat loaded!');
}).catch((err) => {
  console.error('Failed to load:', err);
});

Supported Providers

Chat Widgets

• Intercom - intercom
• Crisp - crisp
• HubSpot - hubspot
• Drift - drift

Analytics

• Google Analytics - google-analytics
• Mixpanel - mixpanel
• Segment - segment

Forms

• Typeform - typeform
• JotForm - jotform

Custom

Use custom provider for any third-party script.

Configuration Options

CLI Config File

{
  "provider": "intercom",
  "credentials": {
    "apiKey": "required-api-key",
    "apiSecret": "optional-secret",
    "metadata": {
      "portalId": "for-hubspot",
      "embedId": "for-drift"
    }
  },
  "authorizedDomains": ["example.com"],
  "expiresAt": "2025-12-31T23:59:59Z"
}

React Component Props

Prop	Type	Required	Description
provider	ProviderType	Yes	The embed provider
configUrl	string	Yes	URL to encrypted config
containerId	string	No	Custom container element ID
onLoad	() => void	No	Callback when loaded
onError	(error: Error) => void	No	Error callback
className	string	No	CSS class for container
style	CSSProperties	No	Inline styles
children	ReactNode	No	Loading state content
fallback	ReactNode	No	Error state content

React Hook

import { useSecureEmbed } from '@olib-ai/secure-embed/react';

function MyComponent() {
  const { init, destroy, isLoaded, isLoading, error, healthCheck } = useSecureEmbed();

  useEffect(() => {
    init({
      provider: 'intercom',
      configUrl: '/.secure-embed/intercom.enc',
    });
    return () => destroy('intercom');
  }, [init, destroy]);

  if (error) return <div>Error: {error.message}</div>;
  if (isLoading) return <div>Loading...</div>;
  return null;
}

Security Features

WebAssembly Protection

All security-critical operations are compiled to WebAssembly binary code:

• Cryptographic algorithms
• Domain validation logic
• Cache key generation
• Protocol message encoding
• Provider configurations

This makes reverse engineering extremely difficult compared to JavaScript.

Domain-Bound Encryption

Credentials are encrypted using a key derived from your domain. They can only be decrypted when running on an authorized domain.

AES-256-GCM

Industry-standard authenticated encryption ensures both confidentiality and integrity.

PBKDF2 Key Derivation

100,000 iterations of PBKDF2-SHA256 make brute-force attacks impractical.

Expiry Timestamps

Optional credential expiration prevents stolen configs from working indefinitely.

Subresource Integrity

SHA-384 hashes verify config files haven't been tampered with.

Memory-Safe Design

• Bounded cache (64 slots max)
• Automatic TTL-based eviction (1 hour)
• Explicit cleanup functions
• No memory leaks

Architecture

┌─────────────────┐     ┌──────────────────────────────┐     ┌─────────────────┐
│   Build Time    │     │          Runtime             │     │    Provider     │
├─────────────────┤     ├──────────────────────────────┤     ├─────────────────┤
│                 │     │                              │     │                 │
│  embed.json     │     │  Browser loads               │     │  Intercom API   │
│       │         │     │  encrypted .enc              │     │                 │
│       ▼         │     │       │                      │     │                 │
│  CLI encrypts   │     │       ▼                      │     │                 │
│  with domain    │────▶│  ┌────────────────────┐      │     │                 │
│  key + salt     │     │  │  Service Worker    │      │     │                 │
│       │         │     │  │  (9KB JS loader)   │      │────▶│  Receives       │
│       ▼         │     │  └─────────┬──────────┘      │     │  authenticated  │
│  .enc file      │     │            │                 │     │  request        │
│                 │     │            ▼                 │     │                 │
│                 │     │  ┌────────────────────┐      │     │                 │
│                 │     │  │  Wasm Crypto Core  │      │     │                 │
│                 │     │  │  (21KB binary)     │      │     │                 │
│                 │     │  │  - Decryption      │      │     │                 │
│                 │     │  │  - Domain check    │      │     │                 │
│                 │     │  │  - Cred injection  │      │     │                 │
│                 │     │  └────────────────────┘      │     │                 │
│                 │     │                              │     │                 │
└─────────────────┘     └──────────────────────────────┘     └─────────────────┘

Browser Support

• Chrome 68+
• Firefox 61+
• Safari 11.1+
• Edge 79+

Requires Service Worker and WebAssembly support.

TypeScript

Full TypeScript support with strict types:

import type {
  ProviderType,
  EncryptedConfig,
  CredentialPayload,
  EmbedConfig,
} from '@olib-ai/secure-embed';

API Reference

Core API

import { SecureEmbed, init, destroy, healthCheck } from '@olib-ai/secure-embed';

// Initialize an embed
await init({ provider: 'intercom', configUrl: '/config.enc' });

// Destroy an embed
await destroy('intercom');

// Check if service worker is healthy
const isHealthy = await healthCheck();

Crypto Utilities

import { encryptCredentials, decryptCredentials, verifyIntegrity } from '@olib-ai/secure-embed';

// Encrypt credentials for deployment
const encrypted = await encryptCredentials(payload, domains, provider, expiresAt);

// Decrypt credentials (used internally by Service Worker)
const decrypted = await decryptCredentials(config, currentDomain);

// Verify the SHA-384 integrity hash
const isValid = await verifyIntegrity(config);

Wasm Core (Advanced)

import { loadWasmCore, getWasmCore, releaseWasmCore } from '@olib-ai/secure-embed';

// Load the Wasm module manually
const core = await loadWasmCore();

// Get the loaded instance
const instance = getWasmCore();

// Release resources
releaseWasmCore();

File Sizes

File	Size	Purpose
secure-sw.min.js	~9 KB	Service Worker loader
crypto-core.wasm	~21 KB	Security logic (binary)
Total	~30 KB	Complete security layer

Limitations

• Service Workers require HTTPS (except localhost)
• WebAssembly must be supported by the browser
• Initial page load fetches encrypted config (small overhead)
• Some providers may detect Service Worker interception

Development

# Build everything
npm run build

# Build Wasm only
npm run build:wasm

# Run demo server
npm run demo

# Type check
npm run typecheck

License

MIT - Olib AI