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.
You must configure the HTTP header on the website or service you want to embed, not within the Staffbase platform.
How embedding works
Embedding content into Staffbase uses Content Security Policy (CSP). The frame-ancestors directive specifies valid embedding sources and ensures browser compatibility.
Staffbase also uses Capacitor for mobile app development, so your configuration must support both desktop and mobile environments.
You need the following to enable embedding in Staffbase:
- You have access to configure the HTTP header of the website or service you want to embed.
- You know your Staffbase domain and subdomain. For example,
http://mydomain.com
CSP headers for embedding in Staffbase
Staffbase supports two types of CSP headers for embedding:
- New CSP headers
- Legacy CSP headers
The key difference is that the new CSP headers use https for the Staffbase domain and URL, while the legacy CSP headers use both http and https. It is important to note that the capacitor:// scheme remains unchanged in both types.
Starting with the Q1 2026 Release (February 2026), Staffbase will discontinue support for legacy CSP headers. You need to take action only if use legacy CSP headers for embedding content in your Staffbase platform. To ensure continued compatibility, update your configurations to use the new CSP headers.
If you use SAML Integrations, custom plugins, the Embedded Pages plugin or widgets, or external video providers for embedding, ensure your CSP headers are updated accordingly. Newly released features may require the new CSP headers for proper functionality.
Set the CSP entry for the frame-ancestors directive as:
Content-Security-Policy: frame-ancestors 'self' https://{appdomain} https://{appURL} http://staffbase.com capacitor://{appdomain} capacitor://staffbase.com https://localhost;- 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:
https://mydomain.com
Example
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 https://localhost;
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 embedhttps://mydomain.com: Gives permission for your domain used in Staffbasehttps://myapp.mydomain.com: Gives permission for your subdomain used in Staffbasehttp://staffbase.com: Gives permission for Staffbase’s own domaincapacitor://mydomain.comandcapacitor://staffbase.com: Enables embedding to work on mobile appshttps://localhost: Enables embedding to work in local development
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 http://localhost;- 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
Example
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 http://localhost;
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 embedhttp://mydomain.com: Gives permission for your domain used in Staffbasehttps://myapp.mydomain.com: Gives permission for your subdomain used in Staffbasehttp://staffbase.com: Gives permission for Staffbase’s own domaincapacitor://mydomain.comandcapacitor://staffbase.com: Enables embedding to work on mobile appshttp://localhost: Enables embedding to work in local development
Deprecated CSP header
Staffbase uses Capacitor for cross-platform development. Therefore, it is required that the embedding also works with the mobile apps.