how to check if my nginx server has x-frame disabled - reactjs

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.

Related

NGINX/Gunicorn - React + Flask (API) + Debian + SSL | API Communication Error

Hive -
I have a Flask + React app running on Debian using Nginx and Gunicorn (which is maintained via supervisor). When I set up my Nginx CONF file to just serve up the site over port 80, everything seemed to work fine except for a CORS error. This only happened in Chrome, but the entire site worked fine in Safari (a known Chrome issue). After tracking down the issue and determining that the cause was the lack of an SSL certificate, I set up my Nginx CONF file to support SSL. Now two things happen that frustrate me to no end:
When I go to the site, the Developer Console shows that the site is getting a Connection Refused on https://localhost:5000/.
When I use CURL to test the API, it works.
Both the React and Flask applications are hosted on the same server, and I even have port 5000 open to be safe (as well as SSL and standard 80).
My conf file is below, but some info that might be useful:
All URLs are served up at the root "domain.com/" of the website.
The Flask app has the API in a nested folder and the exposed API is of the format "domain.com/api/v1/{calls}".
I have UI Swagger installed, but can not access it from the browser.
The development environment works fine, but that is because I'm using the built-in Python/Flask server and running the frontend React app with NPM Start.
My code is below and I've left in place, as commented lines, other things I have tried to make this work to show the various efforts I've exerted. In the location /api section, I previously just had the include proxy_params and the proxy_pass...all other lines were added after they didn't work in the location/section. server_name has _ as the server_name. I also had this as the subdomain of my site and mixed & matched, but no dice.
server {
root /var/www/project-app/frontend/build;
index index.html;
server_name _;
location / {
# proxy_pass http://localhost:5000;
# proxy_redirect off;
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
try_files $uri $uri/ =404;
add_header Cache-Control "no-cache";
}
location /static {
alias /var/www/project-app/frontend/build/static;
expires 1y;
add_header Cache-Control "public";
}
location /api {
include proxy_params;
proxy_pass http://localhost:5000;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
listen 443 ssl; # managed by Certbot
listen [::]:443 ssl;
ssl_certificate /etc/letsencrypt/live/project/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/project/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
access_log /var/log/project_access.log;
error_log /var/log/project_access.log;
proxy_headers_hash_max_size 512;
proxy_headers_hash_bucket_size 128;
}
server {
if ($host = app.project.tld) {
return 301 https://$host$request_uri;
} # managed by Certbot
listen 80;
# server_name app.project.tld;
server_name _;
return 404; # managed by Certbot
}
Debian 11
Latest Nginx Version from APT
All packages are updated and installed via both PIP and NPM
Python 3.9.2
There are fillers in the code...such as app.project.tld...in my actual code, I have the subdomain of the actual app. Just trying to avoid someone telling me I made a copy/paste snafu :)
Thanks!

redirect all /api/.. requests to express

I currently have a nginx server running with a react app as frontend and a express server as backend.
The express server is running at localhost:5000/
server {
listen 80 ;
server_name siteurl;
server_name siteip;
# SSL configuration
#
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server;
#
# Note: You should disable gzip for SSL traffic.
# See: https://bugs.debian.org/773332
#
# Read up on ssl_ciphers to ensure a secure configuration.
# See: https://bugs.debian.org/765782
#
# Self signed certs generated by the ssl-cert package
# Don't use them in a production server!
#
# include snippets/snakeoil.conf; # Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;
location ^~ /api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:5000/;
proxy_ssl_session_reuse off;
proxy_set_header Host $http_host;
proxy_cache_bypass $http_upgrade;
proxy_redirect off;
}
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
root /usr/share/nginx/site/front;
try_files $uri /index.html =404;
}
I want all /api/* requests to redirect to my express server, currently when I do site/api/ it goes to my express server, however when doing /api/users it won't go to my express server and will go to my react server.
How would I be able to make this work
thx
When you use the ^~ modifier within the location directive, you actually tell nginx that the path following is a regular expression. If so, you have to format it as a regular expression:
location ^~ /api/.* {

React app doesnt launch from url location as set by nginx reverse proxy but does when port explicitly set

I'm trying to run a single react app on a separate port and using proxy pass from nginx to location '/app'
"http://localhost/app" -> React Application
The application is running under PM2 using its generated build with the command: 'pm2 serve build 3002'.
My thought was i do all this tested locally and then will port it to my own domain.
I've swapped 'localhost' for '127.0.0.1' just in case that had anything to do with it.
From online tutorials i've ended up with the following in my nginx "../sites-available/my_domain" file
server {
listen 80;
listen [::]:80;
server_name localhost;
location / {
root /var/www/my_domain/html;
index index.html index.htm index.nginx-debian.html;
try_files $uri $uri/ =404;
}
location /app {
proxy_pass http://localhost:3002;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
If i type "http://localhost:3002" into the url it works fine however "http://localhost/app" does not work and shows 404 error.
Side-note: "http://localhost" works fine and directs to the index.html stored at root.

Docker Reverse Proxy to React App with React Router

I've been hitting my head on the keyboard for 3 days trying to figure out why I can't get this to work.
Right now I am running two nginx servers on my machine. Both are running in docker containers.
One nginx is a reverse proxy. The other nginx is the actual one serving the static files built by 'yarn build'.
I currently get a 404 error when trying to access any of the files out side of the root file.
So example.com works just fine. But when I go to example.com/test (a react route) I get a 404 error.
So, here is my reverse proxy confiruation.
server {
listen 80;
server_name example.com www.example.com;
location / {
proxy_pass http://192.168.1.29:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location ^~ /.well-known/acme-challenge/ {
root /var/www/html;
}
}
Here is my actual example.com confiration to serve the static files (yes it's port 80 because it's running on port 80 inside the docker container. The exposed docker container port is 8080:
server {
listen 80;
listen [::]:80;
server_name localhost;
root /var/www/html;
try_files $uri $uri/ index.html;
index index.html;
location / {
}
}

SailsJS as API and Nginx: Restrict external access

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

Resources