Skip to main content

Iframe Integration

The SwyftFilings Customer Portal can be easily integrated into your website using our secure iframe implementation. This method provides a seamless experience while maintaining robust security measures.

Security Features​

Our iframe integration includes several security measures to protect sensitive data:

  1. Content Security Policy (CSP)

    • Strict frame-ancestors directive
    • Prevents clickjacking attacks
    • Controls allowed sources for content

  2. Cross-Origin Resource Sharing (CORS)

    • Whitelist-based domain validation
    • Secure cross-origin communication
    • Protected API endpoints

  3. Authentication Token

    • JWT-based authentication
    • Time-limited session tokens
    • Encrypted customer data

  4. Domain Verification

    • Required domain registration
    • SSL/TLS certificate validation
    • IP address whitelisting

Implementation​

1. Register Your Domain​

Contact our support team to register your domain and receive the necessary credentials:

const PORTAL_URL = "swyftfilings.com/portal/embed";

2. Get the customer token​

{
    "data": {
        "token": TOKEN,
        "partner_id": PARTNER_ID
    },
    "success": true
}

Those parameters will be used to render the iframe.

3. Implement the Iframe​

Add the iframe to your webpage with the required security attributes:

<iframe
  src="https://app.swyftfilings.com/portal/embed?id={TOKEN}&partner-id={PARTNER_ID}"
  style="width: 100%; height: 800px; border: none;"
  sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
  referrerpolicy="strict-origin"
></iframe>

3. Add Security Headers​

Configure your web server to include necessary security headers:

Content-Security-Policy: frame-ancestors 'self' https://*.yourdomain.com
X-Frame-Options: ALLOW-FROM https://*.yourdomain.com
X-Content-Type-Options: nosniff

4. Color Customization​

You can customize color palette of the portal by providing to our team the following information:

export interface Palette {
  primary: PaletteColorOptions & {
    25: string
    50: string
    75: string
    100: string
    200: string
    300: string
    400: string
    500: string
    600: string
    700: string
    800: string
    900: string
    'dark-blue': string
    light: string
  }
  gray: PaletteColorOptions & {
    50: string
    100: string
    200: string
    300: string
    400: string
    500: string
    600: string
    700: string
    800: string
    900: string
    1000: string
  }
  success: PaletteColorOptions & {
    main: string
    50: string
    400: string
    500: string
    600: string
    700: string
    800: string
  }
  error: {
    50: string
    500: string
    700: string
    800: string
  }
  warning: {
    50: string
    500: string
    700: string
    secondary: string
  }
  text: {
    disabled: string
    main: string
    secondary: string
    link: string
  }
  white: string
  transparentWhite: string
  disabled: string
  black: string
  appBackground: string
}

NOTE: Not all the palette has to be provided, with just primary, appBackground and text will be enough to identify your brand.

Testing​

Use our sandbox environment for testing:

const SANDBOX_URL = "https://app.qa.swyftfilings.com/portal/embed";