I’m working on setting up a reverse proxy configuration through Apache to access Figma design prototypes using my custom domain with SSL. The basic proxy setup works fine for the main Figma website, but I’m running into issues when trying to access specific prototype pages.
The main Figma site proxies correctly, but when I navigate to prototype URLs, the page gets stuck on a loading screen and never fully loads the interactive prototype. I suspect this might be related to WebSocket connections that prototypes use for real-time features.
Here’s my current Apache configuration:
<IfModule mod_ssl.c>
<VirtualHost _default_:443>
Header always set Strict-Transport-Security "max-age=31536000; includeSubdomains;"
SSLUseStapling on
ServerName mydomain.com
DocumentRoot /var/www/mydomain
ProxyRequests Off
SSLProxyEngine On
ProxyPreserveHost Off
ProxyPass / https://www.figma.com/
ProxyPassReverse / https://www.figma.com/
SSLEngine on
SSLCertificateKeyFile server.key
SSLCertificateFile server.crt
SSLCertificateChainFile server.ca-bundle
</VirtualHost>
</IfModule>
I tried adding WebSocket support by enabling mod_proxy_wstunnel and including these rewrite rules:
RewriteEngine on
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule .* "wss://www.figma.com/$1" [P,L]
However, this approach didn’t resolve the issue. The browser console shows connection errors, and I’m not sure if it’s possible to properly tunnel WebSocket connections to external services like Figma without knowing their specific WebSocket endpoints.
Is there a way to configure Apache to properly handle WebSocket connections for Figma prototypes through a reverse proxy? What additional configuration might be needed to make this work?
I’ve hit this exact problem proxying interactive web apps through Apache. Figma prototypes need WebSocket connections for real-time collaboration and interactive features, but your setup isn’t handling the WebSocket upgrade requests properly. Your RewriteRule is trying to use wss:// but mod_proxy_wstunnel doesn’t work like that. You need ProxyPass directives instead. Try: ProxyPass /ws/ ws://www.figma.com/ws/ and ProxyPassReverse /ws/ ws://www.figma.com/ws/. However, the real issue is that you don’t know Figma’s actual WebSocket endpoint paths. Modern apps use dynamic WebSocket endpoints that change based on session or prototype ID. Without knowing Figma’s internal setup, you’re just guessing. Honestly? I’d reconsider this approach entirely. Figma’s built-in sharing works great, and you won’t have to maintain a reverse proxy setup.
this sounds like a nightmare to maintain. figma probably has csrf protection or origin checks breaking ur setup. try adding ProxyPassReverse for websockets and check if figma’s using specific subdomains for ws connections in dev tools network tab.
figma likely uses socket.io or smth similar with dynamic custom endpoints. ur rewrite rule won’t work bc their websocket paths aren’t static like /ws/ - they’re more like /socket.io/?EIO=4&transport=websocket&sid=randomstring. without knowing their exact socket implementation, ur guessin.
Been down this rabbit hole with other SaaS apps. Your problem isn’t just WebSocket config - Figma has multiple security layers like CORS headers, referrer checks, and subdomain isolation for prototypes. Even if you nail the WebSocket tunneling, you’ll hit JavaScript errors because the prototype code expects figma.com domain. Auth tokens and session cookies are domain-specific too, so users would authenticate through your proxy, breaking Figma’s OAuth flow. I spent weeks trying to proxy Sketch Cloud years ago and gave up. These design platforms use complex client-side routing and API calls that need the original domain context. Your Apache config looks right for basic proxying, but interactive prototypes are a whole different beast.
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.