Що таке iFrame lobby і як його інтегрувати

Що таке iFrame lobby

iFrame lobby - це вбудований модуль лобі (каталог ігор, банери, категорії, пошук, швидкий старт), який хоститься у постачальника контенту/агрегатора і відображається всередині сторінки оператора через'< iframe>'.

Ключова ідея: оператор не пише лобі з нуля, а підключає готове, отримуючи швидкий time-to-market, крос-браузерну підтримку і оновлення без релізів на своїй стороні.

Коли це доречно

Швидкий запуск нового провайдера/вертикалі.

Потрібна уніфікована вітрина для декількох країн/брендів.

Обмежена команда фронтенда у оператора.

Плюси і мінуси

Плюси: швидкість, єдина кодова база, автонавантаження новинок, узгоджена аналітика провайдера.

Мінуси: менше контролю над піксель-перфект, залежність від аптайма вендора, тонкощі трекінгу, обмеження SEO (контент в iframe не індексується як частина вашого DOM).

Базова архітектура

1. Front (оператор): сторінка '/casino'зі слотами, в яку вбудовується'< iframe src = «.../lobby?»...>'.

2. Auth прокладка: короткоживучий'sessionToken'( JWT/opaque) генерується на бекенді оператора.

3. Provider lobby: валідує токен, підставляє мову/валюту/ліміти, рендерить ігри і банери.

4. Messaging шина: `window. postMessage'між сторінкою та iframe для подій (баланс, старт гри, відкрити касу тощо).

5. Cashier/KYC/RG: викликаються на стороні оператора (поза iframe), але доступні з лобі командами.

Мінімальні вимоги до впровадження

Авторизація: short-lived токени (1-15 хв) + прозора ротація (silent refresh).

Безпека: CSP,'sandbox'і точний'allow'для iframe, сувора фільтрація'postMessage'.

Стабільність: контракт подій (версії, backward-compat), graceful-fallback при помилках.

UX: адаптивна сітка, швидка навігація, передзавантаження карток, skeleton-екрани.

Аналітика: уніфіковані події (impression, click, launch, error), меппінг в Amplitude/GA4.

Приклад вбудовування (HTML + безпека)

html
<iframe id="providerLobby"
src="https://lobby. example. com/embed? brand=ACME&lang=ru&currency=EUR&token={{SESSION_TOKEN}}"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
allow="fullscreen; autoplay; encrypted-media; clipboard-read; clipboard-write"
style="width:100%;height:100vh; border:0; display:block; ">
</iframe>

Пояснення:

'sandbox'- включайте тільки потрібні прапори. Не давайте'allow-top-navigation'без необхідності.
'allow'- додавайте фічі усвідомлено;'payment'тільки якщо реально використовується.
«referrerpolicy» - обмежити витоки параметрів.

CSP на сторінці оператора (приклад):


Content-Security-Policy:
default-src 'self';
frame-src https://lobby. example. com;
script-src 'self' https://lobby. example. com 'unsafe-inline';
img-src 'self' https://lobby. example. com data:;
connect-src 'self' https://api. example. com https://lobby. example. com;

X-Frame-Options для ваших сторінок не заважає вбудовувати ви → провайдер вбудовується до вас, а не навпаки.

Генерація токена на бекенді (приклад Node/Express)

js import jwt from "jsonwebtoken";
import express from "express";
const app = express();

app. get("/lobby-token", (req, res) => {
const payload = {
sub: req. user. id,   brand: "ACME",   currency: "EUR",   lang: "ru",   ts: Date. now()
};
const token = jwt. sign(payload, process. env. LOBBY_JWT_SECRET, {
algorithm: "HS256",   expiresIn: "10m",   issuer: "acme-casino",   audience: "lobby-provider"
});
res. json({ token });
});

Кращі практики: короткий TTL, аудит полів, ключі в HSM/Secrets Manager, ротація'kid'.

Обмін повідомленнями: контракт подій

Використовуйте'postMessage'з whitelisting джерела і валідацією схеми.

js
//Хост (оператор)
const iframe = document. getElementById("providerLobby"). contentWindow;
const LOBBY_ORIGIN = "https://lobby. example. com";

window. addEventListener("message", (e) => {
if (e. origin!== LOBBY_ORIGIN) return;
const { type, payload } = e. data          {};
switch (type) {
case "lobby:ready":
//надішлемо стартові дані iframe. postMessage({ type: "host:context", payload: {
balance: 125. 40, kycStatus: "verified", limits: { betMax: 100 }
}}, LOBBY_ORIGIN);
break;
case "lobby:resize":
document. getElementById("providerLobby"). style. height = payload. height + "px";
break;
case "lobby:openCashier":
openCashier () ;//ваша функція break;
case "lobby:launchGame":
launchGame(payload. gameId) ;//може відкрити нове вікно/роут break;
case "lobby:requestTokenRefresh":
refreshLobbyToken(). then(t =>
iframe. postMessage({ type: "host:newToken", payload: { token: t } }, LOBBY_ORIGIN)
);
break;
}
});

Стандартні події (приклад набору):

Від лобі → хосту: `lobby:ready`, `lobby:resize`, `lobby:openCashier`, `lobby:openRG`, `lobby:launchGame`, `lobby:track`, `lobby:requestTokenRefresh`, `lobby:error`.
Від хоста → лобі: `host:context'( баланс, локаль, ліміти),'host:newToken`, `host:balanceUpdate`, `host:rgState`, `host:navigation`.

Запуск гри з лобі

Два підходи:

1. Всередині того ж iframe - швидше, але менше контролю і складніше трекінг.

2. Окремий рут/вікно - простіше метрики, можна навішувати свої оверлеї (RG/ліміти), краще сумісність з веб-в'ю.

Мінімальний маршрут:

Лобі відправляє'lobby:launchGame {gameId}`.
Хост генерує'gameToken'на своєму беку і відкриває '/game/:id? token=…`.
Гра приймає токен, валідує, стартує сесії ставок.

