문서 내에 프레임(frame)을 생성해 콘텐츠를 탐색할 수 있음을 나타낸다.
임베디드 콘텐츠(embedded content)가 예상되는 위치
[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>
사용할 리소스의 경로를 설정한다.
비워있지 않은 유효한 URL을 나타내는 문자열을 나타낸다.
프레임에 가져올 웹 문서의 경로를 설정한다. 존재하지 않는 빈 문서를 삽입하고자 하는 경우에는 아래와 같이 작성한다.
<iframe src="about:blank"></iframe>인라인 HTML로 콘텐츠를 제공한다. 새롭게 추가된 애트리뷰트로써 src 애트리뷰트와 궁극적으로 역할이 동일해 보일 수 있다. 하지만 다음과 같은 기본적인 차이가 있다.
src 애트리뷰트는 기본적으로 동일 출처 정책을 준수하는 완전한 웹 문서를 표시한다. 최신 유저 에이전트는 안전하지만 sandbox 지원이 없는 레거시 유저 에이전트에서는 안전하지 않다.
<iframe src="other.html" sandbox></iframe>srcdoc 애트리뷰트는 샌드박스로 인라인 HTML을 표시한다.
<iframe srcdoc="<h1>Hello</h1>" sandbox></iframe>src와 srcdoc 애트리뷰트가 함께 명시된 경우에는 srcdoc 애트리뷰트가 우선한다. 레거시 유저 에이전트는 src 애트리뷰트의 값을 사용하므로 동시에 명시하는 경우의 src 애트리뷰트의 역할은 대체이다.
srcdoc 애트리뷰트로 설정된 문서에 해쉬(#)를 URL 조각으로 포함하고자 한다면 다음과 같이 설정한다.
<a href="about:srcdoc#hash_id">Link</a>요소를 식별할 수 있는 값을 지정한다.
프레임의 이름을 설정한다. 설정된 이름은 <a>, <form> 요소 등의 target 속성 값으로 사용될 수 있다.
<iframe>으로 연결된 문서에 대한 추가 제한 집합을 활성화한다. 값은 대소문자를 구분하지 않는 공백으로 구분된 지정된 토큰의 정렬되지 않은 집합이다.
다음과 같이 활성 토큰을 지정하지 않고 sandbox만 명시(값이 없음)하는 경우 모든 제한이 적용된다.
<iframe sandbox></iframe>콘텐츠가 다운로드를 수행하도록 허용한다.
콘텐츠의 양식(form)을 제출하도록 허용한다. 만일 허용하지 않는다면 양식은 표시되지만 정상적인 기능이 동작하지 않는다.
콘텐츠에서 모달(modal) 대화 상자를 활성화한다.
예를 들어서 다음과 같은 동작을 허용한다.
window.alert();
window.confirm();
window.print();
window.prompt();또한 BeforeUnloadEvent 이벤트를 수신할 수 있다.
방향 전환 잠금을 허용한다.
Pointer Lock API를 사용하도록 허용한다.
콘텐츠에서 팝업을 허용한다.
예를 들어서 다음과 같은 동작을 허용한다.
window.open();
window.showModalDialog();
<a href="demo.html" target="_blank">Open</a>샌드박스 플래그를 적용하지 않고 샌스박스 문서에서 새 창을 열 수 있다.
임베더(embedded)가 iframe이 프레젠테이션 세션을 시작할 수 있는지 여부를 제어할 수 있다.
동일 출처를 허용한다.
콘텐츠에서 스크립트를 실행하도록 허용한다. 팝업창 생성 기능은 제외된다.
콘텐츠가 최상위(_top) 브라우징 컨텍스트(context)를 탐색하도록 허용한다.
콘텐츠가 최상위(_top) 브라우징 컨텍스트(context)를 탐색하도록 허용하지만 브라우징 컨텍스트(context)의 활성 창에 일시적인 활성화가 있는 경우로 제한한다.
allow-top-navigation 토큰과 중복되므로 함께 지정하면 안된다.
사용자 프로토콜에 의한 최상위(_top) 브라우징 컨텍스트를 사용하도록 허용한다.
Accelerometer 인터페이스를 통해 장치의 가속에 대한 정보를 수집하도록 허용 여부를 제어한다.
AmbientLightSensor 인터페이스를 통해 장치의 주변 환경의 빛의 양에 대한 정보를 수집하도록 허용할지 여부를 제어한다.
HTMLMediaElement 인터페이스를 통해 요청된 미디어를 자동으로 재생하도록 허용할지 여부를 제어한다. 이 정책이 사용 중지되고 사용자 동작이 없으면 HTMLMediaElement.prototype.play()에서 반환된 Promise가 DOMException과 함께 거부된다. <audio> 및 <video> 요소의 autoplay 애트리뷰트는 무시된다.
Battery Status API 사용 허용 여부를 제어한다. 이 정책이 사용 중지되면 navigator.getBattery()에서 반환된 Promise가 NotAllowedError DOMException과 함께 거부된다.
비디오 입력 장치를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 getUserMedia()에서 반환된 Promise가 NotAllowedError DOMException과 함께 거부된다.
getDisplayMedia() 메소드를 사용하여 화면 콘텐츠를 캡처하도록 허용할지 여부를 제어한다. 이 정책이 사용 중지되면 디스플레이 콘텐츠를 캡처할 수 있는 권한을 얻지 못한 경우 getDisplayMedia()에서 반환된 Promise가 NotAllowedError DOMException과 함께 거부된다.
document.domain을 설정할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 document.domain을 설정하려는 시도가 실패하고 SecurityError DOMException이 발생한다.
EME(Encrypted Media Extensions) API를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 navigator.requestMediaKeySystemAccess()에서 반환된 Promise가 DOMException과 함께 거부된다.
렌더링되지 않는 동안 프레임에서 실행해야 하는지 여부를 제어한다. 예를 들어서 <iframe> 요소가 숨겨져 있거나 CSS display 속성이 none으로 설정된 경우이다.
뷰포트(viewport) 밖에 있는 동안 프레임에서 실행해야 하는지 여부를 제어한다.
Element.prototype.requestFullScreen() 메소드를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 반환된 Promise가 TypeError와 함께 거부된다.
Gamepad API를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지된 상태에서 navigator.getGamepads() 메소드를 호출하면 SecurityError DOMException이 발생하고 gamepadconnected 및 gamepaddisconnected 이벤트가 실행되지 않는다.
Geolocation 인터페이스를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 getCurrentPosition() 및 watchPosition() 메소드를 호출할 경우 해당 함수의 콜백(callback)이 PERMISSION_DENIED의 GeolocationPositionError 코드와 함께 호출된다.
Gyroscope 인터페이스를 통해 장치의 방향에 대한 정보를 수집하도록 허용할지 여부를 제어한다.
WebHID API를 사용하여 대체 키보드나 게임 패드와 같은 일반적이지 않은 휴먼 인터페이스(human interface) 장치에 연결할 수 있는지 여부를 제어한다.
FedCM(Federated Credential Management) API, 특히 ID 옵션이 있는 navigator.credentials.get() 메소드를 사용할 수 있는지 여부를 제어한다. 이 정책이 중지되면 get() 메소드의 호출로 반환된 promise가 NotAllowedError DOMException과 함께 거부된다.
사용자와 상호 작용 시기를 감지하기 위해 Idle Detection API를 사용할 수 있는지 여부를 제어한다.
window.queryLocalFonts() 메소드를 통해 사용자의 로컬 시스템에 설치된 글꼴에 대한 정보를 수집하도록 허용할지 여부를 제어한다.
Magnetometer 인터페이스를 통해 장치의 방향에 대한 정보를 수집하도록 허용할지 여부를 제어한다.
오디오 입력 장치를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 MediaDevices.prototype.getUserMedia() 메소드에서 반환된 Promise가 NotAllowedError DOMException과 함께 거부된다.
Web MIDI API를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 중지되면 navigator.requestMIDIAccess() 메소드에서 반환된 Promise가 DOMException과 함께 거부된다.
WebOTP API의 navigator.credentials.get() 메소드를 사용하여 서버에서 보낸 특수 형식의 SMS 메시지에서 일회용 비밀번호(OTP)를 요청할 수 있는지 여부를 제어한다.
Payment Request API를 사용할 수 있는지 여부를 제어한다. 이 정책이 사용 설정되면 PaymentRequest() 생성자가 SecurityError DOMException을 발생시킨다.
PIP(Picture-in-Picture) 모드에서 비디오를 재생할 수 있는지 여부를 제어한다.
Web Authentication API를 사용하여 새로운 비대칭 키 자격 증명을 생성할 수 있는지 여부를 제어한다.
Web Authentication API를 사용하여 이미 저장된 공개 키 자격 증명을 검색할 수 있는지 여부를 제어한다.
Screen Wake Lock API를 사용하여 장치가 화면을 끄거나 어둡게 하지 않아야 함이 가능한지 여부를 제어한다.
Web Serial API를 사용하여 직렬 포트를 통해 직접 연결된 직렬 장치와 통신하거나 직렬 포트를 에뮬레이트하는 USB 또는 블루투스(bluetooth) 장치를 통해 통신할 수 있는지 여부를 제어한다.
Audio Output Devices API를 사용하여 스피커를 나열하고 선택할 수 있는지 여부를 제어한다.
서드파티(third-party) 컨텍스트(context)에 로드된 문서가 Storage Access API를 사용하여 분할되지 않은 쿠키(cookie)에 대한 액세스를 요청할 수 있는지 여부를 제어한다.
WebUSB API를 사용할 수 있는지 여부를 제어한다.
Web Share API의 navigator.share() 메소드를 사용하여 텍스트, 링크, 이미지 및 기타 콘텐츠를 사용자가 선택한 임의의 대상(예: 모바일 앱)에 공유할 수 있는지 여부를 제어한다.
WebXR 장치 API를 사용하여 WebXR 세션과 상호 작용할 수 있는지 여부를 제어한다.
<iframe> 요소의 콘텐츠에 있는 Document 객체가 모든 출처에서 fullscreen 기능을 사용할 수 있도록 허용한다.
불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.
<input disabled>, <input disabled="disabled">, <input disabled="">
요소의 시각적 가로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.
요소의 시각적 세로 크기를 CSS의 픽셀(pixels)을 기본 단위로 해서 지정한다. 음수가 아닌 유효한 정수여야 한다.
리소스를 가져올 때 사용할 리퍼러(referrer)를 나타낸다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
리퍼러(referrer) 헤더(header)가 전송되지 않는다.
요청의 리퍼러(referrer)로 사용할 수 있도록 요청의 전체 referrerURL을 제거하여 보낸다. TLS(HTTPS)를 사용하지 않고 오리진(origin)으로 요청할 때 리퍼러(referrer) 헤더(header)를 보내지 않음을 의미한다. 명시적으로 지정한 정책이 없다면 기본값으로 처리된다.
same-origin-referrer 요청 및 cross-origin-referrer 요청을 모두 수행할 때 요청의 referrerURL의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.
same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청의 경우는 요청의 referrerURL 원본의 ASCII 직렬화만 리퍼러(referrer) 정보로 전송되도록 한다.
same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되도록 한다. 반면에 cross-origin-referrer 요청에는 전송되지 않는다.
요청에 대한 referrerURL 원본의 ASCII 직렬화를 전송한다.
same-origin-referrer 요청을 할 때 요청의 전체 referrerURL이 리퍼러(referrer) 정보로 전송되고 cross-origin-referrer 요청시에는 요청의 referrerURL 원본의 ASCII 직렬화만 전송되도로 한다.
요청의 전체 referrerURL이 same-origin-referrer 요청과 cross-origin-referrer 요청 모두에게 전송되도록 한다.
리소스의 로딩 시점을 설정한다.
제한된 값 집합으로 구성된 데이터를 나타낸다. 값 설정을 위한 다양한 방식이 존재할 수 있다.
<iframe>에 연결된 콘텐츠의 로딩에 대한 지연 여부를 지정한다.
<iframe src="example.html" loading="lazy"></iframe>위치가 뷰포트(viewport) 내외부와 상관없이 즉시 로드한다.
유저 에이전트가 정의한 뷰포트에서 계산된 거리에 도달할 때까지 로드를 지연한다.
일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.
일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.