HTML <iframe> 태그 – 올바른 이해와 사용 방법

정의 및 사용 방법

<iframe> 태그는 웹 페이지 내에 독립적인 틀(inline frame)을 만들어 다른 문서를 삽입하여 탐색할 수 있게 하는 태그입니다.

예를 들어, 유튜브 동영상을 웹 페이지에 삽입하거나, 구글 지도를 삽입하는 데 사용할 수 있습니다.

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

기본 구조

<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> 태그에 삽입한 것입니다.

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

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

스타일 및 스크립트 분리

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

쿠키 및 저장 데이터 분리

<iframe> 태그 안의 콘텐츠는 이를 포함하는 웹 페이지와는 다르게 자신만의 쿠키와 저장 데이터를 가질 수 있습니다.
즉, <iframe> 태그 안의 저장 데이터는 이를 포함하는 웹 페이지의 저장 데이터와 분리되어 관리할 수 있습니다.
다만, 보안을 위해 <iframe> 태그 안의 콘텐츠와 이를 포함하는 웹 페이지의 출처가 서로 다르면, 서로의 쿠키 및 저장 데이터에 대한 접근이 제한될 수 있습니다.
이는 개인정보 보호 측면에서 중요한 기능이며, 서로 다른 웹 사이트의 콘텐츠를 안전하게 삽입하는 데 도움이 됩니다.

문서 객체 모델(DOM) 분리

<iframe> 태그 안의 콘텐츠는 이를 포함하는 웹 페이지와는 다르게 자신만의 DOM 트리를 가지고 있습니다.
즉, <iframe> 태그 안의 요소들은 이를 포함하는 웹 페이지의 DOM 요소들과 별도의 계층 구조를 가지며, 각 DOM을 독립적으로 조작할 수 있습니다.
이는 웹 페이지의 복잡성을 줄이고, 코드 관리를 용이하게 합니다.

보안 강화

독립적인 프레임은 악성 코드로부터 웹 페이지를 보호하는 데 도움이 될 수 있습니다.
<iframe> 태그 안의 콘텐츠가 악성 코드를 포함하더라도, 출처가 다른 문서 사이의 접근 제한을 통해 해당 코드가 이를 포함하는 웹 페이지에 미칠 수 있는 영향을 줄일 수 있습니다.
하지만, <iframe> 태그가 악성 코드에 취약할 수 있으므로 주의가 필요합니다.

관련 속성 사용하기

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

`src` 속성

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

예시

