My application is in Reactjs and C#. It was working fine until react-scripts was 2.0.3 but soon after upgrading the react-scripts to 5.0.0 I'm seeing below-console error with a blank screen:

Refused to connect to 'wss://localhost:57600/ws' because it violates the following Content Security Policy directive: "default-src https://login.microsoftonline.com/ https://dc.services.visualstudio.com/v2/track 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

My C# code is as below:

app.Use(async (context, next) =>
{
    context.Response.Headers.Add("Content-Security-Policy",
                    "base-uri 'self';" +
                    "block-all-mixed-content;" +
                    "default-src https://login.microsoftonline.com/ " +
                            "https://dc.services.visualstudio.com/v2/track " +
                                "'self';" +
                    "img-src data: https:;" +
                    "object-src 'none';" +
                    "script-src 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4Uqglmvaedcei=' " +
                            "'self';" +
                    "style-src 'self' " +
                            "'unsafe-inline';" +
                    "frame-ancestors 'none';" +
                    "frame-src https://app.powerbi.com/ " +
                                    "'self';" +
                    "upgrade-insecure-requests;");

    context.Response.Headers.Add("X-Frame-Options", "deny");

    context.Response.Headers.Add("X-Xss-Protection", "1; mode=block");

    context.Response.Headers.Add("X-Content-Type-Options", "nosniff");

    context.Response.GetTypedHeaders().CacheControl =
    new Microsoft.Net.Http.Headers.CacheControlHeaderValue()
    {
        NoCache = true
    };

    await next();
});

package.json as below:

{
  "name": "AdvancedWeb",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@microsoft/applicationinsights-react-js": "^3.0.1",
    "@microsoft/applicationinsights-web": "^2.5.6",
    "animate.css": "3.7.2",
    "axios": "^0.26.0",
    "bootstrap": "^4.3.1",
    "classnames": "^2.2.6",
    "immutable": "^4.0.0-rc.12",
    "jquery": "^3.6.0",
    "js-cookie": "^2.2.1",
    "node-sass": "^7.0.1",
    "powerbi-client": "2.8.0",
    "prop-types": "^15.7.2",
    "react": "^16.9.0",
    "react-app-polyfill": "^1.0.2",
    "react-color": "^2.17.3",
    "react-dom": "^16.9.0",
    "react-dropzone": "^10.1.9",
    "react-icons": "^3.7.0",
    "react-intl-universal": "^2.1.4",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^6.2.2",
    "react-scripts": "^5.0.0",
    "reactstrap": "^6.3.0",
    "rimraf": "^2.6.2",
    "slate": "^0.47.8",
    "slate-html-serializer": "^0.8.10",
    "slate-react": "^0.22.9"
  },
  "devDependencies": {
    "ajv": "^6.12.6",
    "cross-env": "^5.2.0",
    "eslint-config-react-app": "^2.1.0",
    "eslint-plugin-flowtype": "^2.50.3",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.11.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Findings: I think it's not accepting default-src as self for some reason. But this works with no code change in C# with react-scripts version 2.0.3. I don't find any other dependencies to be upgraded in order for react-scripts to work. I Will appreciate any help. thanks!