لابی iFrame چیست و چگونه می توان آن را ادغام کرد
لابی iFrame چیست ؟
لابی iFrame یک ماژول لابی تعبیه شده (کاتالوگ بازی ها، آگهی ها، دسته ها، جستجو، شروع سریع) است که توسط ارائه دهنده محتوا/جمع کننده میزبانی می شود و در صفحه اپراتور از طریق
ایده کلیدی: اپراتور لابی را از ابتدا نمی نویسد، اما یکی از آن ها را به پایان می رساند، دریافت سریع زمان به بازار، پشتیبانی متقابل مرورگر و به روز رسانی بدون انتشار در کنار آن.
هنگامی که مناسب
راه اندازی سریع یک ارائه دهنده جدید/عمودی.
نیاز به یک نمایشگاه واحد برای چندین کشور/مارک.
فرمان محدود جلو در اپراتور.
جوانب مثبت و منفی
مزایا: سرعت، پایه تک کد، بارگیری خودکار محصولات جدید، تجزیه و تحلیل ارائه دهنده توافق شده.
معایب: کنترل کمتر بر روی پیکسل کامل، وابستگی به زمان آپدیت فروشنده، ردیابی پیچیدگی ها، محدودیت های SEO (محتوا در iframe به عنوان بخشی از DOM شما نشان داده نمی شود).
معماری پایه
1. Front (اپراتور): یک صفحه "/کازینو "با اسلات که"
2. واشر Auth: کوتاه مدت 'sessionToken' (JWT/مات) در پشت اپراتور تولید می شود.
3. لابی ارائه دهنده: اعتبار نشانه، جایگزین زبان/ارز/محدودیت ها، رندر بازی و آگهی ها.
4. اتوبوس پیام: "پنجره. ارسال پیام 'بین صفحه و iframe برای رویدادها (تعادل، شروع بازی، ثبت نام نقدی باز، و غیره).
5. Cashier/KYC/RG: از طرف اپراتور (خارج از iframe) فراخوانی می شود، اما با دستورات از لابی قابل دسترسی است.
حداقل الزامات پیاده سازی
مجوز: نشانه های کوتاه مدت (1-15 دقیقه) + چرخش شفاف (تازه کردن خاموش).
امنیت: CSP، 'sandbox' و دقیق 'اجازه' برای iframe، سخت 'پس از پیام' فیلتر.
پایداری: قرارداد رویداد (نسخه ها، backward-compat)، برازنده-fallback در صورت خطا.
UX: شبکه تطبیقی، ناوبری سریع، پیش بارگذاری کارت، صفحه نمایش اسکلت.
تجزیه و تحلیل: رویدادهای یکپارچه (تصور، کلیک، راه اندازی، خطا)، نقشه برداری در Amplitude/GA4.
مثال جاسازی (امنیت HTML +)
HTML
<iframe id = «providerLobby»
src = "https ://lobby. به عنوان مثال. کام/جاسازی ؟ نام تجاری = ACME & lang = ru & currency = EUR & token = {SESSION _ TOKEN}}"
بارگیری =» تنبل»
referrerpolicy =» strict-origin-when-cross-origin»
sandbox =» allow-scripts allow-same-origin allow-popups-to-escape-sandbox»
allow = "تمام صفحه ؛ پخش خودکار ؛ رسانه رمزگذاری شده ؛ کلیپ بورد خواندن ؛ کلیپ بورد نوشتن"
سبک = "عرض: 100٪ ؛ ارتفاع: 100vh ؛ مرز: 0 ؛ صفحه نمایش: بلوک ؛ ">
</iframe>
توضیحات:
- 'sandbox' - فقط پرچم هایی را که می خواهید فعال کنید. «allow-top-navigation» را غیر ضروری نکنید.
- 'allow' - اضافه کردن ویژگی های آگاهانه ؛ ' پرداخت تنها اگر در واقع استفاده می شود.
- 'referrerpolicy' - نشت پارامتر محدود.
سیاست امنیت محتوا:
به طور پیش فرض-src 'خود' ؛
frame-src https ://لابی. به عنوان مثال. کام ؛
اسکریپت-src 'خود' https ://lobby. به عنوان مثال. com 'ناامن درون خطی' ؛
img-src 'self' https ://لابی. به عنوان مثال. اطلاعات کام: ؛
connect-src 'self' https ://api. به عنوان مثال. کام https ://لابی. به عنوان مثال. کام ؛
X-Frame-Options برای صفحات شما با جاسازی شما تداخل ندارد → ارائه دهنده با شما تعبیه می کند و نه برعکس.
ایجاد یک توکن در backend (مثال Node/Express)
js واردات jwt از «jsonwebtoken» ؛
واردات اکسپرس از «اکسپرس» ؛
برنامه const = اکسپرس () ؛
app. get («/lobby-token », (req, res) => {
محموله کانست = {
زیر: رک. کاربر. id، نام تجاری: «ACME»، ارز: «EUR»، lang: «ru»، ts: تاریخ. در حال حاضر ()
};
نشانه کانست = jwt. نشانه (payload، فرآیند. ENV. LOBBY_JWT_SECRET، [..]
الگوریتم: «HS256,» expiresIn: «10m», صادر کننده: «acme-کازینو», مخاطبان: «لابی ارائه دهنده»
});
RES. json ({token});
});
بهترین شیوه ها: TTL کوتاه، زمینه های حسابرسی، کلید در HSM/Secrets Manager، چرخش «بچه».
پیام قرارداد رویداد
از «postMessage» با لیست سفید منبع و اعتبار سنجی طرح استفاده کنید.
جی اس
//میزبان (اپراتور)
const iframe = سند. getElementById («providerLobby»). contentWindow ؛
const LOBBY_ORIGIN = "https ://lobby. به عنوان مثال. کام" ؛
پنجره. addEventListener («پیام»، (e) => {
اگر (. منبع! = = LOBBY_ORIGIN) بازگشت ؛
const {type, payload} = e. data {};
سوئیچ (نوع) {
مورد «لابی: آماده»:
//اطلاعات شروع iframe را ارسال کنید. postMessage ({نوع: «host: context», payload: {
تعادل: 125. 40, kycStatus: «verified», محدودیت: {betMax: 100}
}}، LOBBY_ORIGIN) ؛
شکستن ؛
مورد «لابی: تغییر اندازه»:
سند. getElementById («providerLobby»). سبک. ارتفاع = بار. ارتفاع + «px» ؛
شکستن ؛
مورد «لابی: openCashier»:
openCashier () ؛//عملکرد شکستن شما ؛
مورد «لابی: راه اندازی بازی»:
launchGame (بارگیری. gameId) ;//می تواند یک پنجره جدید/سوراخ شکستن باز;
مورد «لابی: requestTokenRefresh»:
refreshLobbyToken (). سپس (t =>
آی فریم. postMessage ({نوع: «host: newToken», payload: {token: t}}, LOBBY_ORIGIN)
);
شکستن ؛
}
});
رویدادهای استاندارد (مجموعه مثال):
- От лобби → хосту: «لابی: آماده»، «لابی: تغییر اندازه»، «لابی: openCashier»، «لابی: openRG»، «لابی: launchGame»، «لابی: آهنگ»، «لابی: درخواست TokenRefresh»، «لابی: خطا».
- از میزبان → لابی: «میزبان: زمینه» (تعادل، محلی، محدودیت ها)، «میزبان: newToken»، «میزبان: balanceUpdate»، «میزبان: rgState»، «میزبان: ناوبری».
در حال اجرا بازی از لابی
دو روش:1. در داخل همان iframe - سریع تر، اما کنترل کمتر و ردیابی سخت تر است.
2. جدا کردن ریشه/پنجره - معیارهای ساده تر، شما می توانید پوشش های خود را (RG/limits)، سازگاری بهتر با نمایش وب را قطع کنید.
حداقل مسیر:- لابی می فرستد 'لابی: launchGame {GameId}'.
- میزبان "gameToken" را در پشت خود ایجاد می کند و "/game/: id? نشانه =... '.
- بازی توکن را می پذیرد، اعتبار می دهد، جلسات شرط بندی را شروع می کند.
UX و عملکرد
لمس Α: 3-5 بلندگو بر روی دسکتاپ، 2 - قرص، 1 - تلفن همراه ؛ ارتفاع کارت ها را تنظیم کنید.
اسکلت ها و بارگذاری تنبل (تصاویر «بارگیری =» تنبل «،» fetchpriority = «کم» برای گالری ها).
Quick Find and Filters - تگ های انتخاب شده در 'را به یاد داشته باشید ؟ '/' localStorage 'را جستجو کنید.
کلیک بر روی کارت: کلیک کنید منطقه ≥ 44px ؛ پشتیبانی از صفحه کلید (A11y).
متغیرهایی از آگهی ها: به طوری که طرح «پرش» نیست.
سیاست رسانه ای iOS: پخش خودکار ویدئو/صوتی نیاز به ژست کاربر دارد. این را به صورت دموی در نظر بگیرید.
انطباق و مسئولیت بازیکن (RG)
محدودیت ها و وقفه ها: پشتیبانی از نمایش محدودیت های بازیکن فعلی در لابی (فقط خواندنی)، فراخوانی فرم تغییر در طرف میزبان.
خود حذفی: رویداد 'لابی: openRG → ماژول RG خود را خارج از iframe باز کنید.
بله. -banners و 18 +: در سمت میزبان، و نه در داخل لابی، به طوری که به خلاقیت ارائه دهنده بستگی ندارد.
GDPR/کوکی ها: لابی - شخص ثالث، در مورد کوکی رضایت و چارچوب قانونی (ضرورت قراردادی/منافع قانونی) فکر می کنم.
بومی سازی و برندسازی
عبور زبان/ارز/منطقه به «src» و/یا «میزبان: زمینه».
اجازه دهید متغیرهای برچسب سفید: رنگ ها، آرم ها، فونت ها.
بلوک های «مورد علاقه/اخیر» را در طرف اپراتور نگه دارید تا هنگام تغییر فروشنده اطلاعات را از دست ندهید.
تجزیه و تحلیل و معیارها
لایه ردیابی (مثال):- 'lobby _ impression'، 'tile _ view'، 'tile _ click'، 'search _ use'، 'category _ change'، 'launch _ game'، 'error _ view'.
- TTFB-Bet (زمان ورود به لابی به شرط اول)، CR_deposit→launch، دسته بندی CTR/جستجو، میانگین عمق مشاهده.
رویدادهای جمع آوری شده از iframe ؛ اجتناب از «شمارش دوگانه» با پیکسل های ارائه دهنده.
طرح آزمون پیاده سازی
1. امنیت: چک کردن CSP، بدون اجازه اضافی و "sandbox" پرچم، اعتبار سنجی از "postMessage. اصل و نسب.
2. Sessions: token expiration, silent-refresh, behavior at 401/403.
3. تغییر اندازه: ارتفاع صحیح در نمای موبایل/وب (Android/iOS).
4. میز نقدی/CCM: سناریوهایی برای باز کردن/بستن مدل ها توسط رویدادهای لابی.
5. عدم دسترسی ارائه دهنده: زمان بندی، نمایش خرد و بازپرداخت.
6. RG Limits: نمایش و جلوگیری از شروع بازی در قفل.
7. سوئیچینگ محلی/ارز: در پرواز و در راه اندازی مجدد.
8. تجزیه و تحلیل: مقایسه شمارنده میزبان در مقابل فروشنده.
خطاهای رایج (ضد الگوهای)
یک شنونده «پیام» را بدون چک کردن «origin» قطع کنید.
صدور iframe دسترسی کامل ('اجازه همان مبدا اجازه بالا ناوبری توسط کاربر فعال' «فقط در مورد»).
نشانه های طولانی مدت بدون چرخش.
به محتوای لابی برای SEO اعتماد کنید.
مخلوط کش بازیکن و کش دایرکتوری ارائه دهنده (می شکند شخصی).
اجرای بازی در داخل iframe همان بدون ردیابی کنترل و RG پوشش.
چک لیست ادغام لابی iFrame
- قرارداد رویداد توافق (نسخه، انواع، طرح).
- اجرا/لابی رمز با TTL ≤ 15 دقیقه و چرخش.
- پیکربندی CSP، 'sandbox'، 'اجازه'، 'referrerpolicy'.
- متصل صندوقدار/KYC/RG و مرتبط 'openCashier '/' openRG' حوادث.
- فکر کردن به عقب نشینی زمانی که ارائه دهنده کاهش می یابد.
- بررسی محلی سازی، ارزها، آگهی های سن.
- تنظیم تجزیه و تحلیل (شناسه کاربر/جلسه پایان به پایان).
- انجام متقابل مرورگر و تست نمایش وب تلفن همراه.
- توصیف دفتر حوادث و نقاط تماس با فروشنده.
لابی iFrame یک راه سریع و عملی برای گسترش کاتالوگ بازی ها و کوتاه کردن زمان به بازار است. کلید یکپارچگی سالم، امنیت قوی، قرارداد رویداد روشن، مجوز قوی و UX/analytics متفکر در طرف اپراتور است. با انجام این کار یک روز، شما می توانید ادغام با فروشندگان جدید تقریبا «با کلیک» مقیاس.