<iframe> 태그의 정의 및 사용법

<iframe> 태그는
웹 페이지 내에 독립적인 틀(inline frame)을 만들어 다른 문서를 삽입하여 탐색할 수 있게 하는 태그입니다.
예를 들어, 유튜브 동영상을 웹 페이지에 삽입하거나, 구글 지도를 삽입하는 데 사용할 수 있습니다.

<iframe>은 "Inline frame"의 약어입니다.
"Inline"은 페이지의 다른 내용과 같은 흐름에 따라 배치된다는 뜻이고, "frame"은 그 안에 콘텐츠가 독립적으로 표시되는 프레임 혹은 틀이라는 뜻입니다.

기본 서식

HTML 
<iframe src="삽입할 문서의 URL"></iframe>

<iframe> 태그는 src 속성의 값으로 삽입할 문서의 URL을 지정합니다.

예시

유튜브 동영상

HTML 
<iframe
    src="https://www.youtube.com/embed/M7lc1UVf-VE?si=Kgf3a19a9LJAeSeo"
    width="300"
    height="150"
    title="YouTube video player"
    style="border: none;"
    referrerpolicy="strict-origin-when-cross-origin"
    allow="fullscreen"></iframe>
브라우저에서 실제 표시된 모습

구글 지도

HTML 
<iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1657.5047190881044!2d-117.92097027358513!3d33.81206951440678!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dcd7d12b3b5e6b%3A0x2ef62f8418225cfa!2z65SU7KaI64uI656c65OcIO2MjO2BrA!5e0!3m2!1sko!2skr!4v1721806287983!5m2!1sko!2skr"
    width="300"
    height="200"
    style="border: none;"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allow="fullscreen"></iframe>
브라우저에서 실제 표시된 모습

다른 웹 페이지 삽입

<iframe> 태그 안에 src 속성을 사용하여 삽입할 문서의 URL을 지정하면 해당 문서가 프레임 안에 표시됩니다.

다음의 예시는 https://example.org의 페이지를 iframe에 삽입한 것입니다.

HTML 
<iframe
    src="https://example.org/"
    title="iframe 예시"
    width="300"
    height="200"></iframe>
브라우저에서 실제 표시된 모습

<iframe> 태그는 독립적인 프레임

독립적인 프레임이라는 말은 웹 페이지와 <iframe> 태그로 만들어진 프레임이 별도의 환경을 가지고 있다는 것을 의미합니다. 이는 다음과 같은 여러 중요한 특징을 가집니다.

스타일 및 스크립트 분리

  • <iframe> 태그안의 콘텐츠는 삽입된 웹 페이지의 스타일과 스크립트의 영향을 받지 않습니다.
  • 즉, <iframe> 태그안의 디자인과 동작은 삽입된 웹 페이지와 독립적으로 설정할 수 있습니다.
  • 이는 서로 다른 디자인을 가진 웹 페이지들을 하나의 웹 페이지에 통합하거나, 특정 기능만을 삽입하는 데 유용합니다.

쿠키 및 저장 데이터 분리

  • <iframe> 태그안의 콘텐츠는 삽입된 웹 페이지와 별도의 쿠키 및 저장 데이터를 사용합니다.
  • 즉, 사용자의 로그인 정보나 기본 설정 등이 <iframe> 태그안의 콘텐츠와 삽입된 웹 페이지 사이에서 공유되지 않습니다.
  • 이는 개인정보 보호 측면에서 중요한 기능이며, 서로 다른 웹 사이트의 콘텐츠를 안전하게 삽입하는 데 도움이 됩니다.

문서 객체 모델(DOM) 분리

  • <iframe> 태그안의 콘텐츠는 삽입된 웹 페이지와 별도의 DOM 트리를 가지고 있습니다.
  • 즉, <iframe> 태그안의 요소들은 삽입된 웹 페이지의 DOM 요소들과 다른 계층 구조를 가지고 있으며, 서로 다른 자바스크립트 코드로 조작할 수 있습니다.
  • 이는 웹 페이지의 복잡성을 줄이고, 코드 관리를 용이하게 합니다.

보안 강화

  • 독립적인 프레임은 악성 코드로부터 웹 페이지를 보호하는 데 도움이 될 수 있습니다.
  • <iframe> 태그안의 콘텐츠가 악성 코드를 포함하더라도, 해당 코드가 삽입된 웹 페이지 전체에 영향을 미치는 것을 방지할 수 있습니다.
  • 하지만, <iframe> 태그자체가 악성 코드에 취약할 수 있으므로 주의가 필요합니다.

관련 속성 사용하기

<iframe> 태그의 관련된 속성에 대해 알아보겠습니다.

src

