ELEMENTS

Editing
  • account_tree
  • bug_report

<iframe>

문서 내에 프레임(frame)을 생성해 콘텐츠를 탐색할 수 있음을 나타낸다.

  • 콘텐츠 분류

  • 허용된 부모 요소 또는 위치

    EMBEDDED CONTENT

    임베디드 콘텐츠(embedded content)가 예상되는 위치

  • 콘텐츠 모델

  • 태그 생략

    시작 태그, 종료 태그 모두 작성

  • DOM Interface

    HTMLIFrameElement

    [Exposed=Window]
    interface HTMLIFrameElement : HTMLElement {
      [HTMLConstructor] constructor();
    
      [CEReactions] attribute USVString src;
      [CEReactions] attribute DOMString srcdoc;
      [CEReactions] attribute DOMString name;
      [SameObject, PutForwards=value] readonly attribute DOMTokenList sandbox;
      [CEReactions] attribute DOMString allow;
      [CEReactions] attribute boolean allowFullscreen;
      [CEReactions] attribute DOMString width;
      [CEReactions] attribute DOMString height;
      [CEReactions] attribute DOMString referrerPolicy;
      [CEReactions] attribute DOMString loading;
      readonly attribute Document? contentDocument;
      readonly attribute WindowProxy? contentWindow;
      Document? getSVGDocument();
    
      // also has obsolete members
    };

설명

웹 문서내에 다른 웹 문서를 삽입할 수 있다는 것은 대단한 장점을 갖는다. HTML4에서는 <frameset>, <frame> 태그가 있어 프레임의 활용이 매우 좋았다. 하지만 보안 문제가 불거지면서 HTML5에서는 프레임과 관련된 태그들은 모두 폐기되었다. 그리고 <iframe> 태그로 어느 정도는 대체될 수 있게 되었다.

다음 데모는 단순히 <frame>을 대체하는 방법을 나타낸다. [직접 확인]

다음 애트리뷰트는 레거시(legacy)가 되었으므로 사용하지 않는다.

align, frameborder, longdesc, marginheight, marginwidth, scrolling

구문

마크업 형식
<iframe></iframe>
Example

애트리뷰트

src non-empty URL

사용할 리소스의 경로를 설정한다.

About Non-empty URL

비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.

이 요소에서의 특징

프레임에 가져올 웹 문서의 경로를 설정한다. 존재하지 않는 빈 문서를 삽입하고자 하는 경우에는 아래와 같이 작성한다.

빈 문서 삽입하는 방법
<iframe src="about:blank"></iframe>

사용 예

빈 문서를 연결
srcdoc navigable container

인라인 HTML로 콘텐츠를 제공한다. 새롭게 추가된 애트리뷰트로써 src 애트리뷰트와 궁극적으로 역할이 동일해 보일 수 있다. 하지만 다음과 같은 기본적인 차이가 있다.

src 애트리뷰트는 기본적으로 동일 출처 정책을 준수하는 완전한 웹 문서를 표시한다. 최신 유저 에이전트는 안전하지만 sandbox 지원이 없는 레거시 유저 에이전트에서는 안전하지 않다.
<iframe src="other.html" sandbox></iframe>
srcdoc 애트리뷰트는 샌드박스로 인라인 HTML을 표시한다. 
<iframe srcdoc="<h1>Hello</h1>" sandbox></iframe>

srcsrcdoc 애트리뷰트가 함께 명시된 경우에는 srcdoc 애트리뷰트가 우선한다. 레거시 유저 에이전트는 src 애트리뷰트의 값을 사용하므로 동시에 명시하는 경우의 src 애트리뷰트의 역할은 대체이다.

