Content Security Policy - Embed MFE React inside power BI visual

Hii keerthanabasa 

​You are encountering a Content Security Policy (CSP) violation because the Power BI Service sandbox enforces a strict default-src https://app.powerbi.com data: blob: policy. By default, Power BI blocks any external iframe or script source that is not explicitly whitelisted in its own headers.

​Note: localhost:3000 will always fail in the Service due to the lack of a secure, public HTTPS origin that matches Power BI's requirements.

​The Solution: Choose Your Implementation

​Method 1: The Native Bundle (Recommended)

​Instead of loading your React MFE from an external URL, bundle the React components directly into your .pbiviz package. This bypasses CSP because the code is executed locally within the visual's internal sandbox.

1. Install React & ReactDOM:

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

• Initialize in visual.ts:

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

export class Visual implements IVisual {
    private target: HTMLElement;
    constructor(options: VisualConstructorOptions) {
        this.target = options.element;
        ReactDOM.render(React.createElement(YourApp), this.target);
    }
}

Method 2: The "Remote Fetch" Workaround

​If your React MFE must remain external (due to frequent updates or size), you cannot use a simple iframe. Instead, use the fetch or XMLHttpRequest API to get the component data/config, provided your server has CORS enabled for https://app.powerbi.com.

• ​Requirements: Your MFE must be served over HTTPS with a valid certificate.
• ​Limitation: This will still not work in Power BI Desktop if the firewall blocks the specific request, but it will work in the Service if CORS is configured.

​Summary of Limitations

• ​Localhost: Only works during pbiviz start in a dev environment; will always trigger CSP errors in the published Service.
• ​Iframes: Generally discouraged in custom visuals due to the very errors you are seeing.

​Why this is the solution:

• ​It identifies that Power BI Desktop security differs from the Service.
• ​It provides a Native React path which is the industry standard for Power BI dev.
• ​It explains the fallback mechanism of default-src.

​If this solves your React MFE integration, please mark this as the "Accepted Solution" to help other developers find this fix!