삽입할 외부 문서의 URL을 지정합니다.
이 URL은 다른 웹 사이트의 페이지 주소이거나, 같은 웹 사이트 내의 다른 페이지 주소일 수 있습니다.

예시

다음의 예시는 https://www.example.com 페이지를 <iframe> 태그로 웹 페이지 내에 삽입합니다.

HTML 
<iframe src="https://www.example.com"></iframe>
필수 속성은 아님

src 속성은 <iframe> 태그에 삽입할 외부 문서의 URL을 지정하는 매우 중요한 역할을 하지만 필수 속성은 아닙니다. 즉, src 속성이 없이도 <iframe> 태그를 사용할 수 있습니다.

src 속성이 지정되어 있지 않으면 외부 문서를 삽입하지 않을 뿐입니다.
외부 문서를 삽입하지 않고 <iframe> 태그에 srcdoc 속성이나 자바스크립트로 문서를 직접 삽입할 수도 있습니다.

다음은 src 속성을 사용하지 않고 자바스크립트를 사용하여 <iframe> 태그에 문서를 삽입하는 예제입니다.

HTML 
<iframe id="my-Iframe"></iframe>
<script>
    const iframe = document.getElementById("my-Iframe");
    const iframeDoc = iframe.contentWindow.document;
    
    iframeDoc.open();
    iframeDoc.write("<p>자바스크립트로 문서를 삽입했어요!</p>");
    iframeDoc.close();
</script>
브라우저에서 실제 표시된 모습

srcdoc 속성은 <iframe> 태그에 삽입할 인라인 HTML 콘텐츠를 지정합니다. 이 속성을 사용하면 src 속성보다 우선적으로 적용됩니다.

srcdoc 속성에 포함된 HTML은 전체 HTML 문서의 문법을 따라야 하지만, 대부분의 경우 <body> 태그의 콘텐츠만 포함하면 됩니다. 즉, 일반적으로 필요한 콘텐츠만 넣으면 됩니다. 만약 브라우저가 srcdoc 속성을 지원하지 않으면, 대신 src 속성에 지정된 URL을 사용합니다. 참고로, 이 주제의 글을 작성하는 시점에서 대부분의 브라우저에서는 srcdoc 속성을 지원합니다.

다음은 src 속성을 사용하지 않고 srcdoc 속성을 사용하여 <iframe> 태그에 문서를 삽입하는 예제입니다.

HTML 
<iframe srcdoc="<p>Hello, world!</p>"></iframe>
브라우저에서 실제 표시된 모습

<iframe> 태그의 픽셀 기준 고유 너비를 지정합니다. 단위가 없는 정수로 지정합니다.

HTML 
<iframe src="https://www.example.com" width="600"></iframe>

width 속성을 설정하지 않으면, 브라우저가 설정한 너비로 표시됩니다.

HTML의 width 속성과 CSS의 width 스타일 속성을 함께 사용하면 CSS가 우선합니다. CSS는 HTML 속성보다 높은 우선순위를 가지므로, CSS로 이미지의 너비를 스타일하면 HTML width 속성은 무시됩니다.

<iframe> 태그의 픽셀 기준 고유 높이를 지정합니다. 단위가 없는 정수로 지정합니다.

HTML 
<iframe src="https://www.example.com" height="300"></iframe>

height 속성을 설정하지 않으면, 브라우저가 설정한 높이로 표시됩니다.

HTML의 height 속성과 CSS의 height 스타일 속성을 함께 사용하면 CSS가 우선합니다. CSS는 HTML 속성보다 높은 우선순위를 가지므로, CSS로 이미지의 높이를 스타일하면 HTML height 속성은 무시됩니다.

<iframe> 태그의 테두리를 표시할지 여부를 지정합니다. 값은 0 또는 1로 설정합니다.

frameborder 속성의 값
0 테두리 없음
1 테두리 있음
HTML 
<iframe src="https://www.example.com" frameborder="0"></iframe>

frameborder 속성은 HTML5에서 더 이상 사용되지 않는, 즉 폐기된(deprecated) 속성입니다. 대신, <iframe> 태그의 테두리를 제어하기 위해 CSS를 사용하는 것이 권장됩니다.

HTML CSS border 속성으로 테두리를 제거했습니다. 
<iframe src="https://www.example.com" style="border: none;"></iframe>

<iframe> 태그가 전체 화면 모드를 허용할지 여부를 지정합니다.
이 속성은 자바스크립트의 requestFullscreen() 메서드를 호출해서 전체화면 모드를 활성화할 수 있는 권한을 부여합니다.

이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<iframe src="https://www.example.com" allowfullscreen></iframe>

참고하세요!
allowfullscreen 속성은 더 이상 사용되지 말아야할 구식(레거시) 속성이며, 현재는 allow="fullscreen" 속성으로 대체되었음을 기억하세요. 최신 웹 표준을 따르기 위해 allow="fullscreen"을 사용하는 것이 좋습니다.

