Iframe Security & Sandboxing

Secure Rendering via Iframes

The Supervised AI Bots plugin utilizes HTML <iframe> elements to render chatbots. This approach provides a layer of separation between your WordPress site and the Supervised AI service, ensuring that the bot's logic and the site's core functionality remain isolated.

Sandboxing & Isolation

To maintain high security standards and prevent script conflicts, each chatbot is loaded within a sandboxed environment. This isolation provides several key benefits:

• CSS Encapsulation: The styles defined within the chatbot (such as fonts, colors, and button layouts) do not bleed into your WordPress theme. Conversely, your site's CSS will not inadvertently break the chatbot's UI.
• JavaScript Security: By running in an iframe, the chatbot's JavaScript execution is scoped to its own window. This prevents potential conflicts with other WordPress plugins and mitigates risks associated with Cross-Site Scripting (XSS).
• Origin Protection: The bot communicates specifically with the Supervised AI backend, keeping its data processing separate from your WordPress database and user sessions.

Iframe Container Configuration

The plugin uses a dedicated CSS class structure to ensure the iframe remains responsive and correctly positioned within the popup interface.

Visual Dimensions

By default, the iframe is rendered within a container fixed to the following dimensions:

• Height: 670px
• Width: 400px (Max-width: 800px for larger displays)

Customizing the Container

If you need to adjust the security boundaries or the visual container, you can target the following CSS classes in your theme's stylesheet:

/* Adjusting the chatbot container size */
.popup-container {
    height: 700px; /* Example: increase height */
    width: 450px;  /* Example: increase width */
}

/* Customizing the iframe behavior */
.iframe-container iframe {
    border: none;
    width: 100%;
    height: 100%;
}

Content Security Policy (CSP)

When using iframes, it is important to ensure your site's Content Security Policy (CSP) allows for embedding content from the Supervised AI domain. If you have a restrictive CSP header, you may need to add the following directive:

Content-Security-Policy: frame-src 'self' https://supervised.co;

Security Best Practices for Bot URLs

When adding chatbot URLs in the administration interface:

1. Always use HTTPS: Ensure the URLs provided in the settings page start with https://. Modern browsers will block mixed content (loading an HTTP iframe on an HTTPS site).
2. Verified URLs: Only input URLs provided by your Supervised AI dashboard to ensure the integrity of the code being framed.
3. Shortcode Validation: When using the [supervised_ai_bot id="X"] shortcode, ensure the id corresponds correctly to the row number in your settings to avoid rendering unintended bot instances.