홈페이지를 만들다보면 페이지 안에 다른 페이지를 넣어야할 때 가 있다.
예를 들어, 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
MDN Web Docs - <iframe>: The Inline Frame element
W3C School - HTML iframe tag