srcdoc 애트리뷰트로 설정된 문서에 해쉬(#)를 URL 조각으로 포함하고자 한다면 다음과 같이 설정한다.

<a href="about:srcdoc#hash_id">Link</a>

사용 예

name navigable target names or keywords

요소를 식별할 수 있는 값을 지정한다.

이 요소에서의 특징

프레임의 이름을 설정한다. 설정된 이름은 <a>, <form> 요소 등의 target 속성 값으로 사용될 수 있다.

sandbox space-separated tokens

<iframe>으로 연결된 문서에 대한 추가 제한 집합을 활성화한다. 값은 대소문자를 구분하지 않는 공백으로 구분된 지정된 토큰의 정렬되지 않은 집합이다.

다음과 같이 활성 토큰을 지정하지 않고 sandbox만 명시(값이 없음)하는 경우 모든 제한이 적용된다.

<iframe sandbox></iframe>

사용 예

사용되는 키워드

allow-downloads

콘텐츠가 다운로드를 수행하도록 허용한다.

allow-forms

콘텐츠의 양식(form)을 제출하도록 허용한다. 만일 허용하지 않는다면 양식은 표시되지만 정상적인 기능이 동작하지 않는다.

allow-modals

콘텐츠에서 모달(modal) 대화 상자를 활성화한다.

예를 들어서 다음과 같은 동작을 허용한다.

window.alert();
window.confirm();
window.print();
window.prompt();

또한 BeforeUnloadEvent 이벤트를 수신할 수 있다.

allow-orientation-lock

방향 전환 잠금을 허용한다.

allow-pointer-lock

Pointer Lock API를 사용하도록 허용한다.

allow-popups

콘텐츠에서 팝업을 허용한다.

예를 들어서 다음과 같은 동작을 허용한다.

window.open();
window.showModalDialog();
<a href="demo.html" target="_blank">Open</a>
allow-popups-to-escape-sandbox

샌드박스 플래그를 적용하지 않고 샌스박스 문서에서 새 창을 열 수 있다.

allow-presentation

임베더(embedded)가 iframe이 프레젠테이션 세션을 시작할 수 있는지 여부를 제어할 수 있다.

allow-same-origin

동일 출처를 허용한다.

allow-scripts

콘텐츠에서 스크립트를 실행하도록 허용한다. 팝업창 생성 기능은 제외된다.

allow-top-navigation

콘텐츠가 최상위(_top) 브라우징 컨텍스트(context)를 탐색하도록 허용한다.

allow-top-navigation-by-user-activation

콘텐츠가 최상위(_top) 브라우징 컨텍스트(context)를 탐색하도록 허용하지만 브라우징 컨텍스트(context)의 활성 창에 일시적인 활성화가 있는 경우로 제한한다.

allow-top-navigation 토큰과 중복되므로 함께 지정하면 안된다.

allow-top-navigation-to-custom-protocols

사용자 프로토콜에 의한 최상위(_top) 브라우징 컨텍스트를 사용하도록 허용한다.

allow attribute serialization

사용되는 키워드

accelerometer
Experimental technology

Accelerometer 인터페이스를 통해 장치의 가속에 대한 정보를 수집하도록 허용 여부를 제어한다.

ambient-light-sensor
Experimental technology

AmbientLightSensor 인터페이스를 통해 장치의 주변 환경의 빛의 양에 대한 정보를 수집하도록 허용할지 여부를 제어한다.

autoplay
Experimental technology

HTMLMediaElement 인터페이스를 통해 요청된 미디어를 자동으로 재생하도록 허용할지 여부를 제어한다. 이 정책이 사용 중지되고 사용자 동작이 없으면 HTMLMediaElement.prototype.play()에서 반환된 PromiseDOMException과 함께 거부된다. <audio><video> 요소의 autoplay 애트리뷰트는 무시된다.

battery
Experimental technology

Battery Status API 사용 허용 여부를 제어한다. 이 정책이 사용 중지되면 navigator.getBattery()에서 반환된 PromiseNotAllowedError DOMException과 함께 거부된다.

camera

비디오 입력 장치를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 getUserMedia()에서 반환된 PromiseNotAllowedError DOMException과 함께 거부된다.

display-capture

getDisplayMedia() 메소드를 사용하여 화면 콘텐츠를 캡처하도록 허용할지 여부를 제어한다. 이 정책이 사용 중지되면 디스플레이 콘텐츠를 캡처할 수 있는 권한을 얻지 못한 경우 getDisplayMedia()에서 반환된 PromiseNotAllowedError DOMException과 함께 거부된다.

document-domain
Experimental technology

document.domain을 설정할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 document.domain을 설정하려는 시도가 실패하고 SecurityError DOMException이 발생한다.

encrypted-media
Experimental technology

EME(Encrypted Media Extensions) API를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 navigator.requestMediaKeySystemAccess()에서 반환된 PromiseDOMException과 함께 거부된다.

execution-while-not-rendered
Experimental technology

렌더링되지 않는 동안 프레임에서 실행해야 하는지 여부를 제어한다. 예를 들어서 <iframe> 요소가 숨겨져 있거나 CSS display 속성이 none으로 설정된 경우이다.

execution-while-out-of-viewport
Experimental technology

뷰포트(viewport) 밖에 있는 동안 프레임에서 실행해야 하는지 여부를 제어한다.

fullscreen

Element.prototype.requestFullScreen() 메소드를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 반환된 PromiseTypeError와 함께 거부된다.

gamepad
Experimental technology

Gamepad API를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지된 상태에서 navigator.getGamepads() 메소드를 호출하면 SecurityError DOMException이 발생하고 gamepadconnectedgamepaddisconnected 이벤트가 실행되지 않는다.

geolocation

Geolocation 인터페이스를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 getCurrentPosition()watchPosition() 메소드를 호출할 경우 해당 함수의 콜백(callback)이 PERMISSION_DENIEDGeolocationPositionError 코드와 함께 호출된다.

gyroscope
Experimental technology

Gyroscope 인터페이스를 통해 장치의 방향에 대한 정보를 수집하도록 허용할지 여부를 제어한다.

hid
Experimental technology

WebHID API를 사용하여 대체 키보드나 게임 패드와 같은 일반적이지 않은 휴먼 인터페이스(human interface) 장치에 연결할 수 있는지 여부를 제어한다.

identity-credentials-get
Experimental technology

FedCM(Federated Credential Management) API, 특히 ID 옵션이 있는 navigator.credentials.get() 메소드를 사용할 수 있는지 여부를 제어한다. 이 정책이 중지되면 get() 메소드의 호출로 반환된 promiseNotAllowedError DOMException과 함께 거부된다.

idle-detection
Experimental technology

사용자와 상호 작용 시기를 감지하기 위해 Idle Detection API를 사용할 수 있는지 여부를 제어한다.

local-fonts
Experimental technology

window.queryLocalFonts() 메소드를 통해 사용자의 로컬 시스템에 설치된 글꼴에 대한 정보를 수집하도록 허용할지 여부를 제어한다.

magnetometer
Experimental technology

Magnetometer 인터페이스를 통해 장치의 방향에 대한 정보를 수집하도록 허용할지 여부를 제어한다.

microphone

오디오 입력 장치를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 MediaDevices.prototype.getUserMedia() 메소드에서 반환된 PromiseNotAllowedError DOMException과 함께 거부된다.

midi
Experimental technology

Web MIDI API를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 navigator.requestMIDIAccess() 메소드에서 반환된 PromiseDOMException과 함께 거부된다.

otp-credentials
Experimental technology

WebOTP API의 navigator.credentials.get() 메소드를 사용하여 서버에서 보낸 특수 형식의 SMS 메시지에서 일회용 비밀번호(OTP)를 요청할 수 있는지 여부를 제어한다.

payment
Experimental technology

Payment Request API를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 설정되면 PaymentRequest() 생성자가 SecurityError DOMException을 발생시킨다.

picture-in-picture
Experimental technology

PIP(Picture-in-Picture) 모드에서 비디오를 재생할 수 있는지 여부를 제어한다.

publickey-credentials-create
Experimental technology

Web Authentication API를 사용하여 새로운 비대칭 키 자격 증명을 생성할 수 있는지 여부를 제어한다.

publickey-credentials-get
Experimental technology

Web Authentication API를 사용하여 이미 저장된 공개 키 자격 증명을 검색할 수 있는지 여부를 제어한다.

screen-wake-lock
Experimental technology

Screen Wake Lock API를 사용하여 장치가 화면을 끄거나 어둡게 하지 않아야 함이 가능한지 여부를 제어한다.

serial
Experimental technology

Web Serial API를 사용하여 직렬 포트를 통해 직접 연결된 직렬 장치와 통신하거나 직렬 포트를 에뮬레이트하는 USB 또는 블루투스(bluetooth) 장치를 통해 통신할 수 있는지 여부를 제어한다.

speaker-selection
Experimental technology

Audio Output Devices API를 사용하여 스피커를 나열하고 선택할 수 있는지 여부를 제어한다.

storage-access

서드파티(third-party) 컨텍스트(context)에 로드된 문서가 Storage Access API를 사용하여 분할되지 않은 쿠키(cookie)에 대한 액세스를 요청할 수 있는지 여부를 제어한다.

usb

WebUSB API를 사용할 수 있는지 여부를 제어한다.

web-share

Web Share API의 navigator.share() 메소드를 사용하여 텍스트, 링크, 이미지 및 기타 콘텐츠를 사용자가 선택한 임의의 대상(예: 모바일 앱)에 공유할 수 있는지 여부를 제어한다.

xr-spatial-tracking
Experimental technology

WebXR 장치 API를 사용하여 WebXR 세션과 상호 작용할 수 있는지 여부를 제어한다.

allowfullscreen boolean attributes

<iframe> 요소의 콘텐츠에 있는 Document 객체가 모든 출처에서 fullscreen 기능을 사용할 수 있도록 허용한다.

About Boolean attributes

불리언(boolean) 값을 나타낸다. 다음 불리언 값을 갖는 애트리뷰트인 disabled를 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

width dimension attribute

요소의 시각적 가로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

height dimension attribute

요소의 시각적 세로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.

referrerpolicy enumerated attribute

리소스를 가져올 때 사용할 리퍼러(referrer)를 나타낸다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

사용되는 키워드

no-referrer

리퍼러(referrer) 헤더(header)가 전송되지 않는다.

no-referrer-when-downgrade

요청의 리퍼러(referrer)로 사용할 수 있도록 요청의 전체 referrerURL을 제거하여 보낸다. TLS(HTTPS)를 사용하지 않고 오리진(origin)으로 요청할 때 리퍼러(referrer) 헤더(header)를 보내지 않음을 의미한다. 명시적으로 지정한 정책이 없다면 기본값으로 처리된다.

origin

same-origin-referrer 요청 및 cross-origin-referrer 요청을 모두 수행할 때 요청의 referrerURL의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.

origin-when-cross-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청의 경우는 요청의 referrerURL 원본의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.

same-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되도록 한다. 반면에 cross-origin-referrer 요청에는 전송되지 않는다.

strict-origin

요청에 대한 referrerURL 원본의 ASCII 직렬화를 전송한다.

strict-origin-when-cross-origin

same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청시에는 요청의 referrerURL 원본의 ASCII 직렬화만 전송되도로 한다.

unsafe-url

요청의 전체 referrerURLsame-origin-referrer 요청과 cross-origin-referrer 요청 모두에게 전송되도록 한다.

loading enumerated attribute

리소스의 로딩 시점을 설정한다.

About Enumerated attribute

제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.

이 요소에서의 특징

<iframe>에 연결된 콘텐츠의 로딩에 대한 지연 여부를 지정한다.

사용 예

<iframe src="example.html" loading="lazy"></iframe>

사용되는 키워드

eager

위치가 뷰포트(viewport) 내외부와 상관없이 즉시 로드한다.

lazy

유저 에이전트가 정의한 뷰포트에서 계산된 거리에 도달할 때까지 로드를 지연한다.

글로벌 애트리뷰트

일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.

글로벌 이벤트 핸들러

일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.

외부 리소스

iframe 샘플
iframe이 포함된 웹페이지를 테스트해 볼 수 있다.

버전 명세

HTML Standard
#the-iframe-element

지원 웹브라우저