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.
