📎 iFrame: Technical Requirements for Embedding Third-Party Content

🔍 Contents

• HTTP Headers & CSP Policies

• HTTPS & Mixed Content Prevention

• Authentication & Cookies

• Quick Error Check

• Requirements Template for Third Parties

• Tips & Best Practices

• FAQ

HTTP Headers & CSP Policies

To display third-party content in an iFrame, the target website must explicitly allow embedding.

Blocking mechanisms:

• X-Frame-Options: DENY → always blocks embedding

• X-Frame-Options: SAMEORIGIN → only allows embedding on the same domain

• Content-Security-Policy: frame-ancestors ... → central for iFrame permission

Embedding is only allowed if one of the following conditions is met:

• No X-Frame-Options header is set

• The Content-Security-Policy explicitly allows the ValueStreamer domain, e.g.:

ℹ️ Note: If you are using a multi-tenant subdomain structure, wildcards like *.valuestreamer.de may need to be permitted.

HTTPS & Mixed Content Prevention

Modern browsers block HTTP content within HTTPS pages.

Requirements:

• The third-party URL must be accessible via https://

• A valid SSL certificate must be present

⚠️ Warning: HTTP content inside HTTPS iFrames is considered "Mixed Content" and will be blocked.

Authentication & Cookies

If the embedded page requires authentication, it must also work inside the iFrame.

Recommendations:

• Prefer token-based authentication (e.g. embed token, signed URL)

• Alternatively: SSO via SAML/OIDC with a shared identity provider

Technical limitations:

• Cookies must be set with SameSite=None; Secure

• Third-party cookies may be blocked by browser privacy settings

✨ Tip: If login fails inside the iFrame, offer a fallback link to "Open in new tab".

Quick Check for Display Issues

Use browser console for error diagnosis:

1. refused to display in a frame → blocked by X-Frame-Options or CSP

2. Mixed Content warning → HTTP URL embedded

3. CSP error regarding frame-ancestors

4. Cookies or SSO fail (e.g. session not established)

Requirements Template for Third Parties
Please allow embedding in iFrames for the following origin(s):

• https://app.valuestreamer.de

• https://*.valuestreamer.de

Recommended HTTP header:

Please remove or adjust X-Frame-Options: DENY or SAMEORIGIN if set.

The embedded URL must be reachable via HTTPS.

If login is required: Please support SSO or token-based authentication.

✨ Tips & Best Practices

• Coordinate early with the third party's IT team

• Best suited for integration: static dashboards, documentation pages, interactive forms

• Provide fallback options for incompatible content (e.g. open in new tab)

❓ FAQ

Why is the embedded page not displaying in the iFrame?

• Most commonly due to X-Frame-Options or frame-ancestors blocking

• HTTP instead of HTTPS

• Authentication via cookies fails

How can I check if embedding is blocked?

• Use browser console (network & security tab)

• Developer tools show blocking headers

What if the third party doesn’t allow embedding?

• Direct coordination with their IT is required

• Alternatives: open link in new tab or export content (PDF, screenshot)

Can embedded content be interactive?

• Yes, as long as there are no technical restrictions (e.g. blocked JS functions)

Is there a limit to embedded content?

• Not technically limited by ValueStreamer, but performance and security should be considered