UX і продуктивність

Α даптив: 3-5 колонок на десктопі, 2 - планшет, 1 - мобільний; Фіксуйте висоту карток.

Скелетони і lazy-loading (зображення'loading =» lazy»','fetchpriority =» low»'для галерей).

Швидкий пошук і фільтри: запам'ятовуйте вибрані теги в'? query '/' localStorage'.

Кліки по картці: зона кліка ≥ 44px; підтримка клавіатури (A11y).

Плейсхолдери банерів: щоб лейаут не «скакав».

Медіа-політика iOS: відео/аудіо autoplay вимагають жесту користувача; враховуйте це в демо-роликах.

Комплаєнс і відповідальність гравця (RG)

Ліміти і таймаути: підтримка відображення поточних лімітів гравця в лобі (read-only), виклик форми зміни на стороні хоста.

Самовиключення: подія'lobby:openRG'→ відкриваємо ваш модуль RG поза iframe.

Юр. -банери та 18 +: на стороні хоста, а не всередині лобі, щоб не залежати від креативів провайдера.

GDPR/куки: лобі - третя сторона, продумайте cookie-consent і правову базу (contractual necessity/legitimate interest).

Локалізація та брендинг

Передавайте мову/валюту/регіон в'src'і/або в'host:context`.

Допускайте white-label змінні: кольори, логотипи, шрифти.

Блоки «вибране/недавні» зберігайте на стороні оператора, щоб при зміні вендора не втратити дані.

Аналітика та метрики

Трекінг-шар (приклад):

`lobby_impression`, `tile_view`, `tile_click`, `search_use`, `category_change`, `launch_game`, `error_view`.

Кореляція з продукт-метриками:

TTFB-Bet (час від заходу в лобі до першої ставки), CR_deposit→launch, CTR категорій/пошуку, Середня глибина перегляду.

Події з iframe агрегуйте у себе; уникайте «подвійного обліку» з пікселями провайдера.

Тест-план впровадження

1. Безпека: перевірка CSP, відсутність зайвих'allow'і'sandbox'прапорів, валідація'postMessage. origin`.

2. Сесії: витікання токена, silent-refresh, поведінка при 401/403.

3. Резайз: коректна висота на мобільних/веб-в'ю (Android/iOS).

4. Каса/КУС: сценарії відкриття/закриття модалок за подіями лобі.

5. Недоступність провайдера: тайм-аути, показ заглушки і ретраї.

6. Ліміти RG: відображення і заборона запуску гри при блокуваннях.

7. Перемикання локалей/валют: на льоту і при перезавантаженні.

8. Аналітика: порівняння лічильників хост vs вендор.

Типові помилки (анти-патерни)

Вішати'message'-листенер без перевірки'origin'.

Видавати iframe повний доступ ('allow-same-origin allow-top-navigation-by-user-activation'« про всяк випадок »).

Довгоживучі токени без ротації.

Покладатися на контент лобі для SEO.

Змішувати кеш гравця і кеш каталогу провайдера (ламає персоналізацію).

Запускати гру всередині того ж iframe без контролю трекінгу і RG-оверлеїв.

Чек-лист інтеграції iFrame lobby

Домовилися про контракт подій (версія, типи, схеми).
Реалізували/lobby-token з TTL ≤ 15 хвилин і ротацією.
Налаштували CSP,'sandbox','allow','referrerpolicy'.
Підключили cashier/KYC/RG і зв'язали події'openCashier '/' openRG'.
Продумали fallback при деградації провайдера.
Звірили локалізацію, валюти, вікові банери.
Налаштували аналітику (наскрізні user/session ids).
Провели крос-браузерні та мобільні веб-в'ю тести.
Описали runbook інцидентів і контактні точки з вендором.

iFrame-лобі - швидкий і прагматичний спосіб розширити каталог ігор і скоротити time-to-market. Ключ до здорової інтеграції - сувора безпека, чіткий контракт подій, надійна авторизація, і продуманий UX/аналітика на стороні оператора. Зробивши це одного разу, ви зможете масштабувати інтеграції з новими постачальниками практично «по клацанню».