PowerBI tiene una buena API, pero probablemente cometo un error con el flujo para recuperar datos de él.

Qué necesitamos hacer:

1. Muestra las aplicaciones de Power BI en un menú.
2. Con el menú, cuando un usuario hace clic en el enlace de una aplicación, la aplicación debe mostrarse en un iframe.

Lo que tenemos hasta ahora:

1. Podemos llamar al oauth y generar tokens para interactuar con la API.
2. Podemos llamar a la API y recuperar resultados.

Los problemas a los que nos enfrentamos:

1. Falta de seguridad para generar el token. No deberíamos hacer que APPLICATION_ID y APPLICATION_SECRET estén disponibles para la interfaz por razones de seguridad. Una mejor solución podría ser generar los enlaces de la aplicación utilizando un backend para eso, pero esto no es deseable según nuestros requisitos de implementación.
2. Estamos enfrentando problemas relacionados con 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.

Código de ejemplo (no el código real, solo un borrador):

 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}`}) }); });

¿Alguna idea de cómo podemos hacer esto teniendo en cuenta la seguridad y el enfoque de solo front-end?