Security & Iframe Policies

Security & Iframe Policies

To ensure the Supervised AI Chatbot functions correctly and securely within your WordPress site, it is important to understand how iframes interact with browser security policies.

Embedding Requirements

The Supervised AI Bots plugin displays chatbots using an <iframe> element. For a URL to load correctly within the bot popup, the target chatbot server must allow "framing" by your website's domain.

1. X-Frame-Options & CSP

If the chatbot URL does not load or shows a "Refused to connect" error, it is likely due to the source's security headers. The chatbot provider must not have an X-Frame-Options: DENY or SAMEORIGIN header active unless it specifically allows your domain.

For modern browsers, the recommended header to allow embedding is:

Content-Security-Policy: frame-ancestors 'self' your-wordpress-domain.com;

2. HTTPS Requirements

To prevent Mixed Content errors, the chatbot URL provided in the plugin settings must use the same protocol as your WordPress site.

• If your site uses https://, your chatbot URL must also start with https://.
• Modern browsers will block insecure http iframes on secure https pages.

Content Security Policy (CSP) for Your Site

If your WordPress site uses a custom Content Security Policy (via a security plugin or .htaccess), you must whitelist the Supervised AI domains to allow the chatbot to load and execute scripts.

Add the following to your CSP configuration:

frame-src 'self' https://supervised.co *.supervised.co;
script-src 'self' https://supervised.co *.supervised.co;

Sandbox & Permissions

The plugin renders the chatbot in a standard iframe container. By default, the iframe inherits the security context of the parent page but is isolated in terms of CSS and DOM manipulation.

Note on Styles: Because the chatbot runs inside an iframe, your WordPress theme's CSS will not affect the internal appearance of the chatbot. Customizations to the chatbot's internal look should be managed within the Supervised AI dashboard.

Best Practices for URL Management

• One URL per line: When adding bot URLs in the settings interface, ensure there are no trailing spaces or special characters.
• Direct Embed Links: Use only the direct chatbot interface URL. Do not use URLs that require a full-page redirect or secondary login, as these may fail within the iframe's restricted environment.

Troubleshooting Load Issues

If the chatbot popup appears but remains empty:

1. Open your browser's Developer Tools (F12).
2. Check the Console tab for "Refused to display... in a frame" errors.
3. Verify that the chatbot URL is accessible directly in a new browser tab.
4. Ensure no "Ad-Blocker" browser extensions are interfering with the Supervised AI domain.