request.remote_addr is broken only inside socketio

[4n1qz5skwv]

App Info:

App is hosted on heroku and domain is in cloudflare. So user -> cloudflare -> heroku -> app
.
.
.

Proxy Fix:

app.wsgi_app = werkzeug.middleware.proxy_fix.ProxyFix(app.wsgi_app, x_for=2, x_host=1)

.
.
.

Example Code inside A Route:

@bp.route('/', methods=['POST', 'GET'])
def index():
    current_app.logger.info(f'R_IP: {request.remote_addr=}({request.access_route=}) | {request.headers=}')

Output:

[2022-06-08 12:55:32,950] INFO - R_IP: request.remote_addr='103.102.43.1'(request.access_route=ImmutableList(['103.102.43.1', '172.70.92.229'])) | request.headers=EnvironHeaders([('Host', 'www.....com'), ('Connection', 'close'), ('Accept-Encoding', 'gzip'), ('Cf-Ipcountry', 'BD'), ('X-Forwarded-For', '103.102.43.1, 172.70.92.229'), ('Cf-Ray', '7181c84caeba8950-SIN'), ('X-Forwarded-Proto', 'http'), ('Cf-Visitor', '{"scheme":"https"}'), ('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0'), ('Accept', 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8'), ('Accept-Language', 'en-US,en;q=0.5'), ('Dnt', '1'), ('Upgrade-Insecure-Requests', '1'), ('Sec-Fetch-Dest', 'document'), ('Sec-Fetch-Mode', 'navigate'), ('Sec-Fetch-Site', 'cross-site'), ('Sec-Fetch-User', '?1'), ('Cookie', '...'), ('Cf-Connecting-Ip', '103.102.43.1'), ('Cdn-Loop', 'cloudflare'), ('X-Request-Id', '47563a85-8e2e-477d-9b6a-5516d4559d46'), ('X-Forwarded-Port', '80'), ('Via', '1.1 vegur'), ('Connect-Time', '0'), ('X-Request-Start', '1654692932948'), ('Total-Route-Time', '0')])

Here, request.remote_addr='103.102.43.1' which is Correct.
.
.
.

Example Code inside an Event Function:

def on_connect(self):
    current_app.logger.info(f'S_IP: {request.remote_addr=}({request.access_route=}) | {request.headers=}')
        

Output:

[2022-06-08 12:55:35,253] INFO - S_IP: request.remote_addr='10.1.90.173'(request.access_route=ImmutableList(['103.102.43.1', '172.70.142.6'])) | request.headers=EnvironHeaders([('Host', 'www.....com'), ('Connection', 'Upgrade'), ('Upgrade', 'websocket'), ('Accept-Encoding', 'gzip'), ('Cf-Ipcountry', 'BD'), ('X-Forwarded-For', '103.102.43.1, 172.70.142.6'), ('Cf-Ray', '7181c8563e294a17-SIN'), ('X-Forwarded-Proto', 'http'), ('Cf-Visitor', '{"scheme":"https"}'), ('User-Agent', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0'), ('Accept', '*/*'), ('Accept-Language', 'en-US,en;q=0.5'), ('Sec-Websocket-Version', '13'), ('Origin', 'https://www.....com'), ('Sec-Websocket-Extensions', 'permessage-deflate'), ('Sec-Websocket-Key', 'p7+JPb4W5XiOvmUlOAfMXQ=='), ('Dnt', '1'), ('Cookie', '...'), ('Sec-Fetch-Dest', 'websocket'), ('Sec-Fetch-Mode', 'websocket'), ('Sec-Fetch-Site', 'same-origin'), ('Pragma', 'no-cache'), ('Cache-Control', 'no-cache'), ('Cf-Connecting-Ip', '103.102.43.1'), ('Cdn-Loop', 'cloudflare'), ('X-Request-Id', '83273822-2420-478d-9185-ee47966d6fd6'), ('X-Forwarded-Port', '80'), ('Via', '1.1 vegur'), ('Connect-Time', '0'), ('X-Request-Start', '1654692934910'), ('Total-Route-Time', '0')])

Here, request.remote_addr='10.1.90.173' which is Very Wrong.
.
.
.

My IP Address from "whatismyipaddress.com"

My IP Address is:

IPv4: 103.102.43.1
IPv6: Not detected

[4n1qz5skwv]

Edit: Updated with recent data.

[miguelgrinberg]

The problem is that you are applying the ProxyFix middleware to the Flask application too early, before SocketIO has a chance to reconfigure the middlewares to include itself. So you end up with something like this:

graph LR
  SocketIO-Middleware --> ProxyFix
  ProxyFix --> Flask-App
  SocketIO-Middleware --> SocketIO-App

Loading

which leaves the SocketIO side without coverage. If you initialize Socket.IO before adding ProxyFix you would have a better looking structure:

graph LR
  ProxyFix --> SocketIO-Middleware
  SocketIO-Middleware --> Flask-App
  SocketIO-Middleware --> SocketIO-App

Loading

[4n1qz5skwv]

Thank you. It Worked !!! Though the diagram looks backward to me :D

[miguelgrinberg]

Heh, sure, you can look at it from both sides. My diagram shows the flow of incoming requests as they pass through middlewares.