什么是iFrame lobby,以及如何集成它
什么是iFrame lobby
iFrame lobby是一个嵌入式大厅模块(游戏目录,横幅,类别,搜索,快速启动),由内容提供商/聚合器托管,并通过'
关键思想:操作员不会从头开始写大厅,而是连接完成的,获得即将到来的时间市场,跨浏览器支持和更新,而无需发布。
适当时
快速启动新的提供商/垂直。
需要为多个国家/品牌提供统一的展示。
操作员中有限的前端命令。
利弊
优点:速度,单一代码库,新产品的自动装载,提供商的一致分析。
缺点:较少控制像素完美,依赖供应商的药房,跟踪的复杂性,SEO限制(iframe中的内容不作为您的DOM的一部分进行索引)。
基本体系结构
1.Front(语句):"/casino"页面,其中包含'
2.Auth垫:在操作员的后端生成短寿命的"sessionToken" (JWT/opaque)。
3.Provider lobby:验证令牌,替代语言/货币/限制,渲染游戏和横幅。
4.消息总线:'窗口。页面和事件的iframe之间的postMessage'(平衡、游戏开始、打开结帐等)。
5.Cashier/KYC/RG:在操作员侧(iframe之外)调用,但可以由团队从大厅访问。
最低实施要求
授权:短寿命令牌(1-15分钟)+透明轮换(无声回收)。
安全性:CSP,"sandbox"和iframe的准确"allow",严格的"postMessage"过滤。
稳定性:事件合同(版本,backward-copat), graceful-fallback on bug。
UX:自适应网格,快速导航,卡片预装,skeleton屏幕。
分析:统一事件(impression, click, launch, error),映射到Amplitude/GA4。
嵌入示例(HTML+安全性)
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>
说明:
- "sandbox"-仅包含所需的标志。不要不必要地"allow-top-navigation"。
- "allow"-有意识地添加fichi; "payment"仅在实际使用时。
- "referrerpolicy"-限制参数泄漏。
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"与源的白名单和电路验证。
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);//可以打开新的窗口/断路器;
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.单独的rut/窗口-更简单的度量标准,可以悬挂其覆盖范围(RG/限制),更好地与Web View兼容。
最小路线:- 大厅发送"lobby: launchGame {gameId}".
- 主机在其后台生成"gameToken"并打开'/game/:id?token=…`.
- 游戏采用令牌,验证并开始下注会话。
UX和性能
Α删除:台式机上的3-5列,平板电脑2列,移动1列;记录卡片的高度。
骨架和懒惰装载(画廊的图像"loading="lazy","fetchpriority="low")。
快速搜索和过滤器:记住"?query"/"localStorage"中的选定标签。
点击卡:点击区域≥ 44px;键盘支持(A11y)。
横幅播放器:让停电不是"跳跃"。
iOS媒体策略:视频/音频自动播放需要用户手势;在演示视频中考虑这一点。
合规性和玩家责任(RG)
限制和计时:支持在大厅中显示当前玩家的限制(仅读取),在主机侧调用更改形式。
自我体验:"lobby: openRG"事件→在iframe外打开您的RG模块。
于尔。-横幅和18+:在主机侧而不是大厅内,以免依赖提供商的创意。
GDPR/Cookie:游说是第三方,思考Cookie和法律框架(contractual necessity/legitimate interest)。
本地化和品牌
在"src"和/或"host: context"中传输语言/货币/区域。
允许白色标签变量:颜色、徽标、字体。
将"最爱/最近"单元存储在操作员侧,以便在交换供应商时不会丢失数据。
分析和指标
跟踪层(示例):- `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.售票处/KUS:大堂活动的开场/闭幕情景。
5.提供商无法使用:超时,显示存根和转发。
6.RG限制:显示和禁止在锁定时启动游戏。
7.切换区域/货币:即时和重新启动时。
8.分析:比较主机vs供应商计数器。
典型错误(反模式)
挂起"消息"-listener而不检查"起源"。
发出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"事件。
- 在供应商降级时考虑倒退。
- 对本地化、货币、年龄横幅进行了核对。
- 配置了分析(端到端用户/会话ids)。
- 进行了跨浏览器和移动Web View测试。
- 描述了事件的运行手册以及与供应商的联系点。
iFrame游说是扩展游戏目录并减少时间到市场的一种快速而务实的方式。健康集成的关键是严格的安全性,明确的事件合同,可靠的授权以及操作员侧精心设计的UX/分析。一旦完成此操作,您可以通过点击几乎扩展与新供应商的集成。