how to use a reverse proxy to get around X-Frame-Options: SAMEORIGIN for iframe

Question

I am struggling to get around X-Frame-Options: SAMEORIGIN restriction on some pages so I can put them in an iframe.

I understand that one can use a reverse proxy server to get around that, but I am not sure how.

what I need is to create a touch screen interface for some lobby monitors that would have some external pages in an iframe. I do this to keep everything packed under the same ui. So ideally not all pages should use the reverse proxy.

can anyone throw some light, with an example preferably ?

thanks

Answer 1

If you want to add an explicit allowall, you have to hide whatever header is coming from the service and add your own:

server {
  listen 80;
  server_name my-lobby-app.com;

  location / {
    proxy_pass  http://other-site.com
    proxy_set_header Host other-site.com;
    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_hide_header 'x-frame-options';
    proxy_set_header x-frame-options allowall;
  }
}

Answer 2

maybe you can try adding this in your nginx config

add_header X-Frame-Options "" always;

like

location / {
    ...
    add_header X-Frame-Options "" always;
  }

it works for me

Answer 3

This nginx config code below might work for you. It hides the 'x-frame-options' from the client.

server {
  listen 80;
  server_name my-lobby-app.com;

  location / {
    proxy_pass  http://other-site.com
    proxy_set_header Host other-site.com;
    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_hide_header 'x-frame-options';
  }
}