We are using Nginx Web Server to run our localhost on secured 'https'.
Our server context in configuration file is like :
server {
listen 443 ssl;
server_name <our-server-name>;
ssl_certificate <certificate>
ssl_certificate_key <key>
location / {
proxy_pass http://<our-server-name>:<port number>
proxy_pass_request_headers on;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Our code flow is when user logs in and credentials get valid, user is routed to url : https://our-sever-name/authorise?token='token_value'&state='state_value'&home&cid='cid_value' which takes user to home page.
This works in production successfully, once credentials gets valid user is taken to home page, but locally using Nginx web server, once user's credentials gets valid and code redirects to the above url, we get 401 in network tab and it redirects to logout page.
I'm not sure but my guess is may be Nginx is not passing the token authentication to the proxy_pass url.
Our token is generated dynamically, its not hard coded.
Our application is written in React.
Please help. Thanks
Related
I've been working on a Full stack project with React, Mysql, Express and Nginx. The project is working fine locally. I'm trying to deploy this project on a GCP instance.
I'm struggling with how to handle authorization and cookies like accessToken and refreshToken with reverse proxy.
Made some changes in the Nginx configs and server at port 80.
Here is the overview :
I'm using reverse proxy method to interact with the server running at the instance with the help of PM2 module.
Nginx config :
server {
listen 80;
server_name GCP IP;
location / {
# proxy_bind 127.0.0.1;
client_max_body_size 100m;
proxy_buffers 8 16k;
proxy_buffer_size 16k;
add_header 'Access-Control-Allow-Origin' http://localhost:3000; #frontend port
add_header 'Access-Control-Allow-Credentials' 'true';
proxy_pass http://localhost:8800;
# replace port with your backend port
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $http_host;
proxy_set_header Cookie $http_cookie;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $remote_addr;
port_in_redirect off;
}
}
So, I'm able to access the frontend with http:// GCP IP , registering a user is working with "http:// gcp_ip /api/users/addUsers" . But when it comes to check the cookies it doesn't work http:// gcp_ip /api/users/token.
Login provides accessToken and refreshToken , a route which authenticate user's token at http:// gcp_ip /api/users/token just after someone logged in . This route interacts with the cookies.
const refreshToken = req.cookies.refreshToken;
Nginx is not able to access the cookie through the frontend for authentication.
I'm doing a port 80 redirect with namecheap : i'm doing mydomain.com to redirect to my server 400.300.200.100:myport. myport is not 80 but another port.
Now namecheap is stating "If the server (you are redirecting the domain to) has X-Frame feature disabled, you may select a Masked Redirect for the client's browser to display your domain name instead of http://1.2.3.4:50."
I would like my domain to be displayed instead of myserver:port. So where should i check if I have x frame disabled? in my react frontend ? in my nginx configuration?
Should I put
X-Frame-Options: DENY
or
X-Frame-Options: SAMEORIGIN
?
Can someone tell me if i need to configure this on nginx?
this is my nginx.conf
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/storybook-static;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /wagtail {
proxy_pass http://172.20.128.2:8000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Script-Name /wagtail;
}
location /static/ {
alias /app/static/;
}
location /media/ {
alias /app/media/;
}
}
For security reasons usually an xframe 'same origin' option is used.
Go to where Nginx is installed and then a conf folder
check the following parameter in nginx.conf under server section
add_header X-Frame-Options.
Another way is to go to your Nginx installation directory, if using Linux and run
grep -rnw 'X-Frame'
It will show you all files with header traces.
I have an express server on an ec2 instance that has an api (/api) and a client (everything that's not /api handled in react.)
Goging to http://ip.address:3000 works fine. It shows the app and everything works.
However going to https://ip.address (forwarded by nginx) doesn't work fine. It loads my index.html correctly but 404s on all the /static/bundle.js and /static/bundle.css files.
nginx
# redirect to node for the dynamic stuff
location / {
proxy_pass https://localhost:8003/index.html;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_hide_header X-Powered-By;
}
express
let router: express.Router = express.Router();
router.use(express.static(path.join(__dirname, "/build")));
const api: ApiRouter.Api = new ApiRouter.Api();
router.use("/api", api.router.bind(api.router));
//Catch all for react - client side routing
router.get("*", function(req, res) {
res.sendFile(path.resolve(__dirname, "/build/index.html"));
});
If you tell Nginx to
proxy_pass https://localhost:8003/index.html;
Then every request which matches that location block will have the matching part of its URL path replaced with whatever path you have added to your proxy_pass URL.
Your location block is simply / So if I request www.yoursite.com/static/bundle.js then Nginx will match the first /, replace it with your path and add the rest. So it will try and serve www.yoursite.com/index.htmlstatic/bundle.js
You should proxy /api through Nginx too, and if the static files are coming from an upstream proxy you should enable proxy caching within Nginx too
I'm running SailsJS on a digitalocean droplet (MEAN Stack with nginx). All my requests are mapped to my Angular frontend except those on /api which are mapped to a proxy_pass on port 1337 (on which Sails runs). This procedure works fine.
Now I'd like to restrict the access to my API to only allow requests from my frontend. I already tried to deny / allow from within my nginx config but this blocks the the user request itself. I tried several answers like this as well but they didn't work out.
What would be the recommended way to limit access to my Sails API to localhost? I'd like to run multiple apps on my droplet and use Sails as my API that should only be accessible by the apps in my droplet.
My nginx config:
upstream sails_server {
server 127.0.0.1:1337;
keepalive 64;
}
server {
server_name domain.com;
index index.html;
location / {
root /opt/domain/build;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
client_max_body_size 500M;
}
}
– Thanks in advance!
I think you can't do this because angular runs in your client, so you need to get IP from all you users. You can use something simple that works with trustes proxys
var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress
or use some more complex and trusted like link
I have an app where the admin side is built in angular, but the front consumer facing side is not.. and lives on a different server.
I'd like if visitors coming to:
domain.com/#/admin => angular app
But if they got to:
domain.com
This goes to the other server
Is this possible?
Thanks.
For a little more clarity, I think what I need is this:
I have a rails app as an api that angular consumes. Rails lives on server A and Angular lives on server B.
Both servers use nginx as the web server.
Also, the rails app serves up its own content, so I want any path other than admin to go to rails.
What I want is if users go to:
mydomain.com --> they hit the rails app and content on server A
when they go to:
mydomain.com/admin or mydomain.com/#/admin --> they hit the angular app on server B
I think I almost figured it out with the following nginx configs on the rails server, server A:
upstream serverA {
server rails;
server unix:///var/www/rails/shared/tmp/sockets/puma.sock;
}
upstream serverB {
server angular;
}
server {
listen 80;
server_name serverA;
root /var/www/rails/current/public;
location / {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://serverA;
}
location ~* ^/assets/ {
expires 1y;
add_header Cache-Control public;
add_header Last-Modified "";
add_header ETag "";
break;
}
location /admin/ {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://serverB/#/;
}
}
While this gets me close, my angular scripts and styles that are references by my angular index.html file are not being found.