Skip to main content

Снять запрет на встраивание Diagrams.net на сторонние сайты через iframe

Чтобы позволить встроить Diagrams.net (draw.io) в iframe на любой сайт, вам нужно полностью снять ограничение X-Frame-Options и более мягко настроить Content-Security-Policy. Это сделает ваш сервер более гибким, но чуть менее безопасным, если сервер доступен в интернете. Вот как это можно сделать.
Инструкция для универсального разрешения:

    Откройте файл конфигурации /etc/nginx/conf.d/ВАШ_ДОМЕН.d/diagramsnet.conf:

sudo nano /etc/nginx/conf.d/ВАШ_ДОМЕН.d/diagramsnet.conf

Внутри блока location /diagram/ { ... } добавьте следующие строки:

# Разрешить встраивание на любой сайт
add_header X-Frame-Options "ALLOWALL";
add_header Content-Security-Policy "frame-ancestors *";

Итоговый блок должен выглядеть так:

location /diagram/ {
    # Serve only static content
    # Might switch to java WAR later if needed
    # See https://github.com/jgraph/drawio
    alias /var/www/diagramsnet/src/main/webapp/;

    # Разрешить встраивание на любой сайт
    add_header X-Frame-Options "ALLOWALL";
    add_header Content-Security-Policy "frame-ancestors *";

    # Common parameter to increase upload size limit in conjunction with dedicated php-fpm file
    #client_max_body_size 50M;

    # Include SSOwat user panel.
    include conf.d/yunohost_panel.conf.inc;
}

Сохраните изменения и закройте редактор.

Перезагрузите Nginx:

    sudo systemctl reload nginx

Что делают эти изменения:

    X-Frame-Options "ALLOWALL": Убирает все ограничения на встраивание сайта в iframe. Это старый механизм, но некоторые браузеры до сих пор его поддерживают.
    Content-Security-Policy "frame-ancestors *": Разрешает встраивание сайта в iframe на любом домене. Это современный способ управления безопасностью в браузерах.

Предупреждение:

Этот подход позволяет встроить Diagrams.net абсолютно на любой сайт, что может быть нежелательно, если ваш сервер доступен публично. Например:

    Злоумышленник может встроить ваш сервер в свою страницу и использовать его не по назначению.
    Это снижает уровень защиты от атак типа Clickjacking.

Более безопасный компромисс:

Если вы хотите минимизировать риски, но сохранить гибкость, вместо * можно использовать:

add_header Content-Security-Policy "frame-ancestors 'self' https://your-main-domain.com https://*.trusted-site.com";

Это ограничит встраивание только на ваш домен и определённый список доверенных сайтов.