Saafe Non-AA SDK

A secure, lightweight, customizable React iframe SDK to render any application in an iframe.

Features

• 🔒 Secure iframe communication with PostMessage API
• 🎨 Style-safe - no CSS leakage or DOM conflicts
• 📱 Supports popup modal mode with clean UI
• 🧩 Full TypeScript support
• 🪶 Lightweight (<50KB minified + gzipped)
• ⚛️ Compatible with React 16.8+ (using hooks)

Installation

npm install saafe-non-aa-sdk
# or
yarn add saafe-non-aa-sdk

Usage

Component API

import { RedirectNonAA } from 'saafe-non-aa-sdk';

function MyComponent() {
  const handleComplete = (data) => {
    console.log('Journey completed with data:', data);
  };

  const handleCancel = () => {
    console.log('Journey was cancelled');
  };

  return (
    <div>
      <h1>My Application</h1>
      
      <RedirectNonAA 
        url="http://localhost:5001"
        queryParams={{
          fi: "YXBxcncdVFxEHUVUQQ==",
          reqdate: "210420251005562",
          ecreq: "BUAO4s74gDvweksQVC9qjlRUZdZam2XZcYs3WxBsPEkGqrNGf4Ed-94CQQUHzNaLywXJjVZ8WyeZ5oDZBC556PLUm0mjdgK2v070_Y5UEfVe8OiVBFCaXBEk-TZCG4uj-IWjN_ZcKh-UT5RwtqpbXI4GYg4UN1O5rCqnr4IYsjzpD3cH-f9SNXDlJbo579cdAOHItRBEvYPDoRBQ4WJoEZZhFjSiRXxziTGeIxPHE4z5U0NPpYoQm676FaCwz6gXWpn7ARAx7Kk9irOQ09FqfMWevGMP_O9P6hOFjxNmulygXcXnI7DZtlUGG5wf2OlG"
        }}
        mode="popup"
        width="80%" 
        height="80%"
        buttonProps={{
          text: "Start Journey",
          className: "my-button",
          style: { backgroundColor: "blue", color: "white" }
        }}
        onLoad={() => console.log('Iframe loaded')}
        onComplete={handleComplete}
        onCancel={handleCancel}
        onError={(err) => console.error('Error:', err)}
      />
    </div>
  );
}

Programmatic API

import { triggerRedirect } from 'saafe-non-aa-sdk';

function MyComponent() {
  const startJourney = () => {
    const instance = triggerRedirect({
      url: "http://localhost:5001",
      queryParams: {
        fi: "YXBxcncdVFxEHUVUQQ==",
        reqdate: "210420251005562",
        ecreq: "BUAO4s74gDvweksQVC9qjlRUZdZam2XZcYs3WxBsPEkGqrNGf4Ed-94CQQUHzNaLywXJjVZ8WyeZ5oDZBC556PLUm0mjdgK2v070_Y5UEfVe8OiVBFCaXBEk-TZCG4uj-IWjN_ZcKh-UT5RwtqpbXI4GYg4UN1O5rCqnr4IYsjzpD3cH-f9SNXDlJbo579cdAOHItRBEvYPDoRBQ4WJoEZZhFjSiRXxziTGeIxPHE4z5U0NPpYoQm676FaCwz6gXWpn7ARAx7Kk9irOQ09FqfMWevGMP_O9P6hOFjxNmulygXcXnI7DZtlUGG5wf2OlG"
      },
      mode: 'popup',
      width: '80%',
      height: '80%',
      onComplete: (data) => console.log('Journey completed with data:', data),
      onCancel: () => console.log('Journey was cancelled'),
      onError: (err) => console.error('Error:', err)
    });
    
    // You can close the journey programmatically
    // instance.close();
  };

  return (
    <div>
      <h1>My Application</h1>
      <button onClick={startJourney}>Start Journey</button>
    </div>
  );
}

URL Construction

The SDK dynamically constructs the URL using the provided url and queryParams:

{url}?{queryParams as URLSearchParams}

For example:

http://localhost:5001?fi=YXBxcncdVFxEHUVUQQ==&reqdate=210420251005562&ecreq=BUAO4s74gDvweksQVC9qjlRUZdZam2XZcYs3WxBsPEkGqrNGf4Ed-94CQQUHzNaLywXJjVZ8WyeZ5oDZBC556PLUm0mjdgK2v070_Y5UEfVe8OiVBFCaXBEk-TZCG4uj-IWjN_ZcKh-UT5RwtqpbXI4GYg4UN1O5rCqnr4IYsjzpD3cH-f9SNXDlJbo579cdAOHItRBEvYPDoRBQ4WJoEZZhFjSiRXxziTGeIxPHE4z5U0NPpYoQm676FaCwz6gXWpn7ARAx7Kk9irOQ09FqfMWevGMP_O9P6hOFjxNmulygXcXnI7DZtlUGG5wf2OlG

API Reference

RedirectNonAA Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | url | string | Yes | - | The URL to load in the iframe | | queryParams | Record<string, string> | No | - | Query parameters to append to the URL | | mode | 'embedded' | 'popup' | No | 'popup' | Mode of the redirect | | width | string | number | No | '80%' | Width of the iframe | | height | string | number | No | '80%' | Height of the iframe | | buttonProps | ButtonProps | No | {} | Props for the trigger button | | onLoad | () => void | No | - | Callback when the iframe is loaded | | onComplete | (data: any) => void | No | - | Callback when the journey is completed | | onCancel | () => void | No | - | Callback when the journey is cancelled | | onError | (error: Error) => void | No | - | Callback when an error occurs |

ButtonProps

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | text | string | No | 'Start Journey' | Text to display on the button | | className | string | No | - | CSS class for the button | | style | CSSProperties | No | - | Inline styles for the button | | children | ReactNode | No | - | Custom content for the button |

triggerRedirect Options

Same as RedirectNonAA props, but without buttonProps. Additionally:

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | container | HTMLElement | No | document.body | Container element to render the iframe in (only for embedded mode) |

Security Features

• Uses sandbox attribute on iframes with minimal required permissions
• Validates origin of incoming messages
• Passes token parameters securely
• Uses CSS modules to prevent style leakage

License

MIT