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

[LasseL]

Dear community,

On a custom visual I am trying use a http post request by fetch to a logic app endpoint, and getting following error from the Console:

Refused to connect to 'https://xxx.logic.azure.com/xxx' because it violates the following Content Security Policy directive: "default-src 'self' data: blob: 'unsafe-inline' 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Following is the code from the react component of the visual:

    handleClick = () => {

        fetch('https://xxx.logic.azure.com:443/xxx', {  

        method: 'POST',

        mode: 'cors',

        body: JSON.stringify({"Data": {"Text1": "Test5", "Text2": "Test6"}}) // body data type must match "Content-Type" header

       })

I have read up on CSP and best I could find was: https://learn.microsoft.com/en-us/power-bi/developer/visuals/capabilities#privileges-define-the-spec...

For which reason I have tried to add to capabiltities.json the following:

     "privileges": [

        {

            "name": "WebAccess",

            "essential": true,

            "parameters": [ "https://prod-23.northeurope.logic.azure.com/", "https://*.logic.azure.com/", "https://prod-23.northeurope.logic.azure.com:443/", "*.logic.azure.com:443/" ]

        },

        {

            "name": "ExportContent",

            "essential": true

        }

    ]

}

Anyone got some ideas? Is it at all possible to do http request from a visual or has it been entirely blocked out by MS on the Power BI service?

Best regards and thanks

[anapaulamartins]

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.

[pichlerpa]

Hey@LasseL @LasseMr @MaximeDelobelle 

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

[MaximeDelobelle]

Hello,

I am facing the same issue. 

Passing the same Pbiviz code from 3.8.0 to 5.1.0 API version triggers the Content-Security-Policy 'connect-src' error. 

Setting the capabilities privilieges as following won't change anything : 

I even try to set the header meta content as following but it seems that the CSP policy is set above of the visual.

I would appraciate some help if anyone has successfully access external Api ressources inside a PBI visual.

Thnaks,

Maxime

[FelipeCosta]

-stop pbiviz execution

-change the visual's guid in the file pbiviz.json

-pbiviz start

[FelipeCosta]

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.

[Sahir_Maharaj]

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! 🙂

[Sahir_Maharaj]

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.

[pbn]

Here's a working code example. Working in all browsers and ios-App:

var xhr = new XMLHttpRequest();
            var _this = this.host;
            xhr.open("POST", "https://httpbin.org/post", true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(
              JSON.stringify({
                value: "Hello world",
              })
            );
            xhr.onload = function () {
              console.log(this.responseText);
              _this.displayWarningIcon(
                "Post-Request-Result",
                this.responseText
              );
            };

capabilities.json

...    
"privileges": [{
            "name": "WebAccess",
            "essential": true,
            "parameters": [
                "https://httpbin.org/post", ...
	    ]
        },
...

 HTH

[FelipeCosta]

Hi, thanks, but this didn't work. I still get the same error.

Did anyone manage to make it work?

Thanks.

[LasseMr]

Are you a chatbot? 🙂

I know what the documentation says, that's already in my reference. However, it is possible to perform fetch requests - see further below and solution answer to my question by @pbn 

[Sahir_Maharaj]

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.

[Sahir_Maharaj]

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.

[Sahir_Maharaj]

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.

[LasseMr]

I have found MS documentation that says changes have been made in API permissions and is now controlled by a object in the capabilities.json.

However, I tried setting these, and they still make no difference:

    "privileges": [

        {

            "name": "WebAccess",

            "essential": true,

            "parameters": [

                "https://prod-23.northeurope.logic.azure.com/xxx", "

            ]

        },

        {

            "name": "ExportContent",

            "essential": true

        }

    ]

Also, I tried changing from Logic Apps as an API service to create a simple web api publised to App Services on Azure, and setting CORS to allow * - but same error regarding Refused ... CSP. 

Any ideas folks? Clearly it is possible to do perform API calls to external domains, what am I missing? 🙂

[Fengshuki]

Hello!

Having the same problem as well. Would love to know if you found a solution!

[LasseMr]

See answer from @pbn further below.

[Anonymous]

Hi @LasseL , 

I have the exact same issue. Have you been able to find a solution to this?

[LasseMr]

See answer from @pbn further below.

[LasseL]

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 🙂

[anapaulamartins]

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.