IFrame ve yerel kaplar: ne zaman seçileceği
Tam makale
1) Şartlar ve bağlam
iFrame, üçüncü taraf içeriğini (oyun, yazar kasa, widget) yerleştiren bir HTML konteyneridir. Ev sahibi ve içerik aynı köken politikası ile mantıksal olarak izole edilmiştir.
Yerel konteyner - web içeriğinin WebView'de (WKWebView, Android WebView) başlatıldığı veya yerel bir SDK (oluşturma, ağ, ödemeler, telemetri) ile değiştirildiği bir uygulama/modül.
Nerede gerçekleşir: başlangıç ve demo oyunları, lobi, gişe/onboarding, canlı video, jackpot widget'ları, ortak inişler.
2) Kısa cevap: ne seçilir
Hızlı bir lansmana, çok sayıda üçüncü taraf içeriğine, minimum bir geliştirmeye ihtiyacınız var - iFrame.
Çevrimdışı/düşük gecikmeli/ağır grafikler/cihazla derin entegrasyon gerekir - yerel bir konteyner (WebView + köprü veya SDK).
Pazaryerleri/sokak analitiği/katı kurallar (Apple/Google), sistem ödemeleri, sert RG kancaları - yerel konteyner.
Medya siteleri, SEO-iniş, oynanabilir ekler ile incelemeler - iFrame.
3) Seçim matrisi (basitleştirilmiş)
4) iFrame: Mükemmel olduğunda
Senaryolar: demo oyunlarının hızlı gösterimi, ortaklık ekleri, jackpot/derecelendirme widget'ları, oynanabilir inişler, B2B toplayıcılar.
Artılar
Entegrasyon hızı: tek 'src' + tuşlar/parametreler.
Sert konuk konukçu izolasyonu (SOP) - daha az sızıntı riski.
Sağlayıcının bağımsız sürümleri (dağıtımınıza dokunmayın).
Yüzlerce tedarikçiyi ölçeklendirmek ucuzdur.
Eksiler
Cihaz ve yerel ödemelerle sınırlı entegrasyon.
Daha zor olan derin telemetridir (daha fazla "köprü").
3. taraf çerezleri/Depolama (Safari/Firefox/ITP) ile ilgili sorunlar.
Mobil cihazlarda karmaşık tam ekran/hareketler/klavye.
En iyi uygulamalar
'sandbox' nitelikleri ('allow-formlar', 'allow-scriptler' sınırlamak için, 'allow-popups-to-escape-sandbox' açmak için noktasal olarak ihtiyaç dışında).
Sağlayıcıların beyaz listeleri ile 'İçerik-Güvenlik-Politika' X-Frame-Options 'hassas sayfalar için.
İletişim - 'event' doğrulaması ile 'postMessage'. origin've mesaj şeması.
Yeniden boyutlandırma: Olay içinde 'ResizeObserver' + 'postMessage (' height ')' - host değişiklikleri 'iframe. stil. Yükseklik '.
Depolama - Depolama Erişimi API/follbacks; state - URL parametreleri veya ebeveyn-devlet aracılığıyla.
RG/AML: durdurma sinyalleri (kendini dışlama, sınırlar) - olaylar yoluyla, iframe oturumu sonlandırmak zorundadır.
5) Yerli konteynerler: kazandıklarında
Senaryolar: canlı oyunlar ve yazarkasalı mobil uygulamalar, karmaşık onboarding/CUS, düşük gecikmeli gerçek zamanlı akışlar, çevrimdışı modlar, mağaza ödemeleri, AR/VR özellikleri.
Artılar
Performans/düşük gecikme, demire erişim (kamera, biyometri).
Tek UX ve derin RG/AML entegrasyonu (sistem uyarıları, yerel pooches).
Güvenilir uygulama içi ödemeler ve abonelikler (StoreKit/Faturalandırma).
Doğru telemetri ve arıza kontrolü (crashlytics, izler).
Eksiler
Mülkiyet fiyatı: çok platformlu geliştirme, mağaza aracılığıyla yayınlar.
Apple/Google onayı; Heyecan/ödeme kısıtlamaları.
Daha fazla güvenlik ve gizlilik sorumluluğu.
Desenler
WebView + JS köprüsü (iki yönlü kanal): oyun/ödeme/limit etkinlikleri yerel olarak devam ediyor.
Hibrit: kritik yerel ekranlar (yazarkasa, KYC, RG), içerik ekranları - WebView/iFrame.
Sağlayıcı SDK: Oyunlar/akışlar kütüphane tarafından gömülüdür; Ev sahibi belirteçleri, limitleri, cüzdanı verir.
6) İletişim: iFrame ⇄ host ve WebView ⇄ native
Web (iFrame):- 'window. PostMessage ({type, payload}, targetOrigin) '
- Olay şeması: 'oyun. oturum. start/stop ',' bahsi. yerleştir/yerleştir ',' rg. limit. Hit ',' jackpot. Katkı ',' hata '.
- Doğrulama: 'origin'i işaretleyin, sürüm oluşturma (' v1 ',' v2 ') girin.
- IOS: 'WKScriptMessageHandler'; Android: 'JavascriptInterface ekle' (@ JavascriptInterface ile, gereksiz göstermeden).
- Biçim aynıdır ('type', 'payload', 'trace _ id'), kritik komutlar için HMAC imzaları.
7) Güvenlik ve uyumluluk
CSP, sandbox, varlıklar için SRI; 'allow-top-navigation-by-user-activation' bağlantısını gerek kalmadan kesmek için.
Ana bilgisayar ve içerik arasında sıfır güven: minimum izin veren, mutasyona uğramış tehlikeli API'ler.
PII/ikamet: Bölgelere göre kasalar ve günlükler; Bölgeler arası sorgu inhibisyonu.
RG/AML: Bahiste senkron stop ışıkları; WORM girit eylemlerinin günlüğü.
Çerezler/ITP: use 'SameSite = None; Güvenli '; для 3. taraf - Sunucu tarafı oturumu или Depolama Erişimi API'si.
8) Performans ve UX
iFrame: Tembel bağlantı ('loading = lazy'), ağ kaynaklarının önceliklendirilmesi, sağlayıcı etki alanlarına 'preconnect'.
WebView: gereksiz JS'leri kapatın, varlıkları önbelleğe alın, donanım hızlandırmayı etkinleştirin, GC/bellek temizliğini izleyin.
Tam ekran ve yönlendirme: olay şeması (geçişi ne zaman ve kim başlatır) aracılığıyla kesinlikle şart koşar.
Hata işleme: birleştirilmiş kodlar ('NETWORK _ TIMEOUT', 'PAYMENT _ BLOCKED', 'RG _ BLOCK') ve UX proppantları.
9) Analitik ve A/B
Olay otobüsü: 'oturumu. Start/ended ',' bahsi. yerleştirilmiş/yerleşmiş ',' depozito. Başarılı ',' rg. limit. ',' hata'ya bas.
Tanımlayıcılar: 'tenant _ id/brand _ id/region/player _ pseudo', 'trace _ id'.
ICrame'de - parent-proxy (ana bilgisayarda etiket yöneticisi) üzerinden bir parça, WebView'de - yerel bir analitik SDK'sı.
A/B: ana bilgisayardaki özellik bayrakları; iFrame bu seçeneği 'postMessage (init)' aracılığıyla tanır.
10) Ödemelerin entegrasyonu
Web/iFrame: Tercihen ana bilgisayarda nakit ve iFrame içinde değil (daha az 3. parti kilitler, daha iyi UX, daha kolay RG/AML).
Yerel: Geçerli senaryolar için StoreKit/Faturalandırma; Aksi takdirde, PSP orkestrasyonu güçlü telemetri ve idempotency ile yerlidir.
11) Kasa seçim kartı
Binlerce oyuna ve minimum geliştirme kaynağına sahip bir toplayıcı/medyasınız:- ^ iFrame, sıkı 'sandbox', 'postMessage' protokolü, ana bilgisayardaki nakit masası/limitleri.
- Yerel konteyner: Lobi için WebView, yerel nakit masası/KYC/RG, canlı sağlayıcı SDK.
- Bir uygulamada tamamen yerel bir SDK veya motor.
12) Kontrol listeleri
iFrame-tümleştirme
- 'sandbox' + minimum 'izin ver' hakları.
- Beyaz listelerle CSP; Komut dosyaları için SRI.
- 'Mesaj sonrası' şemasını temizle (+ sürüm oluşturma + 'orijin' doğrulama).
- RG/AML fren lambaları desteklenir, seanslar doğru şekilde sonlandırılır.
- Depolama: ITP/3rd-party çerezleri için plan.
- Telemetri: bahisler/dakika, settle-lag, hata oranı, FPS (gerekirse).
Yerel konteyner
- Yöntem beyaz liste ve yük yazımı ile JS-bridge.
- Yerli nakit masası/KYC/RG, para yollarında idempotency.
- Puss, derin bağlantılar, yaşam döngüsü kancaları (çağırırken/arka plan çalışması yaparken oyunu duraklatın).
- Çökme/izleme, gizlilik, PII erişim denetimi.
Apple/Google'ın heyecan ve ödeme politikaları takip ediliyor.
13) Anti-desenler (kırmızı bayraklar)
Kasayı sağlayıcının iFrame'inin içine gömmek (RG/AML/telemetri üzerindeki kontrol kaybı).
Validation 'event yok. origin 'в' postMessage '.
3. taraf çerezleri, belirtmenin tek yolu olarak.
Birden fazla marka/bölge için aynı anahtarlar/sırlar.
Bakiyelerin/sınırların web denetçisinden manuel olarak ayarlanması (sunucu denetimi yok).
Sıfır bozulma: iFrame damla, zarif geri dönüş olmadan tüm sayfayı keser.
14) Çekilme
iFrame, içerik ekosistemine "hızlı ağ geçidinizdir": düşük maliyetler, sıkı izolasyon, hızlı sürümler. Yerel konteynerler - derinlik hakkında: performans, cihaz, mağaza ödemeleri, sıkı RG/AML ve üst düzey UX. Bir yaklaşım değil, bir kombinasyon kazanır: Kataloglar ve demolar için iFrame/web, para için yerliler, canlı deneyim ve düzenleyici titizlik. Sorumlulukların uygun şekilde ayrılması, açık olay sözleşmeleri ve güçlü güvenlik, hız, risk ve kaliteden ödün vermeden ölçek verecektir.
