TechOverflow Logo
TechOverflow

如何使用 nginx 允许你的 EtherPad 被包含在 IFrame 中

English Deutsch 简体中文

在我们之前的文章使用 nginx 作为反向代理的 Etherpad 现代 Docker-Compose 配置中，我们展示了如何创建简单、可靠的 Etherpad 安装。

然而，如果你想在外部网站上包含 Etherpad，你将看到类似这样的连接拒绝错误

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

并且 Etherpad iframe 不会加载。

为了修复此问题，我们将在 nginx 配置中添加一行。使用此方法，你需要列出所有允许包含 Etherpad 的域名（在此示例中为 https://gather.town）。

要添加的行是

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

需要添加到 location / { ... } 块内。location / 块的完整示例：

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";
}

完整 nginx 配置示例：

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
}

工作原理

在 nginx 内反向代理的 etherpad 后端将添加 X-Frame-Options: sameorigin 头，有效地禁止来自其他域的 iframe。使用 add_header 子句，nginx 将用 Allow-From https://gather.town 覆盖此值。浏览器将只看到 Allow-From https://gather.town，允许从列出的域包含 iframe。

Check out similar posts by category: Networking, Nginx