여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. iframe 요소
iframe 요소
3주전 작성
1주전 수정

홈페이지를 만들다보면 페이지 안에 다른 페이지를 넣어야할 때 가 있다.
예를 들어, YouTube 영상 넣을 때….

그 때 어떻게 해야하는지 알아보자.

<iframe>

HTML
<iframe src="삽입할 페이지 URL"></iframe>

특성

allow

<iframe>에 대한 기능 정책을 지정한다.

allowfullscreen

<iframe>이 requestFullscreen() 메서드를 호출하여 전체 화면 모드를 활성화할 수 있는 경우 true로 설정한다.

이 속성은 레거시 속성으로 간주되며 allow=”fullscreen”으로 재정의된다.

allowpaymentrequest

지불 요청 API를 호출하기 위해 교차 출처 <iframe>이 허용되어야 하는 경우 true로 설정한다.

이 속성은 레거시 속성으로 간주되며 allow=”payment”로 재정의된다.

name

포함된 브라우징 컨텍스트의 대상 이름이다.

이것은 <a>, <form> 또는 <base> 요소의 대상 속성에서 사용할 수 있다.

<input> 또는 <button> 요소의 formtarget 속성 또는 window.open() 메서드의 windowName 매개 변수다.

referrerpolicy

프레임의 리소스를 가져올 때 보낼 리퍼러를 나타낸다.

특성값
no-referrer
:
Referer 헤더가 전송되지 않는다.
no-referrer-when-downgrade
:
기본 값. Referer 헤더는 TLS(HTTPS)가 없는 원본으로 전송되지 않는다.
origin
:
보낸 리퍼러는 참조 페이지의 출처인 스키마, 호스트(en-US) 및 포트(en-US)로 제한된다.
origin-when-cross-origin
:
다른 출처로 전송되는 참조자는 체계, 호스트 및 포트로 제한된다. 동일한 원점에 대한 탐색에는 여전히 경로가 포함된다.
same-origin
:
동일한 출처에 대해 리퍼러가 전송되지만 교차 출처 요청에는 리퍼러 정보가 포함되지 않는다.
strict-origin
:
프로토콜 보안 수준이 동일할 때(예, HTTPS→HTTPS) 문서 원본을 참조자로 보내지만 덜 안전한 프로토콜(예, HTTPS→HTTP)로 보내지 않는다.
strict-origin-when-cross-origin
:
동일 출처 요청을 수행할 때 전체 URL을 보내고 프로토콜 보안 수준이 동일할 때(예, HTTPS→HTTPS)만 원본을 보내고 덜 안전한 프로토콜(예, HTTPS→HTTP)로는 보내지 않는다.
unsafe-url
:
리퍼러에는 출처와 경로가 포함된다(단, 조각, 비밀번호 또는 사용자 이름은 제외). 이 값은 TLS 보호 리소스에서 안전하지 않은 출처로의 출처 및 경로를 누출하기 때문에 안전하지 않다.

sandbox

프레임의 내용에 추가 제한을 적용한다.

속성 값은 모든 제한을 적용하기 위해 비어 있거나 특정 제한을 해제하기 위해 공백으로 구분된 토큰일 수 있다.

특성 값
allow-forms
:
리소스가 양식을 제출할 수 있도록 한다. 이 키워드를 사용하지 않으면 양식 제출이 차단된다.
allow-modals
:
리소스가 모달 창을 열 수 있도록 한다.
allow-orientation-lock
:
리소스가 화면 방향을 잠그도록 한다.
allow-pointer-lock
:
리소스가 포인터 잠금 API를 사용하도록 한다.
allow-popups
:
팝업을 허용한다(예: window.open(), target=”_blank” 또는 showModalDialog()). 이 키워드를 사용하지 않으면 팝업이 자동으로 열리지 않는다.
allow-popups-to-escape-sandbox
:
샌드박스 문서가 샌드박스를 상속하는 창 없이 새 창을 열 수 있도록 한다. 예를 들어, 이는 광고가 링크되는 페이지에 동일한 제한을 적용하지 않고 광고를 안전하게 샌드박스화할 수 있다.
allow-presentation
:
리소스가 프레젠테이션 세션을 시작하도록 한다.
allow-same-origin
:
이 토큰을 사용하지 않으면 리소스는 항상 동일 출처 정책(en-US)에 실패하는 특수 출처에서 온 것으로 처리된다.
allow-scripts
:
리소스가 스크립트를 실행할 수 있도록 한다(팝업 창을 만들지 않음).
allow-top-navigation
:
리소스가 최상위 브라우징 컨텍스트(_top이라는 이름의 컨텍스트)를 탐색할 수 있도록 한다.
allow-top-navigation-by-user-activation
:
리소스가 최상위 탐색 컨텍스트를 탐색할 수 있도록 한다. 단, 사용자 제스처에 의해 시작된 경우에만 가능하다.

src

포함할 페이지의 URL을 입력한다.

about:blank 값을 사용하여 빈 페이지를 포함할 수 있다.

프로그래밍 방식으로 <iframe>의 src 속성을 제거하면 Firefox(버전 65부터), Chromium 기반 브라우저 및 Safari/iOS의 프레임에 about:blank가 로드된다.

srcdoc

포함할 인라인 HTML로 src 속성을 재정의한다.

브라우저가 srcdoc 속성을 지원하지 않으면 src 속성의 URL로 대체된다.

코드

HTML
기본 예시
참고
Mingg`s Diary
밍구
공부 목적 블로그