topic Re: Getting Refused to connect to X because it violates the following Content Security Policy direct in Custom Visuals Development Discussion

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

LasseL — Mon, 14 Nov 2022 23:37:37 GMT

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-special-permissions-that-your-visual-requires

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

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

LasseL — Wed, 16 Nov 2022 07:17:09 GMT

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 🙂

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

LasseMr — Thu, 17 Nov 2022 17:31:12 GMT

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

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

Anonymous — Wed, 11 Jan 2023 16:42:12 GMT

Hi @LasseL ,

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

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

Fengshuki — Mon, 16 Jan 2023 15:35:34 GMT

Hello!

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

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

pbn — Thu, 26 Jan 2023 12:56:33 GMT

You got a 200 back. That's great.
So what exactly is your challenge?

The only think to do is to set the whitelisted web-urls in capabilities.json "privileges". Your own servers and all of the microsoft services as well.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

Sahir_Maharaj — Sun, 29 Jan 2023 11:44:27 GMT

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.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

Sahir_Maharaj — Sun, 29 Jan 2023 11:44:39 GMT

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.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

Sahir_Maharaj — Sun, 29 Jan 2023 11:45:00 GMT

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.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

Sahir_Maharaj — Sun, 29 Jan 2023 11:45:32 GMT

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.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

Sahir_Maharaj — Sun, 29 Jan 2023 11:45:48 GMT

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

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

pbn — Sun, 29 Jan 2023 20:16:57 GMT

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

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

LasseMr — Tue, 31 Jan 2023 11:49:20 GMT

Hi @pbn ,

The 200 I got back was a test with another visual from appsource, demonstrating that it is indeed possible to use fetch requests within custom visuals and sandboxed iframe.

You are very right, it was just a question of getting the privileges set right it terms of whitelisting, when I got the servers in the requests went straight through!

Thanks, I do not seem to find an actual answer that I can accept from you, can you provide one? 😉

Have a great day.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

LasseMr — Tue, 31 Jan 2023 11:49:47 GMT

See answer from @pbn further below.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

LasseMr — Tue, 31 Jan 2023 11:49:56 GMT

See answer from @pbn further below.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

LasseMr — Tue, 31 Jan 2023 11:51:40 GMT

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

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

pbn — Tue, 31 Jan 2023 14:09:22 GMT

I really want to help you if I can. However, I don't understand your question. Where is your knowledge gap?

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

FelipeCosta — Sat, 11 Feb 2023 21:32:57 GMT

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

Did anyone manage to make it work?

Thanks.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

FelipeCosta — Sun, 12 Feb 2023 10:49:09 GMT

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.

Re: Getting Refused to connect to X because it violates the following Content Security Policy direct

Anonymous — Thu, 02 Mar 2023 14:41:31 GMT

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