ADAL.js - what is the IFrame target origin for embedding PowerBI dashboard

58.2k views Asked by At

I'm using the PowerBI REST API along with ADAL.js and getting Dashboards. I want to embed a Dashboard in an IFrame. I'm using Angular.JS
So what did was something like this. Notice I have used "*" as the IFrame Target Origin. dashboardEmbedUrl is obtained from the API call

<iframe id="PBDashboard" ng-show="dashboardVisible" src="{{dashboardEmbededUrl}}" frameborder="0" style="height: 100vh; width: 100%"></iframe>

and in my controller

var iframe = document.getElementById("PBDashboard")
const loadIframeDashboardEventListner = function() {
    const token = localStorage.getItem('adal.access.token.keyhttps://analysis.windows.net/powerbi/api');
    iframe.contentWindow.postMessage(JSON.stringify({
        action: "loadDashboard",
        accessToken: token
    }), "*") //target is *. what should be the specific URL needed here
}

and

iframe.addEventListener("load",loadIframeDashboardEventListner);

This works perfectly fine but using "*" triggers a security warning in SonarCloud. It says to specify a target. I'm not sure what the target should be. The API call also gives a webUrl along with the embedUrl. I used the webUrl instead of the "*" and it rendered the IFrame data but also gave the following error in console enter image description here

0

There are 0 answers