IFrame lobby nima va uni qanday integratsiya qilish mumkin
iFrame lobby nima
iFrame lobby - bu kontent yetkazib beruvchi/agregatorda joylashtiriladigan va’
Asosiy g’oya: operator frontni noldan yozmaydi, balki tezkor time-to-market, kross-brauzer qo’llab-quvvatlashni va yangilanishlarni o’z tomonida chiqarmasdan ulaydi.
Qachon oʻrinli
Yangi provayder/vertikal tezda ishga tushiriladi.
Bir nechta mamlakatlar/brendlar uchun yagona vitrin kerak.
Operator uchun cheklangan frontend buyrugʻi.
Ijobiy va salbiy tomonlari
Ijobiy tomonlari: tezlik, yagona kod bazasi, yangiliklarni avto jo’natish, provayderning kelishilgan tahlili.
Kamchiliklar: piksel-perfekt ustidan kamroq nazorat qilish, vendor aptaymiga bog’liqlik, treking nozikligi, SEO cheklovlari (iframe tarkibidagi kontent DOMning bir qismi sifatida indekslanmagan).
Asosiy arxitektura
1. Front (operator): ’/casino’sahifa’
2. Auth yotqizish: qisqa umr ko’radigan’sessionToken’(JWT/opaque) operator bekendida hosil qilinadi.
3. Provider lobby: tokenni validatsiya qiladi, tilni/valyutani/limitlarni almashtiradi, o’yinlar va bannerlarni renderit qiladi.
4. Messaging shina:’window. postMessage’sahifasi va hodisalar uchun iframe oraligʻida (balans, oʻyin boshlanishi, kassani ochish va h.k.).
5. Cashier/KYC/RG: operator tomonida chaqiriladi (iframe tashqarisida), lekin jamoalar tomonidan lobbidan foydalanish mumkin.
Joriy etishga qo’yiladigan eng kam talablar
Avtorizatsiya: short-lived tokenlar (1-15 daqiqa) + shaffof rotatsiya (silent refresh).
Xavfsizlik: CSP,’sandbox’va aniq’allow’iframe uchun, qatʼiy filtrlash’postMessage’.
Barqarorlik: voqealar shartnomasi (versiyalar, backward-compat), xatoliklarda graceful-fallback.
UX: moslashuvchan to’r, tezkor navigatsiya, kartochkalarni oldindan yuklash, skeleton-ekranlar.
Tahlillar: unifikatsiyalangan hodisalar (impression, click, launch, error), Amplitude/GA4 meping.
Joylashtirish namunasi (HTML + xavfsizlik)
html
<iframe id="providerLobby"
src="https://lobby. example. com/embed? brand=ACME&lang=ru¤cy=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>
Tushuntirishlar:
- ’sandbox’ - faqat kerakli bayroqlarni yoqing. Keraksiz’allow-top-navigation’bermang.
- ’allow’ - fichlarni ongli ravishda qoʻshing;’payment’faqat amalda ishlatilsa.
- ’referrerpolicy’ - parametrlarning sizib chiqishini cheklash.
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;
Sahifalaringiz uchun X-Frame-Options siz → provayderingiz sizga emas, balki sizga o’rnatilishiga to’sqinlik qilmaydi.
Bekendda token yaratish (Node/Express misoli)
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 });
});
Eng yaxshi amaliyotlar: qisqa TTL, maydon auditi, HSM/Secrets Manager kalitlari, rotatsiya’kid’.
Xabar almashish: voqealar shartnomasi
Manbani whitelisting va sxemani tasdiqlash bilan’postMessage’dan foydalaning.
js
//Xost (operator)
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":
//Boshlang’ich iframe ma’lumotlarini yuboramiz. 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 () ;//sizning break funksiyangiz;
case "lobby:launchGame":
launchGame(payload. gameId) ;//yangi oyna/rout break ochishi mumkin;
case "lobby:requestTokenRefresh":
refreshLobbyToken(). then(t =>
iframe. postMessage({ type: "host:newToken", payload: { token: t } }, LOBBY_ORIGIN)
);
break;
}
});
Standart hodisalar (namuna):
- От лобби → хосту: `lobby:ready`, `lobby:resize`, `lobby:openCashier`, `lobby:openRG`, `lobby:launchGame`, `lobby:track`, `lobby:requestTokenRefresh`, `lobby:error`.
- Xost → lobbidan:’host: context’(balans, lokal, limitlar),’host: newToken’,’host: balanceUpdate’,’host: rgState’,’host: navigation’.
O’yinni lobbidan ishga tushirish
Ikkita yondashuv:1. Xuddi shu iframe ichida - tezroq, lekin kamroq nazorat va treking qiyinroq.
2. Alohida rut/oyna - metrikadan osonroq, siz o’zingizning overleylaringizni (RG/limitlar) osib qo’yishingiz mumkin, veb-vyu bilan yaxshiroq mos keladi.
Minimal yo’nalish:- Lobbi’lobby: launchGame {gameId}’joʻnatadi.
- Xost oʻz bekasida’gameToken’yaratadi va ’/game/: id’ni ochadi? token=…`.
- O’yin tokenni qabul qiladi, validatsiya qiladi, tikish sessiyalari boshlanadi.
UX va unumdorlik
Α daptiv: desktopda 3-5 kolonka, 2 - planshet, 1 - mobil; kartochkalarning balandligini belgilang.
Skeletonlar va lazy-loading (galereyalar uchun’loading =’lazy’,’fetchpriority =’low’tasvirlari).
Tez qidirish va filtrlar: tanlangan teglarni’? query ’/’ localStorage’bilan yodlang.
Kartochka bo’yicha bosish: bosish zonasi ≥ 44px; klaviatura yordami (A11y).
Bannerlarning pleysholderlari: layaut «sakrab» ketmasligi uchun.
iOS media siyosati: video/audio autoplay foydalanuvchi imo-ishorasini talab qiladi; buni demo roliklarda hisobga oling.
Komplayens va o’yinchining javobgarligi (RG)
Limitlar va taymautlar: o’yinchining joriy limitlarini lobbida ko’rsatishni qo’llab-quvvatlash (read-only), xost tomonida o’zgartirish shaklini chaqirish.
O’z-o’zidan chiqarib tashlash:’lobby: openRG’hodisasi → iframe’dan tashqarida RG modulingizni ochish.
Jur. -bannerlar va 18 +: provayderning ijodiga bog’liq bo’lmaslik uchun lobbi ichida emas, balki xost tomonida.
GDPR/cookie: lobbi - uchinchi tomon, o’ylab ko’ring cookie-consent va huquqiy baza (contractual necessity/legitimate interest).
Mahalliylashtirish va brending
Til/valyuta/mintaqani’src’va/yoki’host: context’ga oʻtkazing.
White-label oʻzgaruvchan ranglar, logotiplar, shriftlarga ruxsat bering.
Vendor almashtirilganda maʼlumotlarni yoʻqotmaslik uchun «tanlangan/yaqinda» bloklarini operator tomonida saqlang.
Analitika va metrika
Treking qatlam (misol):- `lobby_impression`, `tile_view`, `tile_click`, `search_use`, `category_change`, `launch_game`, `error_view`.
- TTFB-Bet (lobbiga kirishdan birinchi stavkagacha bo’lgan vaqt), CR_deposit→launch, CTR toifalari/qidirish, O’rtacha ko’rish chuqurligi.
Iframe voqealarini oʻzingizda jamlang; provayder piksellari bilan «ikki marta hisoblash» dan qoching.
Joriy etish test-rejasi
1. Xavfsizlik: CSP tekshiruvi, ortiqcha’allow’va’sandbox’bayroqlari yo’qligi,’postMessage validatsiyasi. origin`.
2. Sessiyalar: tokenning tugashi, silent-refresh, 401/403 da xulq-atvor.
3. Rezayz: mobil/veb-view (Android/iOS) uchun toʻgʻri balandlik.
4. Kassa/KS: lobbi voqealari bo’yicha modalkalarni ochish/yopish stsenariylari.
5. Provayderning mavjud emasligi: taym-autlar, qulflash va retrani koʻrsatish.
6. RG limitlari: blokirovka paytida oʻyinni koʻrsatish va ishga tushirishni taqiqlash.
7. Lokal/valyutalarni o’zgartirish: uchishda va qayta ishga tushirishda.
8. Analitik: xost va vendor hisoblagichlarini taqqoslash.
Tipik xatolar (anti-pattern)
’Origin’ ni tekshirmasdan’message’-listenerni osib qoʻyish.
Iframe’ga to’liq kirish (’allow-same-origin allow-top-navigation-by-user-activation’).
Rotatsiyasiz uzoq umr ko’radigan tokenlar.
SEO uchun lobbi kontentiga tayanish.
Oʻyinchining keshini va provayderning keshini aralashtirish (shaxsiylashtirishni buzadi).
Treking va RG-overleyni nazorat qilmasdan o’sha iframe ichida o’yinni ishga tushirish.
iFrame lobby integratsiya chek roʻyxati
- Voqealar shartnomasi (versiyasi, turlari, sxemalari) haqida kelishib oldik.
- 15 daqiqa va rotatsiya ≤ TTL bilan/lobby-token amalga oshirildi.
- CSP,’sandbox’,’allow’,’referrerpolicy’.
- Cashier/KYC/RG ulandi va’openCashier ’/’ openRG’voqealarini bogʻladi.
- Provayderning degradatsiyasida fallback haqida o’ylangan.
- Mahalliylashtirish, valyutalar, yoshga oid bannerlarni solishtirdik.
- Tahlilni sozlash.
- Biz brauzer va mobil veb-vy testlarini o’tkazdik.
- Hodisalar runbook va vendor bilan aloqa nuqtalari tasvirlangan.
iFrame-lobbi - o’yinlar katalogini kengaytirish va time-to-market-ni qisqartirishning tez va pragmatik usuli. Sog’lom integratsiyaning kaliti - qat’iy xavfsizlik, aniq voqealar shartnomasi, ishonchli avtorizatsiya va operator tomonida puxta o’ylangan UX/tahlil. Buni bir marta amalga oshirsangiz, siz yangi etkazib beruvchilar bilan integratsiyalashuvni deyarli «bosish orqali» kengaytirishingiz mumkin.