Secure Embedded Report On Website Got Cross Domain Exception

[Anonymous]

Hi guys

I have a issue to embed a report to my website. I use File --> Embed (Securely embed this report in a website or portal​) option in the dropdown menu to get the embed link, then integrate the html iframe embed link to my website. 

The question is that when I try to access the embedded content in my website, it first asks me to enter my Power BI credentials (my account is Power BI Pro account). but I get only a "Loading" animation on my screen after login with a cross domain error. Here below is the error log shown in the console of browser devtool. Any one have a tutorial or guidance to resolve this issue. Thanks.

reportembed.common.bundle.min.js:40 Uncaught DOMException: Blocked a frame with origin "https://app.powerbi.com" from accessing a cross-origin frame.
at Function.t.requestLocalizedStrings (https://app.powerbi.com/13.0.7994.169/scripts/reportembed.common.bundle.min.js:40:7469)
at t.load (https://app.powerbi.com/13.0.7994.169/scripts/reportembed.common.bundle.min.js:40:7024)
at https://app.powerbi.com/13.0.7994.169/scripts/reportembed.common.bundle.min.js:40:7893
at https://app.powerbi.com/13.0.7994.169/scripts/reportembed.common.bundle.min.js:40:7901
at https://app.powerbi.com/13.0.7994.169/scripts/reportembed.common.bundle.min.js:40:7942
at https://app.powerbi.com/13.0.7994.169/scripts/reportembed.common.bundle.min.js:40:7971
t.requestLocalizedStrings @ reportembed.common.bundle.min.js:40
t.load @ reportembed.common.bundle.min.js:40
(anonymous) @ reportembed.common.bundle.min.js:40
(anonymous) @ reportembed.common.bundle.min.js:40
(anonymous) @ reportembed.common.bundle.min.js:40
(anonymous) @ reportembed.common.bundle.min.js:40
powerbiportal.explore.bundle.min.js:7 Uncaught TypeError: Cannot read property 'utils' of undefined
at powerbiportal.explore.bundle.min.js:7
at powerbiportal.explore.bundle.min.js:7
at powerbiportal.explore.bundle.min.js:7
at powerbiportal.explore.bundle.min.js:7
(anonymous) @ powerbiportal.explore.bundle.min.js:7
(anonymous) @ powerbiportal.explore.bundle.min.js:7
(anonymous) @ powerbiportal.explore.bundle.min.js:7
(anonymous) @ powerbiportal.explore.bundle.min.js:7
reportembed.bundle.min.js:6 Uncaught TypeError: Cannot read property 'ContentTileType' of undefined
at reportembed.bundle.min.js:6
at reportembed.bundle.min.js:6
at reportembed.bundle.min.js:6
at reportembed.bundle.min.js:6
(anonymous) @ reportembed.bundle.min.js:6
(anonymous) @ reportembed.bundle.min.js:6
(anonymous) @ reportembed.bundle.min.js:6
(anonymous) @ reportembed.bundle.min.js:6

[swooters85]

I also got the same issue, but only in Chrome. In Firefox it works fine.

[Bruny]

I got the same error too, I dont understand why this happens just with google chrome. Someone here got a anwsers about this? Im trying to resolve this at a long time but nothing works. 

If someone got a answers about this, please shared with us

[Anonymous]

I am also getting same errro. But, when I am refreshing my report, it is working fine.

Please suggets, if anyone have solution on it.

[Anonymous]

HI there, Do you guys have any news on this. I got the same problem today.

It still worked fine until yesterday (Or at least, I have never met this kind of problem till yesterday), but right now, everytime a user signs into the report for the first time, this error appear.

Of course, I just need to press F5, refresh the page and see the report, but users in my organization are very irritated with this.

[Anonymous]

Hi,

I get this error too, specifically when using Chrome, but not when using Firefox or Edge. If I do a refresh after the sign in, it all works without error, and the report displays just fine. 

It is hard to understand the error because both the script that is executing and the iframe appear to have origin "https://app.powerbi.com". 

So is it maybe a bug in Chrome? How could I prove that?

My iframe tag looks like this:

<iframe title="Report" style={{display: "block", background: "#000", border: "none", height: "calc(100vh - 30px)", width: "100%"}} src="OUR EMBEDDED REPORT URL GOES HERE" />

and we are using react, so that tag is output during a react render.

Thanks for any suggestions for how to debug this further or work around it.

Martin

Error message in dev tools console:

ERROR DOMException: Blocked a frame with origin "https://app.powerbi.com" from accessing a cross-origin frame.
at t.requestLocalizedStrings (https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:649294)
at t.load (https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:648904)
at new t (https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:648455)
at https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:69273
at Zr (https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:69500)
at Kr (https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:68640)
at https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:69376
at Zr (https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:69500)
at Kr (https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:68640)
at https://app.powerbi.com/13.0.8730.154/scripts/reportEmbed.min.js:1:69311