Embedding a Single Liferay Page in an iFrame

Issue

• I'd like to embed a form into other websites using an iframe so that guest users can fill and submit it.
• Content-Security Policy (CSP) configurations are instance-level, not page-specific. So, if I use the CSP beta feature and add a frame-ancestors configuration, it will be applied to every page on the site, not just to the form page. Additionally, this configuration would enable users to navigate to other (login-required) pages within the iframe.
• Is there a way to configure CSP for a single page, so I can embed only that page in an iframe on any external site, without manually adding those sites to the instance-wide CSP frame-ancestors configuration, and without allowing users to navigate away from that page from within the iframe?

Environment

• DXP 7.4 Quarterly Release
• 2024.Q3

Resolution

• CSP settings apply to the entire Liferay instance, not individual pages.
• While you can exclude certain URLs from the CSP, this is primarily intended for servlets, not for page rendering. The same CSP configuration will still appear in the headers of all pages unless explicitly excluded via URL.
• Liferay does not support per-page CSP policies. While CSP can be disabled for specific URLs, there's no way to customize the policy itself for individual pages. This limitation restricts fine-grained control over embedding.
• The frame-ancestors directive in CSP only controls which external sites can embed the current Liferay page. It does *not* restrict which other pages on the Liferay site can be subsequently loaded within the iframe after the initial embedded page has been loaded. Since Liferay doesn't offer per-page CSP policies, this means that any other pages on your Liferay site that users navigate to within the iframe might not be embeddable if they don't have their own frame-ancestors configuration that explicitly allows that external site.

Workaround:

To isolate your embeddable form and prevent navigation to other pages within the iframe, create a separate Liferay site that contains only the form page. Give this site its own unique virtual host (domain name). This allows you to control embedding of that specific page and the content delivered via the iframe.

1. Create a new site in Liferay specifically for the form page.
2. Assign a dedicated virtual host to this site (e.g., forms.example.com). This virtual host must be different from the one used for your primary Liferay site.
3. In the CSP settings for the external websites where you'll embed this form, whitelist the form's dedicated virtual host in the frame-ancestors directive. For instance, the CSP configuration on external websites would look like frame-ancestors: 'self' forms.example.com;. The 'self' is needed if the website wants to embed the form in its own iframes.

This method isolates the embeddable content, avoids the need for per-page CSP configurations within Liferay, and improves security by minimizing the content accessible via iframes.