HTML 
<iframe src="https://www.example.com" allow="fullscreen"></iframe>

<iframe> 태그안의 콘텐츠가 실행할 수 있는 권한을 제한합니다.
이것은 보안 제한을 적용하여, <iframe> 태그안의 콘텐츠가 특정 기능을 수행하지 못하게 합니다. 여러 속성 값을 사용하여 세부적으로 제한할 수 있습니다.

값
sandbox 속성의 값
allow-forms 삽입된 문서에서 <form> 태그로 나타내는 양식을 제출할 수 있도록 합니다.
allow-modals 삽입된 문서에서 자바스크립트로 구현되는 모달 창(Window.alert(), Window.confirm(), Window.prompt())을 열 수 있도록 허용합니다. 반면 <dialog>는 이 값에 관계없이 열 수 있습니다. 또한 BeforeUnloadEvent 이벤트를 수신할 수 있습니다.
allow-pointer-lock 삽입된 문서에서 포인터 잠금 API를 사용할 수 있도록 허용합니다 .
allow-popups 삽입된 문서에서 팝업(예를 들어 자바스크립트로 구현되는 Window.open() )을 허용합니다.
allow-same-origin 삽입된 문서에서 동일 출처 정책을 허용합니다.
allow-scripts 삽입된 문서에서 스크립트 실행을 허용합니다.
allow-top-navigation 삽입된 문서에서 상위 탐색을 허용합니다.
allow-popups-to-escape-sandbox allow-popups 속성과 함께 사용됩니다. 이 속성을 추가하면 <iframe> 태그안에 포함된 콘텐츠가 팝업 창을 통해 sandbox를 탈출하여 주변 웹 페이지와 상호 작용할 수 있도록 허용합니다. 즉, 팝업 창은 더 이상 sandbox에 제한되지 않고 독립적인 웹 페이지처럼 작동할 수 있습니다.

sandbox 속성은 띄어쓰기로 구분된 여러 값을 가질 수 있습니다.

HTML 스크립트 실행, 폼 제출 허용 
<iframe src="https://www.example.com" sandbox="allow-scripts allow-forms"></iframe>
주의할 점

<iframe> 태그안에서 allow-scripts와 allow-same-origin 값을 동시에 사용하는 것은 권장되지 않습니다. 이유는 이러한 조합이 <iframe>의 문서가 같은 출처(origin)에서 제공되는 경우, sandbox 속성을 제거할 수 있는 권한을 부여하기 때문입니다. 이렇게 되면 sandbox 속성의 보안이 무력화되어, <iframe>을 사용하는 것과 보안이 동일하지 않게 됩니다. 즉, sandbox가 전혀 적용되지 않는 것과 같은 상황이 됩니다.

<iframe> 태그가 로드할 때 요청 헤더에 참조자(referrer) 정보를 어떻게 보낼지 지정합니다.

referrerpolicy 속성의 값
strict-origin-when-cross-origin 기본값임.
크로스-도메인(cross-origin) 요청 시 Referer 헤더 전송 방식을 엄격하게 제어합니다.
no-referrer 참조자 정보를 전송하지 않습니다.
origin 참조자 정보를 도메인까지만 전송합니다.
origin-when-cross-origin 크로스 오리진 요청일 경우 도메인까지만 전송합니다.
unsafe-url 전체 URL을 전송합니다.
no-referrer-when-downgrade HTTPS에서 HTTP로 요청하는 경우 Referer 헤더를 비활성화합니다. 즉, 보안 수준이 낮은 HTTP 페이지로 이동할 때는 Referer 정보가 전송되지 않도록 합니다.

접근성 고려사항

시각장애인을 위한 스크린 리더를 사용하는 사용자에게 title 속성을 사용하여 <iframe> 태그안의 삽입된 콘텐츠의 설명 등 콘텐츠의 접근성을 고려한 조언 정보를 제공할 수 있습니다.

HTML 
<iframe title="HTML 언어에 대한 Wikipedia 페이지" src="https://ko.wikipedia.org/wiki/HTML"></iframe>

브라우저 호환성

iframe 태그와 관련 속성의 브라우저 호환성
태그와 관련 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<iframe> 1 12 1 4
allow 60 79 74 11.1
allowfullscreen 38 12 18 10.1
width 1 12 1 3
height 1 12 1 3
src 1 12 1 4
srcdoc 20 79 25 6
sandbox 5 12 17 5
referrerpolicy 51 79 50 14

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

iframe 태그의 명세서 사양
명세서 사양
<iframe> HTML Standard
#the-iframe-element

참고문헌

같이 보기