Content Security Policy for auth0.js on localhost is throwing console error that I cannot resolve

I am developing on my local machine at https://127.0.0.1:5000/app/widget.html and trying to integrate the Auth0 auth0.js library into my app.

This is the code I’m running:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
    <script src="https://cdn.auth0.com/js/auth0/9.11/auth0.min.js"></script>
    <script type="text/javascript">
      var webAuth = new auth0.WebAuth({
        domain:       'REDACTED.au.auth0.com',
        clientID:     'CLIENT-ID-REDACTED',
        redirectUri:   window.location.href,
        scope:        'openid email profile offline_access',
        responseType: 'token id_token',
        leeway:        5
      });
      function handleAuth () {
        if (window.location.hash !== null && window.location.hash !== '') {
          webAuth.parseHash({ hash: window.location.hash }, function(err, authResult) {
            if (err) {
              return console.log(err);
            }
            console.log("authResult: " + authResult);
            // authResult.accessToken - access token for the API specified by `audience`
            // authResult.expiresIn - string with the access token's expiration time in seconds
            // authResult.idToken - ID token JWT containing user profile information

            webAuth.client.userInfo(authResult.accessToken, function(err, user) {
              // Now you have the user's information
              console.log("user: " + user);
            });
          });
        }
      }
    </script>
  </head>
  <body onload="handleAuth()">
    <button type="button"
onclick="webAuth.authorize({connection: 'twitter'})">
Connect Twitter</button>
  </body>
</html>

But I keep getting a console error after authenticating with Twitter.

I am sent to Twitter for Authentication, then get redirected back to https://127.0.0.1:5000/app/widget.html as expected, but then I get thrown this Content Security Policy error:

Refused to connect to https://REDACTED.au.auth0.com/.well-known/jwks.json because it does not appear in the connect-src directive of the Content Security Policy.

I have been reading up on Content Security Policy, including this very good StackOverflow answer here. But no matter what I include in my HTML meta tag I still get the same console error.

This very permissive meta tag does not work:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">

Neither does explicitly including the URL in the connect-src like this:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src https://REDACTED.au.auth0.com/.well-known/jwks.json 'unsafe-inline'; frame-src *;">

And neither does explicitly including the URL in the default-src like this:

<meta http-equiv="Content-Security-Policy" content="default-src https://REDACTED.au.auth0.com/.well-known/jwks.json; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;>

Any idea what’s going wrong here?