Getting Refused to connect to X because it violates the following Content Security Policy directive

Hi again,

Doesn't seem to catch much traction this post.

In the meantime, I have continued trying many different approaches; jquery, ajax, request header settings, response header settings, separating the call to another file etc., still same result.

Currently I am at this code in component.tsx:

Providing following error in Console:

I have set the response header in Logic Apps to the following, including access-control-allow-origin: *:

Picking up inspiration from another custom visual by acterys, I can see that they succeed on making use of http request from custom visual, and from the look of the response it seems to be a regular ajax request.

Meaning it IS posssible to make http request from custom visuals...? But what am I missing regarding CORS, headers, incompatible API using Logic Apps, CSP settings?

Hoping someone in the community can help 🙂

HeyLasseL LasseMr Anonymous 

You are doing everything right, there seem to be a problem with URLs containing hyhpens, see this

You can also check wether your provided web access priviliges defined in the capabilities.json are really recognized by the visual using this check permission api. This should help you to do so using https://localhost as an example:

1. importing modules

import IWebAccessService = powerbi.extensibility.IWebAccessService;
import PrivilegeStatus = powerbi.PrivilegeStatus;

2. defining in visual class
public permissions: IWebAccessService;

3. assigning in contructor method
this.permissions = options.host.webAccessService;

4. using in constructor method
this.permissions.webAccessStatus("https://localhost").then((result) => {
console.log(result)
console.log(PrivilegeStatus["NotDeclared"])
}).catch((err) => {
console.log('ERROR', err);
});

It seems that the error message is indicating that the browser is blocking the connection to the logic app endpoint due to a Content Security Policy (CSP) violation. CSP is a security feature that is implemented by the browser to prevent cross-site scripting (XSS) and other code injection attacks.

The "default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval'" directive in the error message is the CSP policy that is being enforced by the browser, which means that the browser will only allow resources to be loaded from the same origin as the current page, data: and blob: URLs, and unsafe inline and eval scripts.

Based on the code you've provided, it seems that you are trying to connect to an external endpoint (https://xxx.logic.azure.com) that is not on the same origin as the current page. Therefore, the browser is blocking the connection.

It is not possible to make HTTP requests from a Power BI visual to an external endpoint using the Fetch API. One workaround that you could use is to have a proxy server that relays the request from the visual to the external endpoint, and this way you can avoid the CSP issue.

Alternatively, you can use Power Automate(MS Flow) or Azure Logic app to handle the request and return the response to Power BI visual.

Hope this helps! 🙂

I had the same problem and found out that the issue was the priveleges on the capabilities file.

Updating the API version in Pbiviz code from 3.8.0 to 5.1.0 has triggered a Content-Security-Policy 'connect-src' error. This issue arises because the newer API version requires specifying explicit privileges for accessing external resources.

In the current environment, if your Power BI visual needs to fetch content from external sources, you must explicitly define the sites from which you intend to retrieve content in the privileges section of the capabilities file.

{
    "name": "WebAccess",
    "essential": true,
    "parameters": [ "https://*.microsoft.com", "http://example.com" ]
}

As a workaround, you might consider granting privileges to all HTTPS websites, but this approach could potentially introduce security concerns. 

  "privileges":[
    {
      "name": "WebAccess",
      "essential": true,
      "parameters": [ "https://*.microsoft.com", "https://*"]
  }]

You can find more information about the privileges here.

I had the same problem.

In the end, what worked for me was changing the value of the visual's guid in the file pbiviz.json.