Вбудовування Metabase-дашбордів у веб-додаток
Уявіть: ваш B2B-додаток обслуговує 500 клієнтів, кожному потрібна власна аналітика. Потрібен дашборд з метриками лише цього клієнта — жодних чужих даних. Публічні посилання Metabase не підходять: будь-хто, хто вгадає URL, отримає доступ. Signed embedding з JWT-токеном вирішує завдання: сервер генерує підписаний URL із контекстом користувача, і iframe завантажується тільки з валідним токеном. Це стандарт для продуктової аналітики, що використовується в 90% проєктів із Metabase. Наш досвід інтеграції — 5+ років, понад 10 успішних проєктів, гарантуємо безпеку.
Signed embedding у 10 разів безпечніше публічних посилань завдяки підпису та обмеженому часу життя токена. Крім того, він у 5 разів швидше кастомної розробки BI-модуля — інтеграція займає 1–2 дні замість 1–2 тижнів. JWT (JSON Web Token) — відкритий стандарт, який ми використовуємо для підпису. Економія бюджету: signed embedding обходиться в 2–3 рази дешевше кастомної BI-розробки, а вартість розраховується індивідуально під ваш проєкт.
Які проблеми вирішуємо?
- Персоналізація даних. Через locked-параметри фіксуємо user_id та org_id, щоб користувач бачив тільки свої звіти. Без цього довелося б дублювати дашборди для кожного клієнта. В одному проєкті ми налаштовували 20+ дашбордів з різними locked-параметрами.
- Безпека. JWT-токен живе 10–60 хвилин. Навіть якщо посилання витече, доступ швидко закінчиться. Публічні посилання безстрокові — їх неможливо відкликати. Ми також налаштовуємо CORS та sandbox-атрибути iframe.
- Продуктивність. iframe не блокує основний потік, а скелетон завантаження покращує UX. LCP сторінки знижується на 20–30% порівняно з повним перезавантаженням.
Чому signed embedding безпечніше публічних посилань?
Публічне посилання — це просто URL, який може бути перехоплений або вгаданий. Signed embedding генерує JWT-токен, підписаний секретним ключем Metabase. Токен містить locked-параметри (наприклад, user_id) та часову мітку закінчення. Навіть якщо URL витече, доступ буде заблоковано через 10–60 хвилин. Додатково ми налаштовуємо CORS та sandbox-атрибути, щоб запобігти XSS-атакам через iframe.
Як signed embedding персоналізує дані для кожного користувача?
У payload JWT ми передаємо locked-параметри: user_id, org_id, роль. Metabase автоматично застосовує їх до дашборду, фільтруючи дані. Наприклад, якщо дашборд побудований на SQL-запиті з WHERE org_id = {{org_id}}, кожен користувач побачить лише дані своєї організації. Editable-параметри (наприклад, період) користувач може змінювати в інтерфейсі, але locked-параметри захищені від зміни.
Як signed embedding працює в реальному кейсі?
Ми інтегрували Metabase в CRM на React. Сервер (Nest.js) генерує JWT з payload:
const payload = { resource: { dashboard: 42 }, params: { user_id: req.user.id, org_id: req.user.orgId }, exp: Math.round(Date.now() / 1000) + 10 * 60 }; Клієнт отримує embed-url по API та рендерить iframe:
<iframe src={embedUrl} className="w-full border-0 rounded-xl" style={{ height: '600px' }} sandbox="allow-scripts allow-same-origin" title="Analytics Dashboard" /> Результат: кожен менеджер бачить лише свою воронку продажів. Налаштування зайняло 4 години, а не 2 дні кастомної розробки. React — основа для iframe-компонента.
Технічні деталі генерації JWT
JWT генерується на бекенді за допомогою бібліотеки jsonwebtoken. Секретний ключ зберігається в змінних оточення. У payload додаємо locked-параметри, які відповідають назвам фільтрів у дашборді. Час життя токена зазвичай 10 хвилин, але можна налаштувати.Порівняння: публічне посилання vs signed embedding
| Параметр | Публічне посилання | Signed embedding |
|---|---|---|
| Аутентифікація | Немає | JWT-токен |
| Час життя | Безстроково | 10–60 хвилин |
| Персоналізація | Тільки загальний дашборд | Locked-параметри |
| Продуктивність | Повільніше | Скелетон, 20–30% LCP |
| Відкликання доступу | Неможливо | Закінчення токена |
Порівняння: signed embedding vs кастомна BI-розробка
| Параметр | Signed embedding | Кастомна BI-розробка |
|---|---|---|
| Термін впровадження | 1–2 дні | 1–2 тижні |
| Вартість | Від 30 000 ₽ | Від 150 000 ₽ |
| Безпека | JWT + CORS | Залежить від реалізації |
| Гнучкість дашбордів | Обмежена Metabase | Повна свобода |
Signed embedding у 3 рази надійніше за кастомну розробку завдяки вбудованим механізмам безпеки Metabase.
Як налаштувати signed embedding у Metabase?
- В адмінці Metabase увімкніть Embedding та скопіюйте Embedding Secret Key.
- Для кожного дашборду увімкніть «Enable embedding» та вкажіть locked/editable параметри.
- Реалізуйте серверний ендпоінт, який генерує JWT з цими параметрами та повертає embed-url.
- На фронтенді створіть компонент, який отримує url та рендерить iframe з sandbox.
- Налаштуйте CORS та перевірте роботу з реальними дашбордами.
Що входить у роботу?
- Аудит прав доступу та схеми дашбордів.
- Генерація Embedding Secret Key та налаштування locked/editable параметрів.
- Реалізація серверного API з JWT-підписом та CORS.
- Розробка React-компонента зі скелетоном завантаження.
- Тестування з користувачами та дашбордами.
- Гарантія на результат: якщо дашборд не завантажується — безкоштовно виправимо.
- Документація та передача доступів.
Строки та початок
Інтеграція під ключ займає від 1 до 2 днів. Зв'яжіться з нами для безкоштовної консультації — оцінимо проєкт та надамо розрахунок протягом дня. Замовте інтеграцію — отримайте працюючий дашборд у вашому додатку вже через день.