IFrame和本机容器:何时选择
文章全文
1)术语和上下文
iFrame是一个嵌入第三方内容(游戏、结帐、小部件)的HTML容器。主机和内容在逻辑上被原点策略(same-origin策略)隔离。
本机容器是在WebView(WKWebView,Android WebView)中运行Web内容或被本机SDK(渲染,网络,支付,遥测)取代的应用程序/模块。
在哪里见面:游戏的开始和演示,大厅,售票处/登机,实时视频,头奖小部件,合作伙伴着陆。
2)简短的答桉: 选择什么
您需要快速启动、大量第三方内容、最低限度的开发→ iFrame。
需要离线/低延迟/重型图形/深度集成设备→本地容器(WebView+bridge或SDK)。
市场/staranalitics/严格的 gaidline(Apple/Google),系统支付,硬RG钩→本机容器。
媒体网站,SEO-landings,带有可播放插页→ iFrame的评论。
3)选择矩阵(简化)
4) iFrame: 什么时候是完美的
脚本:快速输出演示游戏、合作伙伴插入、头奖/评级小部件、带可玩单元的登陆、B2B聚合器。
优点
集成速度:单个"src"+键/参数。
客机与主机的严格隔离(SOP)-减少泄漏风险。
提供商的独立发行版(不会触及您的资料)。
廉价地扩展数百家供应商。
缺点
与设备和本地付款的集成有限。
更难进行深度遥测(大于"桥梁")。
3rd-party cookies/Storage (Safari/Firefox/ITP)的问题。
移动上复杂的后视镜/手势/键盘。
最佳做法
"sandbox"属性(限制"allow-forms","allow-scripts",在需要时逐点打开"allow-popups-to-escape-sandbox")。
"Content-Security-Policy"包含白色的提供商列表;"X-Frame-Options"用于敏感页面。
通信是带有验证事件的"postMessage"。起源和消息模式。
Resize: "ResizeObserver"在活动内+"postMessage("height")"→主机更改'iframe。style.height`.
存储-Storage Access API/fallbacks;State-通过URL参数或父状态。
RG/AML:停止信号(自我隔离,限制)-通过事件,iframe必须完成会话。
5)本土容器: 当他们赢了
脚本:带有实时游戏和收银机的移动应用程序,复杂的Onbording/KUS,低延迟实时流,离线模式,Stor Payment,AR/VR-fici。
优点
性能/低潜伏期,铁访问(相机,生物识别技术)。
单个UX和RG/AML深度集成(系统变量,本地大炮)。
可靠的应用内支付和订阅(StoreKit/Billing)。
精确的遥测和故障控制(crashlytics,traces)。
缺点
拥有价格:多平台开发,通过堆栈发布。
苹果/谷歌批准;对azart/付款的限制。
更多安全和隐私责任。
模式是
WebView+JS bridge(双向通道):游戏/支付/限制事件是本机发生的。
溷合:关键屏幕本机(结帐,KYC, RG),内容-WebView/iFrame。
提供商的SDK:游戏/流由库嵌入;主机给出令牌,限制,钱包。
6)通信: iFrame ⇄主机和WebView ⇄
Web(iFrame):- `window.postMessage({type, payload}, targetOrigin)`
- 事件图:'游戏。session.start/stop`, `bet.place/settle`, `rg.limit.hit`, `jackpot.contribution`, `error`.
- 验证:检查"起源",输入转化("v1","v2")。
- iOS: `WKScriptMessageHandler`;Android:"addJavascriptInterface"(带有@JavascriptInterface,没有额外展示)。
- HMAC对关键命令的签名格式相同("类型","付费","trace_id")。
7)安全和合规性
用于Assets的CSP,sandbox,SRI;不必停用"allow-top-navigation-by-user-activation"。
主机和内容之间的零信任:最小值,微调危险API。
PII/居住权:按地区划分的存储和徽标;禁止跨区域查询。
RG/AML:速率同步停止信号;WORM Crit操作日志。
Cookie/ITP: 使用'SameSite=None;Secure`;для 3rd-party — Storage Access API или server-side session.
8)性能和UX
iFrame:懒惰连接("loading=lazy")、网络资源优先级、"preconnect"到提供商域。
WebView:关闭不必要的JS,缓存代理,启用硬件加速,监视GC/内存刷新。
Full屏幕和方向:通过事件方案(何时以及谁启动过渡)严格规定。
错误处理:统一代码("NETWORK_TIMEOUT","PAYMENT_BLOCKED","RG_BLOCK")和UX prompta。
9)分析和A/B
事件总线: '会议。started/ended`, `bet.placed/settled`, `deposit.succeeded`, `rg.limit.hit`, `error`.
标识符:'tenant_id/brand_id/region/player_pseudo'、'trace_id'。
在iFrame中,通过parent-proxy(主机中的标签管理器)进行跟踪,在WebView中是本机分析SDK。
A/B:主机中的fichflags;iFrame通过"postMessage(init)"学习变体。
10)支付整合
Web/iFrame:最好是主机中的收银机,而不是iFrame内部(3rd-party锁较少,优于UX,更简单RG/AML)。
附录:适用于有效脚本的StoreKit/Billing;否则-PSP编排是本机的,具有强大的遥测和偶发性。
11)桉例选择卡
您是一个聚合器/媒体,拥有数千个游戏和最小的dev资源:- → iFrame,严格的"sandbox"、"postMessage" (postMessage),主机中的收银机/限值。
- →本机容器:大堂的WebView,本机售票处/KYC/RG,实时提供商的SDK。
- →应用程序中的完全本机SDK或引擎。
12)支票单
iFrame集成
- "sandbox"+最小的"allow"右。
- 具有白色列表的CSP;SRI用于脚本。
- "postMessage"(+转化+"origin"验证)的清晰方案。
- RG/AML停止信号得到支持,会话正确结束。
- 存储库:cookie ITP/3rd-party计划。
- 遥测:bets/min, settle-lag, error-rate, FPS(如果需要)。
本机容器
- 带有白色方法列表和付费打字的JS-bridge。
- 本机售票处/KYC/RG,货币路线上的idempotency。
- Pushi, deep-links, lifecycle-hooki(在呼叫/背景工作时暂停游戏)。
- Crash/trace, privacy-permishen, PII访问审核。
- 苹果/谷歌的azart和支付政策得到遵守。
13)反模式(红旗)
将收银机嵌入提供商的iFrame中(失去对RG/AML/遥测的控制)。
缺乏验证的事件。origin` в `postMessage`.
3rd-party cookie是唯一的状态方式。
适用于多个品牌/地区的相同密钥/秘密。
从Web检查器手动编辑资产负债表/限制(无服务器检查)。
零降解:iFrame的下降打破了整个页面,而没有重击。
14)结论
iFrame是您通往内容生态系统的"快速网关":低成本、强硬隔离、快速发布。本机容器-关于深度:性能、设备、流量支付、严格的RG/AML和顶级UX。赢得的不是一种方法,而是一种组合:用于目录和演示的iFrame/Web,用于金钱,现场体验和监管严谨。正确的责任区划分、明确的事件合同和强大的安全性将使规模在速度、风险和质量方面没有妥协。
