window.self 와 window.top 비교로 iframe 여부를 안전하게 검증하는 방법

window.self 와 window.top 비교로 iframe 여부를 안전하게 검증하는 방법

웹 개발을 하다 보면 현재 페이지가 iframe 안에 로드된 상태인지, 아니면 독립적으로 열린 페이지인지 구분해야 할 때가 많습니다. 이때 가장 간단하고 안전한 방법은 window.self 와 window.top 을 비교하는 것입니다.

✅ window.self 와 window.top 이란?

| 객체명 | 의미 | |---------------|----------------------------------------------------------------| | window.self | 현재 실행 중인 window 객체 자신을 의미합니다. (window 와 동일) | | window.top | 여러 단계 iframe 이 중첩돼 있어도 가장 최상위 window 객체를 가리킵니다. |

✅ 왜 비교로 검증할까?

• iframe 안에서 열렸다면:
  • window.self 는 iframe 내부의 window 객체.
  • window.top 은 최상위 부모 window 객체.
  • 따라서 두 값이 서로 다릅니다.
• iframe 이 아니라 독립 실행 중이라면:
  • 현재 창이 최상위 window 이므로 window.self === window.top 입니다.

결론적으로,

const isIframe = window.self !== window.top;

이 한 줄로 현재 페이지가 iframe 안에서 열렸는지 아닌지를 알 수 있습니다.

✅ 보안상 주의사항 (크로스 오리진 이슈)

• 만약 iframe 내부 페이지와 부모 페이지의 출처(origin)가 다를 경우, window.top 접근 시 SecurityError 가 발생할 수도 있습니다.
• 따라서 다음과 같이 try-catch 문으로 감싸서 사용하는 것이 안전합니다:

function isInIframe() {
  try {
    return window.self !== window.top;
  } catch (e) {
    // 크로스 오리진으로 에러가 발생하면 iframe 안에 있다고 간주
    return true;
  }
}

✅ 시각화 예시

[ 최상위 window (window.top) ]
  └─ iframe (window.self !== window.top)
      └─ 현재 실행 중인 window (window.self)

✅ 최종 정리

| 조건 | 의미 | |-----------------------------|----------------------------| | window.self === window.top | 최상위 window 에서 직접 실행 중 | | window.self !== window.top | iframe 안에서 실행 중 |

iframe 여부를 안전하게 검증해야 하는 경우, window.self 와 window.top 비교는 가장 보편적이고 신뢰할 수 있는 방법입니다.