Content Security Policy - Embed MFE React inside power BI visual

Hi keerthanabasa ,

The short answer is: You cannot bypass the default-src Content Security Policy (CSP) header set by the Power BI Service using an iframe.

The architecture of loading a remote Micro Frontend (MFE) via an <iframe> inside a Custom Visual is fundamentally blocked by Power BI's security model. This is intended behavior to prevent cross-site scripting (XSS) and unverified code execution within the report canvas.

Here is the complete breakdown of why this fails and the required architectural change to fix it.

1. The Root Cause

The Power BI Service (app.powerbi.com) serves the report with a strict Content-Security-Policy header.

• The Error: default-src https://app.powerbi.com data: blob: means the browser is instructed to only load content (scripts, frames, images) from the Power BI domain itself.

• The Block: When your custom visual tries to create an iframe pointing to localhost:3000 (or any external MFE URL), the browser checks this header, sees that localhost is not in the allowed list, and blocks the request immediately.

• No Override: You cannot override this header from within your visual's code or pbiviz.json. The parent window controls the policy.

2. The Solution: Bundle, Don't Embed

To use React in a Power BI Custom Visual, you must change your deployment strategy. Instead of hosting the React app separately and trying to "view" it through Power BI, you must bundle the React code into the Custom Visual package (.pbiviz).

How to migrate your MFE to a Custom Visual:

1. Move Source Code: Move your React components into the src/ folder of your Power BI Custom Visual project.

2. Install React Dependencies:

   npm install react react-dom @types/react @types/react-dom

3. Configure TypeScript: Ensure your tsconfig.json has "jsx": "react".

4. Render in the Visual: In your visual.ts file, use ReactDOM.render to mount your React component onto the visual's DOM element (options.element).

Example visual.ts pattern:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MyReactComponent } from "./MyReactComponent";

export class Visual implements IVisual {
    private target: HTMLElement;
    private reactRoot: React.ComponentElement<any, any>;

    constructor(options: VisualConstructorOptions) {
        this.target = options.element;
    }

    public update(options: VisualUpdateOptions) {
        // Pass data from Power BI (options.dataViews) as props to your React Component
        ReactDOM.render(
            React.createElement(MyReactComponent, { data: options.dataViews }),
            this.target
        );
    }
}

3. If You Need External Data (API Calls)

If your React MFE was fetching data from an external API, bundling the code will solve the rendering issue, but you might still hit CSP issues with fetching data.

To allow your bundled React code to make network requests (fetch/axios) to an external backend:

1. Open pbiviz.json.

2. Add your API domain to externalJS:

    

   "externalJS": [
       "https://api.your-backend.com/..."
   ]

   (Note: This allows network traffic, it does not allow framing).

Summary

• Can we load a remote React MFE via iframe? No. The CSP rules on app.powerbi.com are strict and cannot be bypassed for custom visuals.

• The Fix: You must compile/bundle your React application inside the custom visual using Webpack (which pbiviz handles) rather than loading it at runtime from a URL.

If my response resolved your query, kindly mark it as the Accepted Solution to assist others. Additionally, I would be grateful for a 'Kudos' if you found my response helpful.
This response was assisted by AI for translation and formatting purposes.

Hi burakkaragoz ,
Thank you so much for your insights. We have already tried the bundling approach.

Here is how we are rendering the component(index.tsx):

Our React component depends on WASM files. We are able to load these WASM files by whitelisting the corresponding lib.js file, which is loaded as part of the Power BI custom visual.

However, we are explicitly passing an additional worker.js file to our React component which is rendered inside Component1. Power BI is blocking this worker script, resulting in the following error:SecurityError: Failed to construct 'Worker': Script at 'https://app.powerbi.com/****/*/worker.js' cannot be accessed from origin 'null'.

In this context, will Power BI allow loading a worker.js file specific to the React component, or is this scenario fundamentally restricted by Power BI’s sandboxing model?

Hi keerthanabasa 

I wanted to check if you had the opportunity to review the information provided by AshokKunwar . Please feel free to contact us if you have any further questions.

Thank you.

Hi keerthanabasa 

May I check if this issue has been resolved? If not, Please feel free to contact us if you have any further questions.

Thank you