Встраивание Grafana-дашбордов с авторизацией и multi-tenant под ключ

Как встраивать Grafana-дашборды без головной боли

Мы регулярно получаем запросы от SaaS-команд: Grafana уже развёрнута, дашборды готовы, но встроить их в интерфейс не получается. iframe не грузится из-за CSP, авторизация требует логина, а браузер блокирует сторонние cookies. При этом каждый клиент должен видеть только свои данные — multi-tenant обязателен. Расскажем, как мы решаем эти задачи и получаем рабочее embedded-решение за несколько дней.

Какие проблемы решает встраивание Grafana?

Основная боль — безопасность. Анонимный iframe слишком прост, но для приватных данных не годится. Второй типичный сценарий — SameSite cookies: браузеры всё агрессивнее блокируют межсайтовые сессии. Третий — CSP: если в политике безопасности нет frame-src для вашего Grafana-домена, дашборд не отобразится. И наконец, mobile: стандартный интерфейс Grafana не адаптирован под телефоны.

Два подхода: anonymous vs embedded

Самый простой вариант — анонимный iframe. Grafana разрешает доступ без аутентификации, вы вставляете URL дашборда в iframe. Подходит для публичных панелей (мониторинг сайта, uptime). Но если данные приватные, нужна авторизация.

Второй вариант — встраивание с сервисным аккаунтом. Grafana 9.1+ поддерживает специальные токены, которые не требуют cookies. Вы генерируете URL на своём сервере с подписанным токеном и передаёте его в iframe. Пользователь даже не знает, что смотрит данные из Grafana.

Как настроить авторизацию через сервисные аккаунты?

Для продакшена используйте именно этот способ. Конфигурация Grafana:

[security] allow_embedding = true [auth.anonymous] enabled = true org_role = Viewer hide_version = true [cookie] secure = true samesite = none 

Создайте сервисный аккаунт и токен:

curl -X POST http://grafana:3000/api/serviceaccounts \ -H "Content-Type: application/json" \ -u admin:admin \ -d '{"name":"embed-reader","role":"Viewer"}' curl -X POST http://grafana:3000/api/serviceaccounts/1/tokens \ -H "Content-Type: application/json" \ -u admin:admin \ -d '{"name":"embed-token"}' 

Токен храните на сервере и никогда не отдавайте клиенту.

Генерация signed URL на бэкенде

URL для iframe формируется на вашем сервере. Пример на TypeScript:

interface GrafanaEmbedOptions { dashboardUid: string; panelId?: number; from?: string; to?: string; vars?: Record<string, string>; theme?: 'light' | 'dark'; kiosk?: boolean; } class GrafanaEmbedService { constructor( private readonly baseUrl: string, private readonly serviceAccountToken: string ) {} buildEmbedUrl(options: GrafanaEmbedOptions): string { const { dashboardUid, panelId, from = 'now-24h', to = 'now', vars = {}, theme = 'light', kiosk = true } = options; const params = new URLSearchParams({ from, to, theme, ...(kiosk ? { kiosk: 'tv' } : {}) }); Object.entries(vars).forEach(([k, v]) => params.append(`var-${k}`, v)); const path = panelId ? `/d-solo/${dashboardUid}?panelId=${panelId}&` : `/d/${dashboardUid}?`; return `${this.baseUrl}${path}${params.toString()}`; } } 

Реализация на фронтенде

React‑компонент для iframe с лоадером и обработкой ошибок:

import { useState, useEffect } from 'react'; interface GrafanaPanelProps { dashboardUid: string; panelId: number; vars?: Record<string, string>; from?: string; to?: string; height?: number; title?: string; } export function GrafanaPanel({ dashboardUid, panelId, vars, from = 'now-24h', to = 'now', height = 300, title }: GrafanaPanelProps) { const [embedUrl, setEmbedUrl] = useState<string | null>(null); const [loading, setLoading] = useState(true); const [error, setError] = useState<string | null>(null); useEffect(() => { fetch('/api/grafana/embed-url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ dashboardUid, panelId, vars, from, to }), }) .then(r => r.json()) .then(({ url }) => setEmbedUrl(url)) .catch(() => setError('Не удалось получить URL дашборда')); }, [dashboardUid, panelId, JSON.stringify(vars), from, to]); if (error) return <div className="text-red-500">{error}</div>; return ( <div className="relative rounded-lg overflow-hidden border bg-white" style={{ height }}> {title && <div className="px-4 py-2 border-b text-sm font-medium text-gray-700">{title}</div>} {loading && <div className="absolute inset-0 flex items-center justify-center bg-gray-50"><div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" /></div>} {embedUrl && <iframe src={embedUrl} width="100%" height={title ? height - 40 : height} frameBorder="0" onLoad={() => setLoading(false)} title={title ?? `Grafana panel ${panelId}`} />} </div> ); } 

API endpoint для генерации URL

Express‑пример с проверкой прав:

app.post('/api/grafana/embed-url', requireAuth, async (req, res) => { const { dashboardUid, panelId, vars, from, to } = req.body; const hasAccess = await checkDashboardAccess(req.user.id, dashboardUid); if (!hasAccess) return res.status(403).json({ error: 'Forbidden' }); const url = grafanaService.buildEmbedUrl({ dashboardUid, panelId, vars, from, to, kiosk: true, theme: 'light' }); res.json({ url }); }); 

Multi-tenant через template variables

Если один дашборд используется для разных клиентов, передавайте tenant_id в качестве переменной шаблона. Добавьте в URL var-tenant_id=123. В источнике данных Grafana отфильтруйте строки, например, WHERE tenant_id = '${tenant_id}' AND $__timeFilter(time). Каждый пользователь увидит только свои данные. Для масштабирования используйте datasource с прокси-сервером, который подставляет tenant_id из токена.

Что делать, если CSP блокирует iframe?

Добавьте домен Grafana в директиву frame-src:

Content-Security-Policy: frame-src https://grafana.yourdomain.com 

Также убедитесь, что SameSite cookie установлен на none (см. конфигурацию выше). Или, что надёжнее, используйте сервисные аккаунты — они не полагаются на cookies.

Что входит в работу по встраиванию?

• Аудит текущей инфраструктуры и требований к безопасности
• Настройка сервисного аккаунта и токенов в Grafana
• Разработка API для генерации signed URL с проверкой прав
• Интеграция React-компонента (или Vue/Angular) с обработкой загрузки и ошибок
• Настройка multi-tenant через template variables
• Оптимизация CSP и SameSite cookies
• Тестирование на десктопе, планшетах и мобильных устройствах
• Документация для команды

Процесс работы над встраиванием

Мы занимаемся встраиванием Grafana более пяти лет, реализовали более 50 проектов — от пары дашбордов до корпоративных multi‑tenant решений. В среднем экономия по сравнению с разработкой собственной панели составляет 60–80%. Гарантируем стабильную работу и соблюдение документации Grafana.

Получите консультацию инженера по вашему проекту. Закажите предварительную оценку — мы подберём оптимальную стратегию и назовём точные сроки.