Connection to signalr hub blocked by content security policy

Issue

Im building an application using electron with React and Typescript. I have a SignalR hub for a chat function. When I try to connect to my SignalR server i get the following error Image of error

The project was set up with the following guide: https://www.electronforge.io/guides/framework-integration/react-with-typescript

The thing I find weird is when i build the electron app it connects to the SignalR hub without any issue. But I can't build the application every time I want to test it. I have tried so many different meta tags in the index.html file and none seem to work. My understanding is that I need to set connect-src but whenever I add that to my html meta tag it still says that it is not set.

This may be a really easy question to solve but I have never handled Content Security Policy and this was never a problem for me when react was running by it self in browser.

Current meta tag if that helps:

<meta http-equiv="Content-Security-Policy"
        content="default-src 'self' http: https: data: gap: ws: https://localhost:44396/* 'unsafe-inline' 'unsafe-eval';">

Thanks in advance

Solution

So after some trial and error I will post how I solved it. If this a bad solution please let me know but for now I guess I will move one. But to solve it I added the CSP settings in electron instead of doing it in index.html

I added the following code to my index.ts:

session.defaultSession.webRequest.onHeadersReceived(((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': ['connect-src * ws: http: https: \'self\'']
      }
    });
  }));

Answered By - Typelias