Use proxy server to bypass "x-frame-options" restrictions for iframes

Publication date: 2021-09-26

Issue: "x-frame-options" prevent embedding another webpage via iframe

I've been showing the subway timetime within my smarthome web UI for several years. But now the subway operator changed the web site. Luckily, there's now a new one that looked promising. But when attempting to show it in an iframe, Firefox just showed an error that embedding the web site in an iframe were not possible.

The reason are so-called "X-Frame-Options". Within an http header, a web site may specify whether it is allowed to embed it in a frame/iframe or not. Not what I wanted...

Solution: Proxy the web site via own web server and remove the header

We load the web site via nginx. It can remove and adapt headers as needed:

server {
        listen 80;
        listen [::]:80;
        server_name mvg.dh-smarthome.priv.hosting-srv.de;

        location / {
                proxy_set_header Host www.mvg.de;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass https://www.mvg.de/;

                proxy_hide_header Content-Security-Policy;
                proxy_hide_header X-Frame-Options;
                add_header X-Frame-Options "ALLOWALL";
        }
}

With that, my smarthome web UI is able to show the subway timetable again.