I'm trying to get auth0 to work with heroku, but having some difficulties.
I can get it to work locally without issues, but it just wouldn't work with Heroku
My setup:
React app which is being server from express as a static resource
Code for auth0 provider:
const providerConfig = {
domain: process.env.AUTH0_DOMAIN,
clientId: process.env.AUTH0_CLIENT_ID,
redirectUri: window.location.origin,
};
ReactDOM.render(
<Auth0Provider {...providerConfig}>
<BrowserRouter history={history}>
<App />
</BrowserRouter>
</Auth0Provider>,
document.getElementById("root")
);
The error I get when I try to login:
Refused to connect to 'https://small-dust-7659.eu.auth0.com/oauth/token' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
Any help is much appreciated, thanks!
Auth0 needs to know about your origin, so it can allow cross-origin (CORS) requests to be made from your site on Heroku.
There's a detailed description on how to set this up here.
Basically on your applications page you can set up your origins and URLs.
The issue was to do with helmet configuration..
I added the auth0 domain to connectSrc and it solved the issue
helmet({
contentSecurityPolicy: {
directives: {
defaultSrc: ["'self'"],
objectSrc: ["'none'"],
scriptSrc: ["'self'", "unpkg.com", "polyfill.io"],
styleSrc: ["'self'", "https: 'unsafe-inline'"],
----> connectSrc: ["'self'", "xxxxxx.eu.auth0.com"],
upgradeInsecureRequests: [],
},
},
});
Related
I have a react app running on http://localhost:5000/. Also I have another web app running on http://127.0.0.1:1880 and I want to open this website in iframe from react app. I set Content-Security-Policy: frame-ancestors http://localhost:5000/ but I'm still getting cors error and unable to see the content in iframe.
Node js code where I set the policies:
app.use(cors())
app.use(helmet({
contentSecurityPolicy: {
// "child-src": "http://localhost:5000",
directives:{
frameAncestors: "http://localhost:5000/",
}
}
}));
app.use(helmet.crossOriginEmbedderPolicy({ policy: "credentialless" }));
app.use(helmet.crossOriginOpenerPolicy({ policy: "unsafe-none" }));
app.use(helmet.crossOriginResourcePolicy({ policy: "cross-origin" }));
Is there any way to fix this issue?
I'm getting the following error when trying to display a video preview on my React app.
Refused to load media from 'data:video/mp4;base64,...' because it violates the following Content Security Policy directive: "default-src ". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback. Note that '' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'data:' must be added explicitly.
The thing is, that I'm not getting the Data Url fom any server, just from a file that the user chooses, so I don't understand why CSP has a problem with that...?
Here is my JSX implementation:
img.type === "video" && (
<video controls>
<source type="video/mp4" src={img.file} />
</video>
And that's my Helmet configuration (in my Node.js server):
app.use(
helmet.contentSecurityPolicy({
useDefaults: true,
directives: {
"img-src": ["'self'", "https: data:"],
"media-src": ["*", "'self'", "https:", "data:"],
"connect-src": [
"'self'",
"https://countriesnow.space/api/v0.1/countries",
],
},
})
);
I'm not sure what's the problem here... Thanks for helping!
You could try to use the alternate way of defining the directives that they show in the docs: https://helmetjs.github.io/
A lot of the non-docs sites that I found when researching this also use this method of defining the directives:
app.use(
helmet.contentSecurityPolicy({
useDefaults: true,
imgSrc: ["'self'", "https: data:"],
mediaSrc: ["*", "'self", "https:", "data:"],
connectSrc: [...]
}));
Seems silly that that would make a difference, but stranger things...
OK, so just to update, I found the problem, and it was a very silly one.. Apparently when you create a react app with create-react-app, they set CSP as meta settings in the index.html file and I didn't set the media-src over there. when I did, it worked just fine...
Thank for the answers!
Hope you're doing well! I'm looking for some kind of help. Will be really grateful for you if you provide me with some sort of a hint.
I'm setting up developer portal based on [Backstage.io][1] according to Getting started docs instructions.
I've added #backstage/plugin-auth-backend to the project root and configured it as described [here][2].
As soon as I try to load backstage web app I get the following error:
{"error":{"name":"AuthenticationError","message":"Refresh failed; caused by InputError: Missing session cookie"
And it's followed by the list of .ts files with errors including some scripts connected with node_modules/#backstage/plugin-auth-backend. Guys, really I don't know where I'm missing something.
Here are some key points in my app-config.yaml:
app:
title: Scaffolded Backstage App
baseUrl: http://0.0.0.0:3000
backend:
baseUrl: http://<publicIP>:7007
listen:
port: 7007
csp:
default-src: ["'self'", 'http:', 'https:']
connect-src: ["'self'", 'http:', 'https:']
script-src: ["'self", 'http:', 'https:','unsafe-inline', http://www.github.com", http://api.github.com"]
cors:
origin: http://*:3000
methods: [GET, POST, PUT, DELETE]
credentials: true
headers: X-Requested-With
auth:
environment: development
providers:
github:
development:
clientId: ${GITHUB_CLIENTID}
clientSecret: ${GITHUB_CLIENT_SECRET}
I have exported those env variables to current terminal and ran yarn dev
So when I try to login to Backstage using Github I get 401 Unathorized error response while trying to approach thar Request URL: http://<publicIP>:7007/api/auth/github/refresh?optional&env=development
[1]: https://backstage.io/
[2]: https://backstage.io/docs/auth/add-auth-provider
I am currently developing an SPA using react. In order to serve the SPA I simply have an express server which serves the build folder as a static folder.
But whenever I try to run the application nothing loads and I get the console error:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-1kri9uKG6Gd9VbixGzyFE/kaQIHihYFdxFKKhgz3b80='), or a nonce ('nonce-...') is required to enable inline execution.
I've done a lot of googling but I can't find anything that works.
I've tried disabling helmets CSP but I still get the error.
I've tried uninstalling helmet, nothing.
Stopping and restarting the server, nope.
stopping everything, restarting the server and reopening chrome, nope.
Currently this is my use statement
App.use(helmet({
contentSecurityPolicy: {
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "'unsafe-inline'", 'https://ajax.googleapis.com', 'https://stackpath.bootstrapcdn.com'],
styleSrc: ["'self'"],
imgSrc: ["*", 'data:'],
connectSrc: ["'self'"],
frameSrc: ["'self'"],
},
}
}));
because it's the same error no matter what I'm assuming the CSP isn't updating but I don't know enough to test this theory or what I could even do to remedy it.
After reading the comment from the helmet maintainer Evan Hahn, I did a little googling to remember the shortcut then just went to the site and hit ctrl-F5 to refresh the page and clear the cache at the same time, worked like a charm.
When using a nodejs express application using the NPM "Helmet" package to install protective Headers, errors occur when using fontawesome: "kit_fontawesomecom_78f8060be1.js: 2 Refused to connect to 'https://ka-f.fontawesome.com/releases/v5. 15.1 / css / free.min.css' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback. "
Apparently security is being violated. Is there a solution to these problems?
Solved by toggling contentSecurityPolicy: false:
helmet({
contentSecurityPolicy: false,
})
);
But this is not a solution to the problem, it is ignoring it.
An example of one of the posts in full:
kit_fontawesomecom_78f8060be1.js:2 Refused to connect to 'https://ka-f.fontawesome.com/releases/v5.15.1/css/free.min.css' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
Thank you so much!
This is how it works:
app.use(
helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'", 'https://ka-f.fontawesome.com', 'https://fonts.gstatic.com'],
scriptSrc: ["'self'", "'unsafe-inline'", 'https://ka-f.fontawesome.com'],
styleSrc: ["'self'","'unsafe-inline'", 'https://ka-f.fontawesome.com', 'https://fonts.googleapis.com'],
// connectSrc: ["'self'", 'https://ka-f.fontawesome.com'],
connectSrc: ["'self'", 'https://ka-f.fontawesome.com'],
// reportUri: '/report-violation', // endpoint to get violation reports
},
reportOnly: false, // true for nonblocking mode, just to see violations
safari5: false
}));
Yeah, by opt contentSecurityPolicy: false, you just switch Off the Content Security Policy(CSP).
If you wish to use CSP (to make your app more secure), it need to set some rules if the default ones is no suitable. As seen from the console error, your web app loads fonts via fetch(), therefore you need to add https://ka-f.fontawesome.com source to the connect-src directive.
Something like that:
app.use(helmet.contentSecurityPolicy({
defaultSrc: ["'self'"],
scriptSrc: ["'self'"],
styleSrc: ["'self'"],
connectSrc: ["'self'", 'https://ka-f.fontawesome.com'],
// reportUri: '/report-violation', // endpoint to get violation reports
reportOnly: false, // true for nonblocking mode, just to see violations
safari5: false
}));
and then look at console errors or CSP reports what else is blocked and add related sources to the directives accordingly. https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP can helps at first steps.
instead of redefining all the directives, you can use the below code to only reset specific ones. This code redefines script source to 'self' and 'example.com'. Rest all remain as default
app.use(
helmet.contentSecurityPolicy({
directives: {
...helmet.contentSecurityPolicy.getDefaultDirectives(),
"script-src": [
"'self'",
"https://ka-f.fontawesome.com",
"https://kit.fontawesome.com",
],
"connect-src": ["'self'", "https://ka-f.fontawesome.com"],
},
})
);