IFrame 로비는 무엇이며 통합 방법
iFrame 로비 란 무엇입니까?
iFrame 로비는 콘텐츠 제공 업체/애그리 게이터가 호스팅하고 '
핵심 아이디어: 운영자는 로비를 처음부터 작성하지 않지만 완성 된 로비를 연결하여 시장에 출시하지 않고 빠른 시간, 브라우저 간 지원 및 업데이트를받습니다.
적절한 경우
새로운 공급자/수직의 빠른 출시.
여러 국가/브랜드에 대한 통합 쇼케이스가 필요합니
운영자에 대한 제한된 프론트 엔드 명령.
장단점
장점: 속도, 단일 코드베이스, 신제품의 자동 로딩, 합의 된 공급자 분석.
단점: 픽셀 완벽에 대한 제어력 저하, 공급 업체 가동 시간에 대한 의존성, 미묘한 추적, SEO 제한 (iframe의 내용은 DOM의 일부로 색인화되지 않음).
기본 아키텍처
1. 전면 (운영자): '
2. Auth gasket: 작업자의 백엔드에서 수명이 짧은 'sessionToken' (JWT/불투명) 이 생성됩니다.
3. 공급자 로비: 토큰을 검증하고 언어/통화/제한, 게임 렌더러 및 배너를 대체합니다.
4. 메시징 버스: '창. 이벤트 (밸런스, 게임 시작, 오픈 금전 등록기 등) 에 대한 페이지와 프레임 사이의 메시지 후 '.
5. Cashier/KYC/RG: 운영자 측 (iframe 외부) 에서 호출했지만 명령으로 로비에서 액세스 할 수 있습니다.
최소 구현 요구 사항
승인: 수명이 짧은 토큰 (1-15 분) + 투명한 회전 (자동 새로 고침).
보안: CSP, '샌드 박스' 및 iframe의 정확한 '허용', 엄격한 '포스트 메시지' 필터링.
안정성: 이벤트 계약 (버전, 이전 버전), 오류시 우아한 폴백.
UX: 적응 형 그리드, 빠른 탐색, 카드 프리로드, 스켈레톤 화면.
분석: 통합 이벤트 (인상, 클릭, 시작, 오류), 진폭/GA4로 매핑.
삽입 예제 (HTM + 보안)
html
<iframe id = "providerLobby"
src = "https ://robi. 예. com/embed? 브랜드 = ACME & lang = 루 & 통화 = EUR & 토큰 = {{SESSION _ TOKEN}} "
로딩 = "게으른"
referrerpolicy = "엄격한 원산지 원산지"
sandbox = "허용 스크립트는 동일한 원산지 허용 팝업을 허용하여 팝업 팝업 이스케이프 샌드 박스를 허용합니다"
= "전체 화면; 자동 재생; 암호화 된 미디어; 클립 보드 읽기; 클립보드 쓰기 "
style = "width: 100%; 높이: 100vh; 국경: 0; 표시: 블록; ">
</iframe>
설명:
- '샌드 박스' -원하는 플래그 만 활성화하십시오. 불필요하게 '최고 탐색' 을 허용하지 마십시오.
- '허용' -기능을 의식적으로 추가하십시오. ' 실제로 사용되는 경우에만 지불.
- '추천 정책' -매개 변수 누출을 제한합니다.
콘텐츠 보안 정책:
기본 src '자체';
frame-src https ://robi. 예. com;
스크립트-src '자체' https ://robi. 예. com '안전하지 않은 인라인';
img-src '자기' https ://robi. 예. com 데이터:;
연결 '자체' https ://api. 예. com https ://robi. 예. com;
페이지에 대한 X- 프레임 옵션은 귀하를 포함시키는 것을 방해하지 않습니다. → 공급자가 귀하와 함께 포함하고 있으며 그 반대도 마찬가지입니다.
백엔드에서 토큰 생성 (노드/익스프레스 예)
js는 "jsonwebtoken" 에서 jwt를 가져옵니다.
"익스프레스" 에서 가져 오기 표현;
const app = 표현 ();
(PHP 3 = 3.0.6, PHP 4)
const 페이로드 = {
하위: req. 사용자. id, 브랜드: "ACME", 통화: "EUR", lang: "ru", ts: 날짜. 지금 ()
};
const 토큰 = jwt. 부호 (페이로드, 프로세스) env. (PHP 3 = 3.0.6, PHP 4)
알고리즘: "HS256", 만료: "10m", 발행자: "acme-casino", 청중: "roby-provesser"
});
res. json ({토큰});
});
모범 사례: 짧은 TTL, 감사 분야, HSM/Secrets Manager의 키, 'kid' 로테이션.
이벤트 계약 메시징
소스 화이트 리스팅 및 스키마 검증에 '포스트 메시지' 를 사용하십시오.
js
//호스트 (연산자)
const iframe = 문서. getElementByID ("providerLobby"). 컨텐츠 창;
const LOBŁ_ ORIGIN = "https ://robi. 예. com ";
창. AddEventListener ("메시지", (e) => {
(예: original! = = LOBŁ_ ORIGIN) 반환되는 경우;
const {유형, 페이로드} = 예 데이터 {};
스위치 (타입) {
"로비: 준비" 사례:
//iframe 시작 데이터를 보냅니다. 포스트 메시지 ({유형: "호스트: 컨텍스트", 페이로드: {
균형: 125. 40, kycStatus: "확인", 한계: {betMax: 100}
(PHP 3 = 3.0.6, PHP 4)
휴식;
"로비: 크기 조정" 사례:
문서. getElementByID ("providerLobby"). 스타일. 높이 = 페이로드. 높이 + "px";
휴식;
"로비: 오픈 캐셔" 사례:
openCashier () ;//휴식 기능;
"로비: 런치 게임" 사례:
런치 게임 (페이로드. gameID) ;//새 창/브레이크 홀을 열 수 있습니다.
"로비: 요청 Tokenrefresh" 사례:
refreshLobbyToken (). 그런 다음 (t =>
이프 레임. 포스트 메시지 ({타입: "호스트: newToken", 페이로드: {토큰: t}}, LOBŁ_ ORIGIN)
);
휴식;
}
});
표준 이벤트 (예: 세트):
- 따라서 '로비: 준비', '로비: 크기 조정', '로비: 오픈 캐셔', '로비: openRG', '로비: 런치 게임', '로비: 트랙', '로비: 요청: 새로 고침', '로비: 오류'.
- 호스트 → 로비에서: '호스트: 컨텍스트' (밸런스, 로케일, 한계), '호스트: newToken', '호스트: balanceUped', '호스트: rgState', '호스트: 내비게이션'.
로비에서 게임을 실행
두 가지 접근 방식:1. 동일한 iframe 내부-더 빠르지 만 제어력이 떨어지고 추적하기가 더 어렵습니다.
2. 별도의 루트/창-간단한 메트릭으로 오버레이 (RG/제한) 를 걸고 웹 뷰와의 호환성을 향상시킬 수 있습니다.
최소 경로:- 로비는 '로비: 런치 게임 {gameID}' 을 보냅니다.
- 호스트는 뒷면에 'gameToken' 을 생성하고 '/game/: id? 토큰 =... '.
- 게임은 토큰을 허용하고 검증하며 베팅 세션을 시작합니다.
UX 및 성능
터치: 데스크톱의 3-5 스피커, 2-태블릿, 1-모바일; 카드 높이를 수정하십시오.
해골 및 게으른 로딩 (갤러리의 이미지 '로딩 =' 게으른 '', fetchopriate = '낮은' ').
빠른 찾기 및 필터-' 에서 선택한 태그를 기억하십니까? 쿼리 '/' localStorage '.
카드에서 클릭하십시오: 영역을 44px로 클릭하십시오. 키보드 지원 (A11y).
배너 소지자: 레이아웃이 "점프" 되지 않도록.
iOS 미디어 정책: 자동 재생 비디오/오디오에는 사용자 제스처가 필요 데모에서 이것을 고려하십시오.
준수 및 플레이어 책임 (RG)
제한 및 시간 초과: 로비에 현재 플레이어 한계를 표시하고 (읽기 전용) 호스트 측의 변경 양식을 호출하도록 지원합니다.
자체 배제: 이벤트 'robi: openRG' → iframe 외부에서 RG 모듈을 엽니 다.
유르. -배너 및 18 +: 공급자의 크리에이티브에 의존하지 않도록 로비 내부가 아닌 호스트 쪽에 있습니다.
GDPR/쿠키: 로비-제 3 자, 쿠키 동의 및 법적 프레임 워크 (계약 적 필요성/합법적 이익) 에 대해 생각하십시오.
현지화 및 브랜딩
언어/통화/지역을 'src' 및/또는 '호스트: 컨텍스트' 로 전달하십시오.
색상, 로고, 글꼴 등 흰색 레이블 변수를 허용합니다.
공급 업체를 변경할 때 데이터를 잃지 않도록 운영자 측에 "즐겨 찾기/최신" 블록을 유지하십시오.
분석 및 지표
추적 계층 (예):- 'roby _ sparting', 'tile _ view', 'tile _ click', 'Search _ use', 'countage _ change', 'runch _ game', 'orm _ view'.
- TTFB-Bet (로비에 들어가서 첫 번째 베팅까지의 시간), CR _ deposit → 시작, CTR 범주/검색, 평균 시청 깊이.
iframe의 집계 이벤트; 공급자 픽셀로 "이중 계산" 을 피하십시오.
구현 테스트 계획
1. 보안: CSP 확인, 추가 '허용' 및 '샌드 박스' 플래그 없음, '포스트 메시지 검증. 원산지 '.
2. 세션: 토큰 만료, 자동 새로 고침, 401/403의 동작.
3. 크기 조정: 모바일/웹 뷰에서 올바른 높이 (Android/iOS).
4. 현금 데스크/CCM: 로비 이벤트별 모달 열기/닫기 시나리오.
5. 공급자 사용 불가: 타임 아웃, 스터브 표시 및 리트레이.
6. RG 제한: 게임이 잠금 장치에서 시작되는 것을 디스플레이하고 방지합니다.
7. 로케일/통화 전환: 즉시 재부팅 중.
8. 분석: 카운터 호스트 대 공급 업체의 비교
일반적인 오류 (패턴 방지)
'원점' 을 확인하지 않고 '메시지' 청취자를 걸어보세요.
문제 iframe 전체 액세스 ('경우에 따라' 동일한 원산지 허용 최고 사용자 탐색 활성화 ').
회전없이 수명이 긴 토큰.
SEO의 로비 콘텐츠에 동의하십시오.
플레이어 캐시 및 공급자 디렉토리 캐시를 혼합하십시오 (개인화를 중단).
추적 제어 및 RG 오버레이없이 동일한 iframe 내에서 게임을 실행하십시오.
iFrame 로비 통합 점검표
- 합의 된 이벤트 계약 (버전, 유형, 스키마)
- TTL이 포함 된 구현/로비 토큰 15 분 및 회전.
- 변형 된 CSP, '샌드 박스', '허용', '추천 정책'.
- 연결된 계산원/KYC/RG와 'openCashier '/' openRG' 이벤트를 연결했습니다.
- 공급자가 분해 될 때 대체물을 생각했습니다.
- 현지화, 통화, 연령 배너 확인.
- 분석 설정 (엔드 투 엔드 사용자/세션 ID).
- 교차 브라우저 및 모바일 웹보기 테스트를 실시했습니다.
- 벤더와 사고 및 연락처의 런북을 설명했습니다.
iFrame 로비는 게임 카탈로그를 확장하고 시장 출시 시간을 단축하는 빠르고 실용적인 방법입니다. 건전한 통합의 핵심은 강력한 보안, 명확한 이벤트 계약, 강력한 승인 및 운영자 측의 신중한 UX/분석입니다. 언젠가이 작업을 수행하면 거의 "클릭시" 새로운 공급 업체와의 통합을 확장 할 수 있습니다.