JavaScript - iframe 완벽 정리

iframe 이란?

<iframe> (Inline Frame) 은 현재 HTML 문서 안에 다른 HTML 문서를 삽입할 수 있는 HTML 요소입니다.

즉, 하나의 웹 페이지 안에 독립된 브라우징 컨텍스트(browsing context) 를 가진 또 다른 웹 페이지를 내포시킬 수 있습니다.

<iframe src="https://example.com" width="800" height="600"></iframe>

---

주요 속성

속성	설명
src	삽입할 문서의 URL
width / height	iframe의 너비/높이 (px 또는 %)
name	iframe의 이름 (링크 타겟으로 활용 가능)
allow	권한 정책 설정 (카메라, 마이크 등)
sandbox	보안 제한 적용
loading	지연 로딩 (lazy / eager)
allowfullscreen	전체화면 허용 여부
frameborder	테두리 표시 여부 (deprecated, CSS 권장)

---

기본 사용 예제

외부 페이지 삽입

<iframe
  src="https://www.wikipedia.org"
  width="100%"
  height="500"
  title="Wikipedia"
>
</iframe>

YouTube 영상 삽입

YouTube는 iframe을 통한 임베드를 공식 지원합니다.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
>
</iframe>

Google Maps 삽입

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
>
</iframe>

---

sandbox 속성

sandbox 속성을 사용하면 iframe 내부 콘텐츠에 보안 제한을 적용할 수 있습니다.
기본적으로 sandbox만 명시하면 모든 제한이 활성화되고, 필요한 권한만 명시적으로 허용합니다.

<!-- 모든 제한 적용 -->
<iframe src="untrusted.html" sandbox></iframe>

<!-- 스크립트 실행과 폼 제출만 허용 -->
<iframe src="page.html" sandbox="allow-scripts allow-forms"></iframe>

sandbox 허용값 목록

값	설명
allow-scripts	JavaScript 실행 허용
allow-forms	폼 제출 허용
allow-same-origin	동일 출처 정책 유지
allow-popups	팝업 창 허용
allow-top-navigation	최상위 창 탐색 허용
allow-downloads	파일 다운로드 허용
allow-modals	alert, confirm 등 허용

주의: allow-scripts와 allow-same-origin을 함께 쓰면 sandbox 보안이 무력화될 수 있습니다.

---

부모 ↔ iframe 간 통신 (postMessage)

iframe은 별도의 브라우징 컨텍스트이므로, 부모 페이지와 직접 DOM 접근이 제한됩니다.
window.postMessage API를 사용하면 안전하게 메시지를 주고받을 수 있습니다.

부모 → iframe 메시지 전송

<!-- 부모 페이지 -->
<iframe id="myFrame" src="child.html"></iframe>

<script>
  const iframe = document.getElementById('myFrame');

  iframe.addEventListener('load', () => {
    // 두 번째 인자: 수신 대상 origin 지정 ('*'는 모든 origin 허용)
    iframe.contentWindow.postMessage({ type: 'HELLO', data: '안녕!' }, 'https://child-domain.com');
  });
</script>

iframe → 부모 메시지 전송

<!-- child.html (iframe 내부) -->
<script>
  // 부모로 메시지 전송
  window.parent.postMessage({ type: 'RESPONSE', data: '받았어요!' }, 'https://parent-domain.com');
</script>

메시지 수신

// 부모 또는 iframe 어느 쪽에서나 동일하게 사용
window.addEventListener('message', (event) => {
  // 반드시 출처(origin)를 검증해야 합니다!
  if (event.origin !== 'https://trusted-domain.com') return;

  console.log('수신한 메시지:', event.data);
});

보안 팁: event.origin 검증 없이 메시지를 처리하면 XSS 공격에 노출될 수 있습니다.

---

동일 출처(Same-Origin) iframe 직접 접근

부모와 iframe이 같은 출처(same origin) 인 경우, JavaScript로 직접 DOM과 변수에 접근할 수 있습니다.

const iframe = document.getElementById('myFrame');

// iframe 내부 DOM 접근
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const heading = iframeDoc.querySelector('h1');
console.log(heading.textContent);

// iframe 내부 전역 변수 접근
const iframeVar = iframe.contentWindow.someVariable;

// iframe 내부에서 부모 접근
const parentEl = window.parent.document.getElementById('parent-div');

교차 출처(cross-origin) 에서는 위 방법이 보안 정책에 의해 차단됩니다.

---

loading=”lazy” (지연 로딩)

뷰포트 밖에 있는 iframe은 화면에 가까워질 때 로드되도록 지연 로딩을 적용할 수 있습니다.
페이지 초기 로드 성능을 향상시킵니다.

<iframe src="heavy-content.html" loading="lazy" width="600" height="400"></iframe>

---

iframe 보안 고려사항

1. Clickjacking 방지

악의적인 사이트가 내 페이지를 iframe으로 래핑하여 사용자를 속이는 공격입니다.
X-Frame-Options 또는 Content-Security-Policy 헤더로 방어할 수 있습니다.

# 모든 iframe 삽입 차단
X-Frame-Options: DENY

# 같은 출처에서만 허용
X-Frame-Options: SAMEORIGIN

# CSP로 특정 도메인만 허용
Content-Security-Policy: frame-ancestors 'self' https://trusted.com

2. 신뢰할 수 없는 콘텐츠는 sandbox 필수

외부 또는 사용자 제공 콘텐츠를 iframe에 삽입할 때는 반드시 sandbox 속성을 사용합니다.

<iframe src="user-content.html" sandbox="allow-scripts"></iframe>

3. postMessage 출처 검증

메시지 수신 시 event.origin을 항상 검증합니다.

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted-origin.com') return; // 반드시 검증
  // ... 처리 로직
});

iframe vs 대안 비교

방법	특징
<iframe>	독립된 컨텍스트, 외부 페이지 삽입에 적합
<object>	플러그인/PDF 삽입 용도 (레거시)
<embed>	미디어 파일 삽입 (레거시)
Web Components	Shadow DOM으로 스타일 격리, 내부 콘텐츠용
fetch + innerHTML	동일 출처 콘텐츠 동적 삽입 (iframe보다 가벼움)

iframe은 외부 서비스 임베드 (지도, 동영상, 결제 위젯 등)에 특히 적합합니다.

---

요약

• <iframe> 은 HTML 문서 내에 별도의 브라우징 컨텍스트를 가진 페이지를 삽입한다.
• sandbox 속성으로 보안 제한을 적용할 수 있다.
• 교차 출처 통신은 postMessage 를 사용하고, 항상 event.origin 을 검증해야 한다.
• Clickjacking 방어를 위해 X-Frame-Options 또는 CSP 헤더를 설정한다.
• loading="lazy" 로 초기 로딩 성능을 개선할 수 있다.