Content Security Policy fails to work after upgrading `react-scripts` to 5.0.0

[vinodtikhatri]

Describe the bug

We have a .Net application with Reactjs as the frontend. It was all working fine when the react-scripts version was 2.0.3 but soon after upgrading it to 5.0.0 I'm seeing the below error related to content security policy on the browser console:

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.

The C# code looks as below (the declaration of default-src):

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();
});

Did you try recovering your dependencies?

Yes npm version is 6.14.15

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

Environment Info:

current version of create-react-app: 5.0.0 running from C:\Users\NX385BR\AppData\Roaming\npm-cache_npx\25536\node_modules\create-react-app

System: OS: Windows 10 10.0.19042 CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz Binaries: Node: 14.18.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.55) Internet Explorer: 11.0.19041.1566 npmPackages: react: ^16.9.0 => 16.9.0 react-dom: ^16.9.0 => 16.9.0 react-scripts: 5.0.0 => 5.0.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. Build the .NET application, it triggers frontend and installs all dependencies
2. Browser loads the frontend
3. Shows blank screen (with console error above)

Expected behavior

Upgrading react-scripts to 5.0.0 should work as it was working in version 2.0.3.

Actual behavior

Reproducible demo

[hiaw]

I had the same thing

[vinodtikhatri]

I had the same thing

@hiaw do let us know if you find any solution.

[iiLearner]

same issue