Custom CSS styles not applied to iframe-embedded pages in Partner Portal

CRM Adobe Experience Cloud
, , , , , , , ,
1

We’ve implemented custom CSS for our Partner Portal to maintain brand consistency, but the styles are not being applied to pages that are loaded within iframes. Our partner portal embeds several external dashboards and reports in iframe elements, and these embedded pages don’t inherit any of our custom styling. The main portal pages look perfect with our branding, but the iframe content remains unstyled with default Adobe Experience Cloud appearance. We’ve tried adding the CSS link in the iframe source pages, but those pages are served from a different subdomain and the stylesheets won’t load due to what appears to be CORS restrictions. Here’s how we’re loading the iframe:

<iframe src="https://analytics.partner.aec.com/dashboard"
        class="portal-iframe"></iframe>

The branding inconsistency is confusing for our partners who see styled portal navigation but unstyled content areas. Is there a way to apply custom CSS across iframe boundaries in aec-2021’s Partner Portal module, or do we need a different approach for maintaining brand consistency?

system 2

Your branding inconsistency issue requires addressing three fundamental aspects of how iframe-embedded content handles styling in the Partner Portal.

First, iframe CSS loading is constrained by browser same-origin security policies that prevent parent pages from injecting styles into iframe content when the iframe source is on a different origin. Your main portal (presumably on partner.aec.com) cannot directly style content loaded from analytics.partner.aec.com because browsers treat subdomains as separate origins. The solution requires loading stylesheets directly within the iframe source pages. Since you control the analytics subdomain, add your custom CSS link tags to the HTML head of those pages:

<link rel="stylesheet" href="https://assets.partner.aec.com/css/brand.css">

The critical point is that these stylesheets must either be hosted on the same origin as the iframe content OR properly configured for cross-origin access.

Second, CORS for stylesheets needs explicit configuration on your stylesheet server. When the analytics subdomain tries to load CSS from a different origin (like a central assets server), the browser performs a CORS check. Your assets server must respond with appropriate headers allowing the analytics subdomain to load the resources. Configure your assets server (whether it’s a CDN, nginx, or Apache) to send these headers:


Access-Control-Allow-Origin: https://analytics.partner.aec.com
Access-Control-Allow-Methods: GET

For multiple subdomains, you can either list them all or use a wildcard pattern. The key is ensuring the stylesheet server explicitly permits cross-origin loads. Additionally, ensure your stylesheets are served over HTTPS - mixed content policies in modern browsers will block HTTP stylesheets loaded into HTTPS pages.

Third, brand consistency across iframe boundaries requires architectural planning beyond just CSS loading. Consider creating a shared component library that both your main portal and iframe content can reference. This ensures consistent styling, but also consistent behavior and interaction patterns. For aec-2021’s Partner Portal, implement a theming system where all embedded content pulls from a centralized theme configuration. Use CSS custom properties (variables) defined at the root level of each page - both parent and iframe - so theme updates propagate consistently.

The recommended architecture: establish an assets subdomain (assets.partner.aec.com) with proper CORS headers, host your brand CSS there, and reference it from all your portal pages including iframe sources. This provides centralized style management while satisfying browser security requirements. For iframe content you don’t control (truly external partners), consider using postMessage API to communicate theme preferences, allowing external pages to adapt their styling to match your brand without direct CSS injection.

This draft is based on general Adobe Experience Cloud knowledge. It has not been verified against your specific version and environment. Practitioners: verify the steps and share your experience below.

3

You can’t directly style iframe content from the parent page due to browser security restrictions. If the iframe source is on a different origin, you’re blocked by same-origin policy. The only way to style iframe content is to modify the source pages themselves.

4

The CORS issue is definitely your main blocker here. When the iframe source is on a different subdomain (analytics.partner.aec.com vs your main portal domain), browsers prevent cross-origin stylesheet loading for security reasons. You need to configure CORS headers on the analytics subdomain to allow your stylesheet origin. Check with your infrastructure team about adding the appropriate Access-Control-Allow-Origin headers to the analytics server responses.

5

Before going down the CORS configuration route, consider whether you really need iframe embedding. Iframes create security and styling challenges. Could you integrate the analytics content directly into your portal pages using the Adobe Experience Cloud API? That would give you complete styling control without cross-origin complications. If iframes are necessary for isolation, you might need to host the custom CSS on the same subdomain as the iframe source.

6

I’ve dealt with this exact scenario. The iframe CSS loading issue has two potential solutions depending on your infrastructure access. First option: if you control the analytics subdomain, deploy your custom CSS files there and reference them in the iframe source pages’ HTML. Second option: use a shared CDN for your stylesheets that both domains can access, and configure proper CORS headers on the CDN. The key is ensuring the stylesheet origin matches or is explicitly allowed by the iframe source domain.

8

We do control the analytics subdomain, so deploying CSS there is feasible. But we’d prefer a centralized approach where we maintain styles in one location rather than duplicating across multiple subdomains. Is there a way to make that work?

9

For centralized CSS management, set up a dedicated assets subdomain (like assets.partner.aec.com) that serves all your stylesheets. Configure CORS to allow all your partner portal subdomains to load from it. Then reference that assets domain from both your main portal and iframe source pages. This gives you single-source-of-truth for styles while satisfying browser security requirements.