Embed an existing About page

It’s possible to embed an existing About page from your organization’s website directly into Aviary. This allows organizations to display About pages from their websites rather than manually adding information to the About Your Organization profile section in Aviary. The webpage will then be displayed to users in an embedded iframe when viewing the organization’s About page on the Aviary platform.

Follow these steps to embed an external webpage into your Aviary organization’s About page:

Expand the Organization tab in the admin menu and click the Profile link.

Scroll to the About this Organization profile section. Click the Tools menu and choose <> Source Code from the dropdown list.

Enter the following code into the Source Code window. Replace the URL in the iframe src tag with the address for your organization’s external About page.

<style>

#target {

width: 100%;

height: 1000px;

overflow-y: auto;

overflow-x: auto;

resize: both;

position: relative;

z-index: 2;

}

iframe {

width: 100%;

height: 100%;

border: none;

}

</style>

Click the Save button to save the code and close the Source Code window.

Scroll to the bottom of the Profile page and click the Update Profile button to save the changes.

The embedded webpage will then be displayed on the Aviary organization’s About page.

Note: Embedding an external webpage into Aviary may require configuring additional settings on your organization’s web server. See below for more information about troubleshooting and configuring your web server to allow iframe embeds.

Iframe embed requirements

If you want to embed your website inside our platform using an iframe, you must configure your server to allow iframe embedding.

Modern web browsers enforce security policies that may block pages from being displayed inside an iframe. If your web server is not configured correctly, users may see a blank page or an error similar to:

To protect your security, Firefox will not allow this page to be displayed if another site has embedded it.

⁠

Why this happens

This error is caused by security headers sent from your web server. Modern web browsers block iframe embedding when certain HTTP security headers are present, such as:

X-Frame-Options

Content-Security-Policy (frame-ancestors)

These security headers are designed to prevent clickjacking attacks, but they must also be configured properly to allow iframe embedding on trusted platforms.

⁠

Configuration requirements

1. X-Frame-Options Header

This header controls whether your page can be embedded.

❌ Blocking configurations

The following values will prevent iframe embedding:

X-Frame-Options: DENY

X-Frame-Options: SAMEORIGIN

✅ Required action

Either:

Remove the X-Frame-Options header entirely (not recommended).

Replace it with a properly configured Content Security Policy (recommended).

⁠

2. Content Security Policy (CSP)

Modern web browsers use the frame-ancestors directive in Content Security Policies to control iframe embedding.

You must allow the Aviary organization’s URL in your CSP header.

Example:

Content-Security-Policy: frame-ancestors ‘self’

https://subdomain.aviaryplatform.com⁠

;

If multiple domains need access:

Content-Security-Policy: frame-ancestors ‘self’

https://ourdomain.com⁠

https://app.ourdomain.com⁠

⁠

Note: Replace https://subdomain.aviaryplatform.com with the Aviary organization’s subdomain where the webpage will be embedded.

⁠

3. Check for Meta tags blocking embedding

Ensure your webpage’s HTML code does NOT include any restrictive meta tags like: <meta http-equiv="X-Frame-Options" content="deny">

⁠

4. HTTPS

Because the Aviary Platform uses the secure hypertext transfer protocol (HTTPS), your website must also use HTTPS. Web browsers will block any insecure (HTTP) webpages that are embedded inside iframes on a secure (HTTPS) website.

⁠

Browser testing

After configuring your web server and embedding the webpage in your organization’s Aviary Profile settings, try viewing your organization’s Aviary About page using different browsers.

Aviary currently supports Chrome, Firefox, Safari, and Edge. Firefox tends to enforce stricter iframe policies. If the page loads correctly in Aviary without displaying errors in these browsers, the embedded website’s server is configured correctly.

⁠

Troubleshooting

If embedding a webpage in your Aviary organization’s About section still fails:

Check for errors in the response headers using browser developer tools.

Confirm X-Frame-Options is not set to DENY or SAMEORIGIN.

Verify the Content-Security-Policy includes the domain where the webpage will be embedded.

Check for CDN or proxy configurations (Cloudflare, Nginx, etc.) that may override the headers.

⁠

Security best practices to remember

Only allow embedding for trusted domains.

Avoid enabling iframe embedding globally unless necessary.

Use Content Security Policy (CSP) frame-ancestors instead of disabling security protections completely.