다음의 예시는 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` 속성

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

srcdoc 속성에 포함된 HTML은 전체 HTML 문서의 문법을 따라야 하지만, 대부분의 경우 <body> 태그의 콘텐츠만 포함하면 됩니다. 즉, 일반적으로 필요한 콘텐츠만 넣으면 됩니다.

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

`width` 속성

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

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

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

`height` 속성

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

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

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

`frameborder` 속성

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

frameborder 속성의 값
`0`	테두리 없음
`1`	테두리 있음

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

`allowfullscreen` 속성

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

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

참고하세요!
MDN의 설명에 의하면 allowfullscreen 속성은 allow="fullscreen *"로 재정의되었습니다. 최신 웹 표준을 따르려면 allowfullscreen 대신 allow="fullscreen"을 사용하는 것이 좋습니다.

`sandbox` 속성

<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 속성은 띄어쓰기로 구분된 여러 값을 가질 수 있습니다.

주의할 점

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

`referrerpolicy` 속성

<iframe> 태그가 로드될 때 발생하는 요청에서 참조자(referrer) 정보를 어떻게 처리할지 지정합니다.

값

referrerpolicy 속성의 값
`strict-origin-when-cross-origin`	기본값임. 교차 출처(cross-origin) 요청 시 Referer 헤더 전송 방식을 엄격하게 제어합니다. 동일 출처 요청을 수행할 때 전체 URL을 보내고, 프로토콜 보안 수준이 동일하게 유지되는 경우에만 출처를 보내고(HTTPS→HTTPS), 보안 수준이 낮은 대상에는 헤더를 보내지 않습니다(HTTPS→HTTP).
`no-referrer`	참조자 정보를 전송하지 않습니다.
`origin`	참조자 정보를 출처(origin)까지만 전송합니다. 출처에는 스킴, 호스트, 포트가 포함됩니다.
`origin-when-cross-origin`	동일 출처 요청에는 전체 URL을 전송하고, 교차 출처 요청에는 출처(origin)만 전송합니다. 출처에는 스킴, 호스트, 포트가 포함됩니다.
`unsafe-url`	전체 URL을 전송합니다. 단, 프래그먼트(fragment), 사용자 이름(username), 비밀번호(password)는 포함하지 않습니다. 이 값은 TLS로 보호되는 리소스의 URL 정보가 보안 수준이 낮은 출처로 노출될 수 있으므로 안전하지 않습니다.
`no-referrer-when-downgrade`	보안 수준이 낮아지는 대상(HTTPS→HTTP)에는 참조자 정보를 전송하지 않습니다. 그 외에는 전체 URL을 전송합니다.
`strict-origin`	프로토콜 보안 수준이 동일하게 유지되는 경우(HTTPS→HTTPS)에만 문서 출처를 참조자로 보내지만, 보안 수준이 낮은 대상(HTTPS→HTTP)에는 보내지 않습니다.

`name` 속성

name 속성은 해당 프레임의 탐색 컨텍스트(browsing context)를 식별하는 이름을 지정합니다.

이 이름은 <a>, <form>, <base>의 target 속성의 참조 대상과, 자바스크립트의 window.open() 메서드 등에서 탐색 대상 컨텍스트를 지정할 때 사용됩니다.

접근성 고려 사항

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

기술적인 문법 요약

iframe 태그의 기술적인 문법 요약
허용되는 부모 요소	외부 리소스 삽입을 허용하는 모든 요소
허용되는 콘텐츠	Nothing(내용 없음).
암시적인 `role` 속성 값	대응하는 역할 없음
허용되는 `role` 속성 값	`application`, `document`, `img`, `none`, `presentation`

브라우저 호환성

iframe 태그와 관련 속성의 브라우저 호환성
태그와 관련 속성	데스크탑 Chrome	데스크탑 Edge	데스크탑 Firefox	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
`name`	1	12	1	3

명세서

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

HTML <iframe> 태그 – 올바른 이해와 사용 방법

정의 및 사용 방법

기본 구조

예제

유튜브 동영상

구글 지도

다른 웹 페이지 삽입

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

스타일 및 스크립트 분리

쿠키 및 저장 데이터 분리

문서 객체 모델(DOM) 분리

보안 강화

관련 속성 사용하기

`src` 속성

예시

필수 속성은 아님

`srcdoc` 속성

`width` 속성

`height` 속성

`frameborder` 속성

`allowfullscreen` 속성

`sandbox` 속성

값

주의할 점

`referrerpolicy` 속성

값

`name` 속성

접근성 고려 사항

기술적인 문법 요약

브라우저 호환성

명세서

참고문헌

같이 보기

정의 및 사용 방법

기본 구조

예제

유튜브 동영상

구글 지도

다른 웹 페이지 삽입

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

스타일 및 스크립트 분리

쿠키 및 저장 데이터 분리

문서 객체 모델(DOM) 분리

보안 강화

관련 속성 사용하기

src 속성

예시

필수 속성은 아님

srcdoc 속성

width 속성

height 속성

frameborder 속성

allowfullscreen 속성

sandbox 속성

값

주의할 점

referrerpolicy 속성

값

name 속성

접근성 고려 사항

기술적인 문법 요약

브라우저 호환성

명세서

참고문헌

같이 보기

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

`src` 속성

`srcdoc` 속성

`width` 속성

`height` 속성

`frameborder` 속성

`allowfullscreen` 속성

`sandbox` 속성

`referrerpolicy` 속성

`name` 속성