Starting December 3, join live sessions with database experts and the Microsoft product team to learn just how easy it is to get started
Learn moreGet certified in Microsoft Fabric—for free! For a limited time, get a free DP-600 exam voucher to use by the end of 2024. Register now
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 = () => {
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.
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);
});
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
-stop pbiviz execution
-change the visual's guid in the file pbiviz.json
-pbiviz start
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.
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! 🙂
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.
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
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.
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.
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.
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!
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 🙂
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.
Starting December 3, join live sessions with database experts and the Fabric product team to learn just how easy it is to get started.
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early Bird pricing ends December 9th.