report embed problem

[Silko]

I tried to embed reports the same way as tiles with the new api for reports list. Tiles are working perfectly but when I try to embed a report I get this error:
Uncaught SecurityError: Blocked a frame with origin "https://app.powerbi.com" from accessing a frame with origin "my domain hidden". Protocols, domains, and ports must match.

I followed this tutorial:
https://powerbi.microsoft.com/en-us/documentation/powerbi-developer-integrate-a-power-bi-tile-or-rep...

Am I doing something wrong or is it a bug?

[Anonymous]

Power BI Supports for embed power BI dashboard on your website via IFrame.

Embed the powerBi report in html iFrame

[hxy0135]

HI,

I downloaded the sample,I registered my app and got back clientId and clientSecret. The when I run the code and clicked the button "GetReport", I got the empty response back. the following is the responseContent. I'd like to know why. Please help

{

"@odata.context":"http://api.powerbi.com/beta/myorg/$metadata#reports","value":[

]

}

[brenkehoe]

I have it the other way around wherby i can embed reports fine but when i try the loadTile function i get a javasccript error after posting the auth details to the iframe. The error occurs because it is trying to parse undefined. The reports work in the same page but not the tiles any ideas ?

Also i notice that standard users can view embedded reports with pro content is this by design ?

[JasonDunbar]

Hi @Silko,

@pmathew2000 - FYI too.

Having created API Embed samples already, I decided I'd integrate the ability to Embed a Report too. At first, I got to the same point as you, with the same cross origin javascript error.

[Edit] adding screenshot:

 

So, I decided I'd create a new Azure Web App and publish the Microsoft sample to see what we're doing wrong. The steps I took:

1. I cloned the Github repository - https://github.com/Microsoft/PowerBI-CSharp
2. I made a new Azure Web App and set up the necessary Client ID, Client Secret and granted the relevant privileges to the App.
3. I made the necessary changes to Response Uri in the Solution (https://github.com/Microsoft/PowerBI-CSharp/tree/master/samples/webforms/embed-a-report-into-an-app) and then hit publish from Visual Studio to publish to my Azure Web App.

Note: I did not modify any code in the solution that I cloned, other than to replace URIs and Settings

The result? Exactly the same.

It's not immediately obvious whether we're missing something or if it is indeed an issue. I'm raising this as an issue with Microsoft in the hope that we can find out and embed some reports soon 🙂

[pmathew2000]

Thanks,

I was able to get the report  by running the solution from  Visual Studio 2013 from my local machine. So it seems some permission issues.

[Silko]

@JasonDunbar thank you for taking your time with this. I hope we will soon find out anything about this issue. It would be great to embed reports as soon as possible 🙂

[wabreza]

Hey All,

I went through the sample app from https://github.com/Microsoft/PowerBI-CSharp and was able to successfully get a Power BI report to render.

One potential snag you may see will be making sure the Client ID you are using matches the url of  your application against the registered apps redirect url.

We have recently released a new app registration tool which should make this process super simple.  You can now register a new Power BI apps @ https://dev.powerbi.com/apps

[JasonDunbar]

Sorry folks, I've not been following along as I'm on Holiday (still am for a couple of weeks) and often have no internet connection for many days 🙂

Anyhow, just a quick update from my side... I have a case open with MSFT to investigate why it did not initially work as expected. Since then, slow progress on their side.

However, I kept checking back periodically to see if anything had changed and about a week or so after opening the support case, it magically started working as you'd expect. Both the sample from MSFT and my (slightly) modified version to make it more dynamic. Sure, there are still one or two script errors which I think people here have already pointed out, but it does at least render a report.

[Roshna]

I'm trying to embed Power BI report in a UWP app. I have followed all the steps in the tutorial but I get a continuous progress bar in the iframe and the report doesn't load. Any help to figure out this issue would be great!

[StefanPersson]

Hi

Can you please share what step you did for me it hangs after embed reporter if you click F12

You get following error message

SCRIPT5: Access is denied.

File: reportEmbed, Line: 1, Column: 1

Best Regards

Stefan

[Silko]

@wabreza: The sample app on https://github.com/Microsoft/PowerBI-CSharp doesn't help me a lot because I'm working in PHP. I checked redirect url in my registered app and it's the same. If it wouldn't be also dashboard tiles wouldn't work, but they do.

@StefanPersson: I used this API function to get the report list, then I chose embed url from the report list and follow the steps in this tutorial to embed the report.

[wabreza]

@Silko - Can you share your code so I can help troubleshoot?

[Silko]

It is just a copy paste from a tutorial:

<iframe width="500px" height="500px" id="iFrameEmbedTile" onload="postActionLoadReport();" src="<?= $embedUrl; ?>&width=<?= $width; ?>&height=<?= $height; ?>"></iframe>
<script>
	function postActionLoadReport() {

        // get the access token.
        accessToken = "<?= $access_token; ?>";

        // return if accessToken is empty
        if ("" === accessToken)
            return;

        // construct the push message structure
        var m = { action: "loadReport", accessToken: accessToken };
        message = JSON.stringify(m);

        // push the message.
        iframe = document.getElementById('iFrameEmbedTile');
        iframe.contentWindow.postMessage(message, "*");;
    }
</script>

The part for gettng the list of reports is working ok. Just the part for embeding the report gives the error.

[arasuraja]

When we are using ADFS while embedding the dashboard into our application, the office365 login page does not seem like rendering inside the iframe. Is it a security issue?

[sunil_kumar]

<html lang="en">
    <head>
        <script type="text/javascript">
            // post the auth token to the iFrame.
            function postActionLoadReport() {

                // get the access token.
                accessToken = '<?php echo $accessToken;?>';
                
                // return if no a
                if ("" === accessToken)
                    return;

                // construct the push message structure
                // this structure also supports setting the reportId, groupId, height, and width.
                // when using a report in a group, you must provide the groupId on the iFrame SRC
                var m = { action: "loadReport", accessToken: accessToken};
                message = JSON.stringify(m);

                // push the message.
                iframe = document.getElementById('iFrameEmbedReport');
                iframe.contentWindow.postMessage(message, "*");;
            }
         </script>
    </head>
    <body>
        <div>
            <p><b>Embedded Report</b></p>
            <table> <tr>
                        <td>
                            <iframe id="iFrameEmbedReport" src="<?php echo $reportURI;?>" onload="postActionLoadReport()" height="768px" width="1024px" frameborder="1" seamless></iframe>
                        </td>
                    </tr>
            </table>
        </div>
    </body>
</html>

[Silko · Accepted solution]

Hi everyone,

it looks like Microsoft has taken care of this issue. I didn't change the code and it started working. It is still a little bit bugy for some types of visuals. But it renders now. The errors and warnings I get for some of the reports now:

[pmathew2000]

Try using the sample at https://github.com/Microsoft/PowerBI-CSharp ( folder embed-a-report-into-an-app under samples/webforms)