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?