Configure your website to allow embedding into Uberflip content

---

If you want to embed content from your other websites into your Uberflip Hub, you may need to configure your website's Content Security Policy and/or X-Frame-Options to allow this. Here's how.

---

 

Before you begin

• This article provides recommendations about how to configure your website. In general, changes like this would need to be approved and implemented by your website administrator and/or IT department.
• The person who implements these recommendations will need to be familiar with how to modify the Content Security Policy and/or X-Frame-Options of your website, as well as have the appropriate access privileges to do so.

 

Objective

In Uberflip, you can embed content from an external source (such as another website) into your Hub Items using an iframe. There are a few different ways you can do this:

• Manually, by inserting <iframe> tags in the Item Editor's source code view
• Using the iFramer app
• Using the Sales Assist app's My Items functionality

However, when you do this, you may see an error message instead of the content you're trying to embed. This is because websites are commonly configured to prevent their content from being displayed in an iframe.

To resolve (or avoid) this issue with websites that you own, you can configure your website's iframe restrictions to allow exceptions for your Hub. In this article, we'll look at where those restrictions are typically implemented, and how you can implement the necessary exceptions for your Hub.

 

Technical background

As a security measure to combat clickjacking attacks, website administrators will sometimes configure the following mechanisms to prevent their website from being iframed by another website:

• The frame-ancestors directive of a website's Content Security Policy header
• The X-Frame-Options header

The default configuration of these mechanisms will prevent iframing of the website in all cases, including authorized uses such as embedding content from a website you own into your own Uberflip Hub. To allow for authorized uses while still maintaining protection against unauthorized/malicious use, these mechanisms each support the ability to selectively disable the restriction:

• The frame-ancestors directive of the Content Security Policy can be configured with a list of excepted URLs, which you can use to define specific URLs that are permitted to iframe your website
• The X-Frame-Options header can be removed from specific pages that you want to be able to iframe

 

Modify your Content Security Policy frame-ancestors directive

If your website uses a Content-Security-Policy header with a frame-ancestors directive, you can specify exceptions for your Hub URLs in that directive.

To do this, ensure the directive is not set to 'none', i.e.:

Content-Security-Policy: frame-ancestors 'none';

Instead, set the directive to 'self' and add the URLs of your Hub(s), i.e.:

Content-Security-Policy: frame-ancestors 'self' [Hub URL(s) here];

See below for guidelines specific to how your Hub's custom domain is set up.

For a Hub on a subdomain:

Use this configuration if your Hub is on a subdomain like https://hub.mycompany.com/ (this includes Hubs on Uberflip default co-branded subdomains like https://mycompany.uberflip.com/):

Content-Security-Policy: frame-ancestors 'self'
hub.mycompany.com
mycompany.uberflip.com;

• Replace the example URLs (hub.mycompany.com and mycompany.uberflip.com) with your Hub's actual URLs.
• Make sure to include your Hub's default co-branded subdomain URL (similar to mycompany.uberflip.com) in the list — even if you do not actively use it.
• This example is for a single Hub (with the example custom subdomain URL hub.mycompany.com): if you have multiple Hubs, add their URLs as needed.

For a Hub on a subdirectory:

Use this configuration if your Hub is on a subdirectory like https://www.mycompany.com/hub/:

Content-Security-Policy: frame-ancestors 'self'
www.mycompany.com/hub
mycompany.uberflip.com;

• Replace the example URLs (www.mycompany.com/hub and mycompany.uberflip.com/) with your Hub's actual URLs.
• Make sure to include your Hub's default co-branded subdomain URL (similar to mycompany.uberflip.com) in the list — even if you do not actively use it.
• This example is for a single Hub (with the example custom subdirectory URL www.mycompany.com/hub): if you have multiple Hubs, add their URLs as needed.

Wildcard option:

For both subdomain and subdirectory Hubs, you can also simplify the directive by specifying URLs using wildcards instead, like this:

Content-Security-Policy: frame-ancestors 'self'
*.mycompany.com
mycompany.com/*
*.uberflip.com;

• This will allow iframing on all URLs that match the wildcard, i.e. all subdomains of mycompany.com, all subdirectories of mycompany.com, and all subdomains of uberflip.com.
• Replace all instances of mycompany.com with your actual website/Hub URLs.
• You can remove the non-applicable URL, e.g. remove mycompany.com/* if your Hub uses a subdomain, and vice-versa.

 

Remove the X-Frame-Options header

If your website uses an X-Frame-Options header with a DENY or SAMEORIGIN directive, you will need to remove this header from any page that you want to be able to iframe in your Hub.