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.
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://pineapple-profit.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 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://pineapple-profit.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://pineapple-profit.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?