TechOverflow Logo
TechOverflow

Etherpad in IFrames mit nginx einbinden lassen

English Deutsch

In unserem vorherigen Beitrag Eine moderne Docker-Compose-Konfiguration für Etherpad mit nginx als Reverse-Proxy haben wir gezeigt, wie man eine einfache, zuverlässige Etherpad-Installation erstellt.

Wenn man jedoch Etherpads auf externen Websites einbinden möchte, sieht man Verbindungsfehler wie

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

und das Etherpad-iframe wird nicht geladen.

Um dies zu beheben, fügen wir eine Zeile zur nginx-Konfiguration hinzu. Bei diesem Ansatz müssen alle Domains aufgelistet werden, die das Etherpad einbinden dürfen (https://gather.town in diesem Beispiel).

Die hinzuzufügende Zeile ist

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

welche innerhalb des location / { ... }-Blocks hinzugefügt werden muss. Vollständiges Beispiel für den location /-Block:

nginx.conf
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";
}

Vollständiges nginx-Konfigurationsbeispiel:

nginx.conf
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
}

Funktionsweise

Das Etherpad-Backend, das über nginx als Reverse-Proxy bereitgestellt wird, fügt einen X-Frame-Options: sameorigin-Header hinzu, der iframes von anderen Domains effektiv verhindert. Mit der add_header-Direktive überschreibt nginx diesen Wert mit Allow-From https://gather.town. Der Browser sieht nur Allow-From https://gather.town, was die iframe-Einbindung von den aufgelisteten Domains erlaubt.

Check out similar posts by category: Networking, Nginx