> For the complete documentation index, see [llms.txt](https://onestore-dev.gitbook.io/dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://onestore-dev.gitbook.io/dev/tools/web-sdk/pre.md).

# 02. 사전준비

#### **게임 페이지 요건: iframe 임베드 허용**

게임 페이지는 원스토어 호스팅 페이지가 iframe으로 로드합니다. 프레임 구성을 게임사가 준비할 필요는 없으나, **게임 서버가 원스토어 도메인으로부터의 iframe 삽입을 허용**해야 합니다.

차단된 경우 **게임 화면이 표시되지 않으므로**, 개발 초기에 확인해 주시기 바랍니다.

**요건**

<table><thead><tr><th width="340">게임 URL의 응답 헤더</th><th>원스토어에서의 결과</th></tr></thead><tbody><tr><td><code>X-Frame-Options: DENY</code> 또는 <code>SAMEORIGIN</code></td><td>차단</td></tr><tr><td>CSP <code>frame-ancestors</code>. 원스토어 도메인을 포함하지 않음</td><td>차단</td></tr><tr><td>CSP <code>frame-ancestors</code>. 원스토어 도메인을 포함 (<code>*</code> 등 전체 허용 포함)</td><td>허용</td></tr><tr><td>두 헤더 모두 없음</td><td>허용 (모든 사이트에 개방된 상태)</td></tr></tbody></table>

두 헤더가 함께 존재하면 `frame-ancestors`가 우선합니다. `X-Frame-Options`로는 특정 도메인만 허용할 수 없습니다. `ALLOW-FROM`은 폐기된 문법으로 최신 브라우저에서 무시됩니다.

**조치**

**① 원스토어 도메인만 허용 (권장)**

기존 차단 정책을 유지한 채 원스토어에서만 삽입이 가능해집니다.

```
Content-Security-Policy: frame-ancestors https://*.onestore.co.kr https://*.onestore.net
```

{% hint style="warning" %}
**개별 호스트가 아니라 위 두 도메인 전체를 허용해 주십시오.**

`frame-ancestors`는 게임을 감싼 **모든 상위 화면**을 검사합니다. 게임 실행 화면 외에 **등록 검증 도구**도 게임을 감싸게 되며, 두 화면은 서로 다른 원스토어 도메인에 있습니다.

따라서 게임 실행 도메인만 적어 두면 **등록 검증 단계에서 차단되어 등록이 반려됩니다.**
{% endhint %}

**② 차단 헤더를 응답에서 제거 (대안)**

`X-Frame-Options`와 CSP `frame-ancestors`를 **모두** 제거해야 합니다. 한쪽만 제거하면 남은 쪽이 계속 차단합니다.

{% hint style="warning" %}
**②를 선택하기 전에 확인해 주십시오.** `X-Frame-Options`는 클릭재킹(clickjacking) 방어를 목적으로 하는 보안 헤더입니다. 제거하면 원스토어뿐 아니라 **임의의 사이트가 게임 페이지를 자신의 화면에 삽입**할 수 있게 됩니다.

원스토어에서의 서비스만을 위해서라면 ①로 충분합니다. ②는 게임사의 보안 정책상 허용 가능하다고 판단한 경우에 한하여 선택해 주시기 바랍니다.
{% endhint %}

{% hint style="warning" %}
**두 설정 모두 HTTP 응답 헤더로만 동작합니다.** HTML 문서의 `<meta http-equiv>`로 작성한 `X-Frame-Options`와 `frame-ancestors`는 브라우저가 무시합니다.
{% endhint %}

**적용 확인**

**최종 응답 헤더**(CDN, WAF 경유 후) 기준으로, 두 헤더가 모두 없거나 `frame-ancestors`에 위 원스토어 도메인이 포함되어 있으면 정상입니다.

{% hint style="info" %}
설정한 기억이 없어도 **프레임워크나 CDN, WAF 보안 프로필의 기본값**으로 포함되는 경우가 많습니다. Spring Security는 `DENY`, helmet은 `SAMEORIGIN`이 기본값입니다. 애플리케이션 설정만 확인하고 차단이 계속된다면 앞단 구간을 확인해 주시기 바랍니다.
{% endhint %}

{% hint style="info" %}
**원스토어 도메인은 사전 공지 후 변경될 수 있습니다.** ①의 허용 목록 방식을 사용하는 경우, 본 가이드의 최신 값을 주기적으로 확인해 주시기 바랍니다. 목록에 없는 도메인에서는 게임이 표시되지 않습니다.
{% endhint %}

#### **SDK 로드하기**

SDK 파일은 원스토어의 CDN 경로에서 제공됩니다. 게임 문서의 최상위에서 `type="module"` 스크립트로 게임 코드보다 먼저 로드합니다.

* `https://h5sdk.onestore.net/lib/{{version}}/onestore-h5-sdk.js`
* `https://h5sdk.onestore.net/lib/{{version}}/onestore-h5-sdk.min.js`

```javascript
import { createSDK } from "https://h5sdk.onestore.net/lib/{{version}}/onestore-h5-sdk.min.js";

var sdk = createSDK();
```

{% hint style="info" %}
`{{version}}` 자리에 넣을 버전은 [08. 릴리즈 노트](https://onestore-dev.gitbook.io/dev/tools/web-sdk/releasenote)에서 확인하시기 바랍니다.
{% endhint %}

#### **광고 지면 ID(placementId) 발급받기**

{% hint style="warning" %}
광고를 요청하려면 광고 지면 ID(placementId)를 사전에 발급받아야 합니다. 지면 ID는 원스토어 개발자센터에서 게임별로 발급되며(리워드·전면 각각), 발급되지 않은 지면으로 요청하면 광고는 폴백 없이 실패합니다. 지면 발급 절차는 [앱수익화>인앱 광고](https://onestore-dev.gitbook.io/dev/docs/apps/product/monetization/iaa) 부분을 참고하세요.
{% endhint %}

광고 요청 방법은 [04. 인앱 광고 (IAA)](https://onestore-dev.gitbook.io/dev/tools/web-sdk/iaa)를 참고하시기 바랍니다.

#### **인앱 상품 등록하기**

ONEconsole의 "앱 수익화 > 인앱 상품" 메뉴에서 인앱 상품 중 **관리형상품**을 등록해야 합니다. Web 상품에서 인앱결제가 지원하는 상품은 아래 표와 같습니다.

<table><thead><tr><th width="239">상품 구분</th><th>Web 상품</th></tr></thead><tbody><tr><td>관리형상품</td><td>지원</td></tr><tr><td>구독상품</td><td>미지원</td></tr></tbody></table>

* 상품 등록과 관련된 내용은 아래 가이드를 참고 부탁 드립니다.
  * [상품 등록과 관리](https://onestore-dev.gitbook.io/dev/docs/apps)

구매/결제 요청 방법은 [05. 인앱 결제 (IAP)](https://onestore-dev.gitbook.io/dev/tools/web-sdk/iap)를 참고하시기 바랍니다.