HTTP Header Settings

All about HTTP header settings for embedded content on the Staffbase platform.

The HTTP header plays a crucial part in displaying embedded content correctly in your Staffbase platform. Configure the frame-ancestor directives in the HTTP header of your pages, services, and plugins to make them embeddable on desktop and native.

Go to the website or service you want to embed and configure the HTTP header settings. You cannot configure the HTTP settings within the Staffbase platform.

Embedding into Staffbase works with the Content Security Policy (CSP) technology. To ensure that the rendering of embedded content is supported on all browsers, copy the following templates and replace the placeholders with your platform’s URL and domain.

Set the CSP entry for the frame-ancestors directive as:

Content-Security-Policy: frame-ancestors 'self' http://{appdomain} https://{appURL} http://staffbase.com capacitor://{appdomain} capacitor://staffbase.com;
  • If your Staffbase subdomain is https://myapp.mydomain.com,

replace { } in the directive with the following parts of your application URL:

  • appURL: https://myapp.mydomain.com
  • appdomain: http://mydomain.com

Based on the above template and assuming your Staffbase subdomain is https://myapp.mydomain.com, the CSP you need to implement in your page of choice is the following:

Content-Security-Policy: frame-ancestors 'self' http://mydomain.com https://myapp.mydomain.com http://staffbase.com capacitor://mydomain.com capacitor://staffbase.com;

The frame-ancestors specify valid parents that embed a page. You need multiple parents for embedding in Staffbase, you can add them separated by a space.

  • ‘self’: Gives permission for the website you want to embed
  • http://mydomain.com: Gives permission for your domain used in Staffbase
  • https://myapp.mydomain.com: Gives permission for your subdomain used in Staffbase
  • http://staffbase.com: Gives permission for Staffbase’s own domain
  • capacitor://mydomain.com and capacitor://staffbase.com: Enables embedding to work on mobile apps

Staffbase uses Capacitor for cross-platform development. Therefore, it is required that the embedding also works with the mobile apps.