Forum Discussion

LasseL's avatar
LasseL
Helper I
3 years ago

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...
Need Help
LasseL's avatar
LasseL
Helper I
3 years ago

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's avatar
anapaulamartins
New Member
2 years ago

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.