PowerBI has a good API, but i probably making a mistake with the flow to retrieve data from it.

What we need to do:

1. Get Power BI apps listed in a menu.
2. With the menu, when a user click on a app link, the app should render on an iframe.

What we got so far:

1. We can call the oauth and generate tokens to interact with the API.
2. We can call the API and retrieve results.

The problems we're facing:

1. Lack of security to generate the token. We shouldn't make APPLICATION_ID and APPLICATION_SECRET available to frontend by security reasons. A better solution could be generate the application links using a backend for that, but this is not desirable by our deploy requirements.
2. We're facing issues related to CSP. Refused to frame 'https://app.powerbi.com/' because it violates the following Content Security Policy directive: "child-src 'none'". Note that 'frame-src' was not explicitly set, so 'child-src' is used as a fallback.

Example code (not the real code. just a draft):

var apps = [];
var APPLICATION_ID = "NOT INFORMED HERE";

axios.get("POWERBI URL").then(function(result) {
    result["values"].forEach((item) => {
        apps.push({id:item.id, name:item.name, link:`https://app.powerbi.com/Redirect?action=OpenApp&appId=${item.id}&ctid=${APPLICATION_ID}`})
    });
});

Any idea of how can we get this done considering security and front-end only approach?