Dropdown of h2ogpt is not working when served through Nginx with security headers

[llmwesee]

Description

When serving a H2ogpt default them through Nginx with security headers configured, the dropdown feature within the app becomes unresponsive and stuck. This issue persists despite providing a nonce in the headers.

Reference

I have also raised the same issue:
gradio-app/gradio#7775 (comment)

My Nginix config

nginx header:

server {
    listen 443 ssl;
    server_name localhost;

    ssl_certificate /etc/ssl/certs/nginx-selfsigned.crt;
    ssl_certificate_key /etc/ssl/private/nginx-selfsigned.key;  # Fixed the key 
file path assuming it's .key, not .crt

	# # Set Content Security Policy (CSP) header
    
    add_header Content-Security-Policy "default-src 'self' ;worker-src 'self' bl
ob:;img-src 'self' data:; form-action 'self'; frame-ancestors 'self'; style-src 
'self' 'nonce-hello' ; frame-src 'self'; script-src 'self' 'nonce-script-hello';
";

    # Enable HTTP Strict Transport Security (HSTS) to force HTTPS
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" a
lways;

    # Prevent browsers from MIME sniffing
    add_header X-Content-Type-Options "nosniff" always;

    # Enable Cross-Origin Resource Sharing (CORS) for specific domains
    add_header Access-Control-Allow-Origin "https://localhost" always;

    # Prevent Clickjacking attacks
    add_header X-Frame-Options "SAMEORIGIN" always;

    # Enable XSS Protection
    add_header X-XSS-Protection "1; mode=block" always;

    location / {
        proxy_pass http://127.0.0.1:7860;
        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;
        proxy_buffering off;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
    
 
}

we cant remove header , because its for security purpose i.e csp headres and many others issues,
when we run this project, dropdown feature not working it get stucked. But without nginx configs it work perfectly fine.

Steps to Reproduce

Set up Nginx server with the provided configuration file.
Serve the app through this Nginx server.
Access the app and attempt to use the dropdown feature.
Expected Behavior
The dropdown feature should work smoothly without any issues when served through Nginx with the provided security headers.

Actual Behavior

The dropdown feature becomes unresponsive and stuck when served through Nginx with the provided security headers.

Additional Context

The provided Nginx configuration file includes various security headers (such as CSP, HSTS, etc.) for security purposes, which cannot be removed.

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.19.2
gradio_client version: 0.10.1

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.0.1
fastapi: 0.101.1
ffmpy: 0.3.1
gradio-client==0.10.1 is not installed.
httpx: 0.24.1
huggingface-hub: 0.19.4
importlib-resources: 6.1.0
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.7.1
numpy: 1.23.4
orjson: 3.9.15
packaging: 23.2
pandas: 2.0.2
pillow: 9.5.0
pydantic: 2.6.3
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.2.2
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.7.1
uvicorn: 0.23.2
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2023.6.0
httpx: 0.24.1
huggingface-hub: 0.19.4
packaging: 23.2
typing-extensions: 4.7.1
websockets: 11.0.3

[pseudotensor]

Thanks!

You can try gradio 3.50.2 and associated gradio_client 0.6.1

81e244d

We use that for k8.

[llmwesee]

@pseudotensor Thanks for your quick reply.
I installed gradio 3.50.2 and associated gradio_client 0.6.1. However, it is still not working.

The environment details and console logs are as follows:

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 3.50.2
gradio_client version: 0.6.1

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.2.0
fastapi: 0.110.0
ffmpy: 0.3.2
gradio-client==0.6.1 is not installed.
httpx: 0.27.0
huggingface-hub: 0.21.4
importlib-resources: 6.1.3
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.5.0
numpy: 1.24.4
orjson: 3.9.15
packaging: 23.2
pandas: 1.4.0
pillow: 9.5.0
pydantic: 2.6.3
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 5.3.1
requests: 2.31.0
semantic-version: 2.10.0
typing-extensions: 4.9.0
uvicorn: 0.28.0
websockets: 11.0.3
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2024.2.0
httpx: 0.27.0
huggingface-hub: 0.21.4


packaging: 23.2
requests: 2.31.0
typing-extensions: 4.9.0
websockets: 11.0.3

PLEASE HELP URGENTLY!!

[pseudotensor]

The gradio team would be best able to help. I don't have the required expertise. The best case for them is if you have an end-to-end repro or/or live instance showing the problem.