Configure your website to allow embedding into Uberflip content

Follow

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.

What about third-party websites?

If you're having trouble when trying to iframe content from websites that you do not control (i.e. websites owned by third parties), your options are more limited. You can't force the third-party website to allow you to iframe their content, so you can either:

  • Ask the third-party website owner to modify their own iframe restrictions, e.g. if the website is owned by a partner
  • Avoid iframing the content and link to it instead

Note also that some websites will not allow iframing of a whole page, but do allow certain elements to be iframed: for example, YouTube and Facebook.

 

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

Note: Other clickjacking defense mechanisms

In addition to those noted here, there are also other mechanisms to combat clickjacking, such as JavaScript frame-busters/frame-killers. There are too many variations to cover in this article, so be sure to check with your website administrator/web developer: they should be able to advise you if your website uses any such mechanisms,  and how you can adapt the recommendations outlined in this article for your specific setup.

 

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.

Info

You can find documentation on how to configure this directive in MDN Web Docs: CSP: frame-ancestors.

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.

Info

You can find documentation on how to configure this header on a variety of common web servers technologies in MDN Web Docs: X-Frame-Options.

Important

  • While the X-Frame-Options header has an ALLOW-FROM directive, this is obsolete and should not be used.
  • As recommended by MDN, the Content-Security-Policy header with a frame-ancestors directive is generally preferred to using the X-Frame-Options header, especially as a replacement for the ALLOW-FROM directive.
  • If your website uses both the X-Frame-Options header and the Content-Security-Policy header, the X-Frame-Options header will take precedence in Safari and Internet Explorer.
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.