How to allow your EtherPad to be included in IFrames using nginx

In our previous post A modern Docker-Compose config for Etherpad using nginx as reverse proxy we showed how to create a simple, reliable Etherpad installation.

However, if you want to include Etherpads on external websites, you’ll see connection refused errors like

Refused to display 'https://etherpad.nemeon.eu/p/Test123' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

and the Etherpad iframe won’t load.

In order to fix this, we’ll add a line to the nginx config in . Using this approach, you’ll need to list all the domains that are allowed to include the Etherpad (https://gather.town in this example).

The line to add is

add_header "X-Frame-Options" "Allow-From https://gather.town";

which needs to be added inside the location / { ... } block. Full example for the location / block:

location / {
    proxy_pass http://localhost:17201/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_redirect default;
    add_header "X-Frame-Options" "Allow-From https://gather.town";
}

Full nginx config example:

server {
    server_name  etherpad.mydomain.de;
    access_log off;
    error_log /var/log/nginx/etherpad.mydomain.de-error.log;

    location / {
        proxy_pass http://localhost:17201/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_redirect default;
        add_header "X-Frame-Options" "Allow-From https://gather.town";
    }

    listen [::]:443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/etherpad.mydomain.de/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/etherpad.mydomain.de/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot

}

server {
    if ($host = etherpad.mydomain.de) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen [::]:80; # managed by Certbot
    server_name  etherpad.mydomain.de;
    return 404; # managed by Certbot
}

How it works

The etherpad backend, which is reverse-proxied inside nginx, will add a X-Frame-Options: sameorigin header, effectively disallowing iframes from other domains. Using the add_header clause, nginx will overwrite this value with Allow-From https://gather.town. The browser will only see Allow-From https://gather.town, allowing iframe inclusion from the listed domains.