Embed report containing embedded paginated report - Cross-origin error

[andyparkerson]

I am currently trying to embed a Power BI report onto my website that has a Paginated Report embedded into it. 

So there is Paginated Report A (A), Regular Report (B), website (C).

A is embedded into B. I want to embed B into C.

When I try to do that, I get the error 

Uncaught SecurityError: Failed to read a named property 'originalWindow' from 'Window': Blocked a 
frame with origin "https://paginated-reports.powerbi.com" from accessing a frame with origin 
"https://app.powerbi.com". Protocols, domains, and ports must match.

Is there a way I can do this, or does cross-origin error mean it can't be done?

[Poojara_D12 · Accepted solution]

Hi @andyparkerson 

What you’re encountering is a classic cross-origin security restriction enforced by web browsers, known as the Same-Origin Policy. When you try to embed a Power BI report (B) that itself contains an embedded Paginated Report (A), and then embed that combined report into your website (C), the browser detects that the inner iframe (from https://paginated-reports.powerbi.com) and the outer iframe or page (from https://app.powerbi.com) come from different origins. Because these origins differ in protocol, domain, or port, the browser blocks access between these frames for security reasons, causing the “Failed to read a named property ‘originalWindow’” error. This means that directly nesting a paginated report inside a Power BI report and then embedding that report on another site runs into fundamental browser security limits, so it generally cannot be done without special workarounds. Typically, to avoid this, you would embed either the Power BI report or the paginated report directly on your website separately, rather than embedding one inside the other, or use API-based embedding methods with proper authentication and token management to handle these scenarios. But directly nesting the two embedded reports inside each other in a cross-origin way will trigger these browser security restrictions and is not supported.

[v-achippa · Accepted solution]

Hi @andyparkerson,

Thank you for reaching out to Microsoft Fabric Community.

Currently, embedding a Power BI Report that contains an embedded Paginated Report into a web app is not supported due to cross-origin iframe restrictions.

This issue happens because the Power BI report (B) includes a Paginated Report (A), and each one loads from a different domain. When we try to embed that into the website (C), the browser blocks it due to cross-origin security restrictions.

So embed the Paginated Report (A) and the Power BI Report (B) separately into your website using two different embed tokens. This avoids the cross-origin issue and is fully supported.

If this post helps, then please consider Accepting as solution to help the other members find it more quickly, don't forget to give a "Kudos" – I’d truly appreciate it! 

Thanks and regards,

Anjan Kumar Chippa

[Poojara_D12 · Accepted solution]

Hi @andyparkerson 

What you’re encountering is a classic cross-origin security restriction enforced by web browsers, known as the Same-Origin Policy. When you try to embed a Power BI report (B) that itself contains an embedded Paginated Report (A), and then embed that combined report into your website (C), the browser detects that the inner iframe (from https://paginated-reports.powerbi.com) and the outer iframe or page (from https://app.powerbi.com) come from different origins. Because these origins differ in protocol, domain, or port, the browser blocks access between these frames for security reasons, causing the “Failed to read a named property ‘originalWindow’” error. This means that directly nesting a paginated report inside a Power BI report and then embedding that report on another site runs into fundamental browser security limits, so it generally cannot be done without special workarounds. Typically, to avoid this, you would embed either the Power BI report or the paginated report directly on your website separately, rather than embedding one inside the other, or use API-based embedding methods with proper authentication and token management to handle these scenarios. But directly nesting the two embedded reports inside each other in a cross-origin way will trigger these browser security restrictions and is not supported.