PowerBI Embedded fails to load report (403) when the web app client runs from another server

Hi Guys,

           I have a web app front end running via "Cordova run browser" and the backend is served via asp.net MVC WebAPI. The frontend running on port 8000 and the asp.net MVC backend is running on port 1234.  When the web frontend wants to render the report it makes a call to the backend. Gets the token and is supposed to render it in the front end. But I am getting the following error.

GET wabi-us-north-central-redirect.analysis.windows.net/appTokenEmbed/reports/35e2f4ee-b89d-4a81-a698-76ae6f60c195/modelsAndExploration:1 GET https://wabi-us-north-central-redirect.analysis.windows.net/appTokenEmbed/reports/35e2f4ee-b89d-4a81-a698-76ae6f60c195/modelsAndExploration 403 (Forbidden) 

I had previously made a POC app where frontend and backend were running from the same server (asp.net WebAPI backend, HTML frontend.), and it is working fine. Any idea why? Do the token only works on the originating website? 

Regards

Tiklu

---

           I have a web app front end running via "Cordova run browser" and the backend is served via asp.net MVC WebAPI. The frontend running on port 8000 and the asp.net MVC backend is running on port 1234.  When the web frontend wants to render the report it makes a call to the backend. Gets the token and is supposed to render it in the front end. But I am getting the following error.

Tiklu

---

tikluganguly

How you make the call and what is the response? Techinically you can even embedded a report in Power BI Embedded with a static html, which means, to render a report, only embeded url and access token is needed. How did you get the embeded url and token in your case?

<html>  
 <script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/node_modules/powerbi-client/dist/powerbi.js"></script>
<script type="text/javascript">
window.onload = function () {   

var embedConfiguration = {
    type: 'report',
    accessToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjIuMCIsInR5cGUiOiJlbWJlZCIsIndjbiI6Indya3NwY0NsbGN0bjRQQkkiLCJ3aWQiOiJiN2NmNDMzYi00MzdjLTRjYTUtOWRmMi1kOWZkODIxODI0NjEiLCJyaWQiOiJhMzQwMDQ5YS03ZjJiLTQyZDAtOWQwZC0yMGJhMjRjMmUyMGIiLCJ1c2VybmFtZSI6IjEwMDA4NSIsInJvbGVzIjoicHJvdmlkZXIiLCJpc3MiOiJQb3dlckJJU0RLIiwiYXVkIjoiaHR0cHM6Ly9hbmFseXNpcy53aW5kb3dzLm5ldC9wb3dlcmJpL2FwaSIsImV4cCI6MTQ5NTQ1MDQzNywibmJmIjoxNDk1NDQ2ODM3fQ.HuDplvb2oelxjQmYvcLQcOrDP1ZPVwlEejO9Tb6dFYg',
     
    embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=a340049a-7f2b-42d0-9d0d-20ba24c2e20b'

}; 
  
var $reportContainer = $('#reportContainer'); 
var report = powerbi.embed($reportContainer.get(0), embedConfiguration); 

}
</script>
<div id="reportContainer"></div>
</html>

Adding "frame-src https://app.powerbi.com/;" to my content security policy fixed this for me.