I am working on a project which requires the installation of a reverse proxy before the webserver (game.example.com)
I have done the installation and currently I am working on the headers. I want to hide the client's IP and only the reverse proxy IP to be appearing on the destination server.
My /etc/nginx/sites-enabled/default file looks like this:
server {
listen 443 ssl;
server_name game.example.com;
ssl_certificate /root/example.crt;
ssl_certificate_key /root/example.key;
location / {
proxy_pass http://game.example.com;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;}
}
and a simple html page displays the IP from the other side (sorry for the long code)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User and Reverse Proxy IP Display</title>
<script>
window.onload = function() {
var userIPElement = document.getElementById("user-ip");
var userLocationElement = document.getElementById("user-location");
var reverseProxyIPElement = document.getElementById("reverse-proxy-ip");
// Function to retrieve user's IP address
var getUserIP = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// If the request is successful, display the user's IP address
var userIP = JSON.parse(xhr.responseText).ip;
userIPElement.innerText = userIP;
// Once user's IP is retrieved, get location and reverse proxy IP
getUserLocation(userIP);
getReverseProxyIP();
} else {
// If there's an error, display an error message
userIPElement.innerText = "Error retrieving user IP";
}
}
};
xhr.open("GET", "https://api.ipify.org?format=json");
xhr.send();
};
// Function to retrieve user's location
var getUserLocation = function(userIP) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// If the request is successful, display the user's location
var locationData = JSON.parse(xhr.responseText);
var userLocation = locationData.city + ", " + locationData.region + ", " + locationData.country_name;
userLocationElement.innerText = userLocation;
} else {
// If there's an error, display an error message
userLocationElement.innerText = "Error retrieving user location";
}
}
};
xhr.open("GET", "https://ipapi.co/" + userIP + "/json/");
xhr.send();
};
// Function to retrieve reverse proxy's IP address
var getReverseProxyIP = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// If the request is successful, display the reverse proxy's IP address
reverseProxyIPElement.innerText = xhr.getResponseHeader("X-Real-IP");
} else {
// If there's an error, display an error message
reverseProxyIPElement.innerText = "Error retrieving reverse proxy IP";
}
}
};
xhr.open("GET", "/");
xhr.send();
};
// Start by getting the user's IP address
getUserIP();
};
</script>
</head>
<body>
<h1>Welcome to Example</h1>
<h2>User and Reverse Proxy IP Display</h2>
<p>User's IP address: <span id="user-ip">Loading...</span></p>
<p>User's location: <span id="user-location">Loading...</span></p>
<p>Reverse proxy's IP address: <span id="reverse-proxy-ip">Loading...</span></p>
</body>
</html>
Ideally I want the reverse proxy's IP to be displayed and not the client IP, but currently I just get the client IP and not the reverse proxy's. Example of the current webpage below:
Welcome to Example
User and Reverse Proxy IP Display
User's IP address: 79.xx.xx.xxx
User's location: xxxxx, xxxxxxx, GRxxxxx
Reverse proxy's IP address: {blank}
I appreciate any information