Power BI custom visual not sending Referer

[Eduardo41523]

Hi,

I’m developing a custom visual using React + Leaflet, and I’m trying to load OpenStreetMap tiles: The tiles are being blocked with: “Access blocked - Referrer is required by tile usage policy”. From DevTools, I can see: The elements include referrerpolicy="strict-origin" Chrome shows Referrer Policy: strict-origin in the General section However, no Referer header is actually sent in the request. The response includes x-blocked: Access denied. This is running inside a Power BI custom visual.

Are custom visuals able to send a Referer header with external requests, or is this restricted by the Power BI visual environment? If it is restricted, is there any supported way to include a referrer?

[SpaceBAWS]

For other users coming here. Specifically for Custom Power BI Visuals, Referrer Headers, and possibly getting blocked by OpenStreetMap with the 403r referrer is required:

Yes, even if you set the reffer-policy for your tile HTTP or HTTPS requests, or if Leaflet.js sets this, the specific Referrer HTTP header never gets sent for Custom Power BI Visuals.

This is shown here https://community.openstreetmap.org/t/access-blocked-on-osm-org/141419/43

I looked through the Sandbox code for Custom Visuals in Power BI

https://app.powerbi.com/13.0.28090.50/cvSandboxPack.cshtml?locale=en-US&pbiglobals=1#e9ae9064-dc5c-4...

It has this injectJsCode function that creates an isolated clone of the window object.

// ...

.call(

                    //generate isolated clone of window object

                    (function(w) {

                        var wKeys = Object.getOwnPropertyNames(w);

                        var nextW = w;

                        while ((nextW = Object.getPrototypeOf(nextW))) {

                            wKeys = wKeys.concat(Object.getOwnPropertyNames(nextW));

                        }

                        var newWindow = Object.create(w);

                        //rebuild some of the window properties so they work correctly

                        for (var i = 0; i < wKeys.length; i++) {

// ...

I don't know exactly how, but this seems to make the Referrer header not send, even if you set the Referrer Policy to a value that would send a Referrer header. I feel like the JavaScript loses what host/domain/origin it's running when the Window object is cloned (created) like this.

[SpaceBAWS]

For other users coming here. Specifically for Custom Power BI Visuals, Referrer Headers, and possibly getting blocked by OpenStreetMap with the 403r referrer is required:

Yes, even if you set the reffer-policy for your tile HTTP or HTTPS requests, or if Leaflet.js sets this, the specific Referrer HTTP header never gets sent for Custom Power BI Visuals.

This is shown here https://community.openstreetmap.org/t/access-blocked-on-osm-org/141419/43

I looked through the Sandbox code for Custom Visuals in Power BI

https://app.powerbi.com/13.0.28090.50/cvSandboxPack.cshtml?locale=en-US&pbiglobals=1#e9ae9064-dc5c-4...

It has this injectJsCode function that creates an isolated clone of the window object.

// ...

.call(

                    //generate isolated clone of window object

                    (function(w) {

                        var wKeys = Object.getOwnPropertyNames(w);

                        var nextW = w;

                        while ((nextW = Object.getPrototypeOf(nextW))) {

                            wKeys = wKeys.concat(Object.getOwnPropertyNames(nextW));

                        }

                        var newWindow = Object.create(w);

                        //rebuild some of the window properties so they work correctly

                        for (var i = 0; i < wKeys.length; i++) {

// ...

I don't know exactly how, but this seems to make the Referrer header not send, even if you set the Referrer Policy to a value that would send a Referrer header. I feel like the JavaScript loses what host/domain/origin it's running when the Window object is cloned (created) like this.

[v-aatheeque]

Hi @Eduardo41523 
Thanks for reaching out to Microsoft Fabric Coummunity Forum.

You’ve run into a limitation of the Power BI custom visual sandbox.

Custom visuals run inside a secured iframe, and this environment does not allow setting or overriding HTTP headers such as Referer. While the browser applies a referrer policy (for example strict-origin), the Power BI visual host further restricts what actually gets sent, so the Referer header is often not included.

Because of this, you cannot force a Referer header from within a custom visual. If a tile provider like OpenStreetMap requires a valid referrer, those requests may be blocked. This is by design for security reasons.

Workarounds:

Use a tile provider that supports API keys instead of referrer checks.

Consider services like Azure Maps or Mapbox.
Reference : Debug Power BI custom visuals - Power BI | Microsoft Learn

Hope this helps !!
Thank You.

[Eduardo41523 · Accepted solution]

Thank you for the prompt response! It's unfortunate to hear that there is no way of making custom visuals support referrer requests. We will have to try one of the work-arounds. Thank you again!

[v-aatheeque]

Hi @Eduardo41523 

Just checking in on this were you able to try one of the suggested workarounds for the custom visual referrer limitation?

Please let us know how it went or if you’re still facing any challenges. We’re happy to assist further if needed.

[v-aatheeque]

Hi @Eduardo41523 

Have you had a chance to look through the responses shared earlier? If anything is still unclear, we’ll be happy to provide additional support.