Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Shape the future of the Fabric Community! Your insights matter. That’s why we created a quick survey to learn about your experience finding answers to technical questions. Take survey.

Reply
LasseL
Helper I
Helper I

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

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
       })
 
 
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
23 REPLIES 23
anapaulamartins
New Member

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
Frequent Visitor

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
Regular Visitor

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 : 

MaximeDelobelle_0-1677767884928.png

 

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

MaximeDelobelle_1-1677767967223.png

 

 

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

 

Thnaks,

 

Maxime

 

 

 

 

-stop pbiviz execution

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

-pbiviz start

FelipeCosta
Advocate II
Advocate II

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
Super User
Super User

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


Did I answer your question? Mark my post as a solution, this will help others!

If my response(s) assisted you in any way, don't forget to drop me a "Kudos" 🙂

Kind Regards,
Sahir Maharaj
Data Scientist | Data Engineer | Data Analyst | AI Engineer
P.S. Want me to build your Power BI solution? (Yes, its FREE!)
➤ Lets connect on LinkedIn: Join my network of 15K+ professionals
➤ Join my free newsletter: Data Driven: From 0 to 100
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ Want me to build your Power BI solution? Lets chat about how I can assist!
➤ Join my Medium community of 30K readers! Sharing my knowledge about data science and artificial intelligence
➤ Explore my latest project (350K+ views): Wordlit.net
➤ 100+ FREE Power BI Themes: Download Now
LinkedIn Top Voice in Artificial Intelligence, Data Science and Machine Learning
Sahir_Maharaj
Super User
Super User

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.


Did I answer your question? Mark my post as a solution, this will help others!

If my response(s) assisted you in any way, don't forget to drop me a "Kudos" 🙂

Kind Regards,
Sahir Maharaj
Data Scientist | Data Engineer | Data Analyst | AI Engineer
P.S. Want me to build your Power BI solution? (Yes, its FREE!)
➤ Lets connect on LinkedIn: Join my network of 15K+ professionals
➤ Join my free newsletter: Data Driven: From 0 to 100
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ Want me to build your Power BI solution? Lets chat about how I can assist!
➤ Join my Medium community of 30K readers! Sharing my knowledge about data science and artificial intelligence
➤ Explore my latest project (350K+ views): Wordlit.net
➤ 100+ FREE Power BI Themes: Download Now
LinkedIn Top Voice in Artificial Intelligence, Data Science and Machine Learning

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

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

 

Did anyone manage to make it work?

 

Thanks.

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
Super User
Super User

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.


Did I answer your question? Mark my post as a solution, this will help others!

If my response(s) assisted you in any way, don't forget to drop me a "Kudos" 🙂

Kind Regards,
Sahir Maharaj
Data Scientist | Data Engineer | Data Analyst | AI Engineer
P.S. Want me to build your Power BI solution? (Yes, its FREE!)
➤ Lets connect on LinkedIn: Join my network of 15K+ professionals
➤ Join my free newsletter: Data Driven: From 0 to 100
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ Want me to build your Power BI solution? Lets chat about how I can assist!
➤ Join my Medium community of 30K readers! Sharing my knowledge about data science and artificial intelligence
➤ Explore my latest project (350K+ views): Wordlit.net
➤ 100+ FREE Power BI Themes: Download Now
LinkedIn Top Voice in Artificial Intelligence, Data Science and Machine Learning
Sahir_Maharaj
Super User
Super User

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.


Did I answer your question? Mark my post as a solution, this will help others!

If my response(s) assisted you in any way, don't forget to drop me a "Kudos" 🙂

Kind Regards,
Sahir Maharaj
Data Scientist | Data Engineer | Data Analyst | AI Engineer
P.S. Want me to build your Power BI solution? (Yes, its FREE!)
➤ Lets connect on LinkedIn: Join my network of 15K+ professionals
➤ Join my free newsletter: Data Driven: From 0 to 100
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ Want me to build your Power BI solution? Lets chat about how I can assist!
➤ Join my Medium community of 30K readers! Sharing my knowledge about data science and artificial intelligence
➤ Explore my latest project (350K+ views): Wordlit.net
➤ 100+ FREE Power BI Themes: Download Now
LinkedIn Top Voice in Artificial Intelligence, Data Science and Machine Learning
Sahir_Maharaj
Super User
Super User

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.


Did I answer your question? Mark my post as a solution, this will help others!

If my response(s) assisted you in any way, don't forget to drop me a "Kudos" 🙂

Kind Regards,
Sahir Maharaj
Data Scientist | Data Engineer | Data Analyst | AI Engineer
P.S. Want me to build your Power BI solution? (Yes, its FREE!)
➤ Lets connect on LinkedIn: Join my network of 15K+ professionals
➤ Join my free newsletter: Data Driven: From 0 to 100
➤ Website: https://sahirmaharaj.com
➤ Email: sahir@sahirmaharaj.com
➤ Want me to build your Power BI solution? Lets chat about how I can assist!
➤ Join my Medium community of 30K readers! Sharing my knowledge about data science and artificial intelligence
➤ Explore my latest project (350K+ views): Wordlit.net
➤ 100+ FREE Power BI Themes: Download Now
LinkedIn Top Voice in Artificial Intelligence, Data Science and Machine Learning
LasseMr
Helper II
Helper II

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": [
            ]
        },
        {
            "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. 
LasseMr_0-1668706219759.png

 

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

Hello!

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

See answer from @pbn further below.

Anonymous
Not applicable

Hi @LasseL , 

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

 

See answer from @pbn further below.

LasseL
Helper I
Helper I

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:

LasseL_0-1668582513947.png

Providing following error in Console:

LasseL_2-1668582673055.png

 

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

LasseL_4-1668582843728.png

 

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?

 

LasseL_3-1668582780085.png

 

Hoping someone in the community can help 🙂

 

 

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.

 

Helpful resources

Announcements
November Carousel

Fabric Community Update - November 2024

Find out what's new and trending in the Fabric Community.

Dec Fabric Community Survey

We want your feedback!

Your insights matter. That’s why we created a quick survey to learn about your experience finding answers to technical questions.

Top Solution Authors
Top Kudoed Authors