정보실

웹학교

정보실

html HTML`iframe` 태그

본문

iframe 태그를 사용하면 다른 출처 (다른 사이트)에서 온 컨텐츠를 웹 페이지에 포함 시킬 수 있습니다.


기술적으로 iframe은 새로운 중첩 브라우징 컨텍스트를 만듭니다. 즉, iframe의 모든 항목이 상위 페이지를 방해하지 않으며 그 반대도 마찬가지입니다. 자바 스크립트와 CSS는 iframe과 "리크"하지 않습니다.


많은 사이트에서 iframe을 사용하여 다양한 작업을 수행합니다. Codepen, Glitch 또는 페이지의 한 부분에서 코딩 할 수 있는 다른 사이트에 익숙 할 수 있으며 상자에 결과가 표시됩니다. iframe입니다.


이 방법으로 하나를 만듭니다.

<iframe src="page.html"></iframe>


절대 URL도 로드 할 수 있습니다.

<iframe src="https://site.com/page.html"></iframe>


너비 및 높이 매개 변수 세트를 설정하거나 CSS를 사용하여 설정할 수 있습니다. 그렇지 않으면 iframe에서 기본값인 300x150 픽셀 상자를 사용합니다.

<iframe src="page.html" width="800" height="400"></iframe>


Srcdoc 


srcdoc 속성을 사용하면 표시 할 인라인 HTML을 지정할 수 있습니다. src에 대한 대안이지만 최근에는 Edge 18 이하 및 IE에서 지원되지 않습니다.

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>


Sandbox 


sandbox 속성을 사용하면 iframe에서 허용되는 작업을 제한 할 수 있습니다.


우리가 그것을 생략하면 모든 것이 허용됩니다.

<iframe src="page.html"></iframe>


""로 설정하면 아무것도 허용되지 않습니다.

<iframe src="page.html" sandbox=""></iframe>


sandbox 속성에 옵션을 추가하여 허용 대상을 선택할 수 있습니다. 사이에 공백을 추가하여 여러 개의 공간을 허용 할 수 있습니다. 사용할 수 있는 옵션의 불완전한 목록은 다음과 같습니다.

  • allow-forms: 양식 제출 허용
  • allow-modals JavaScript에서 alert() 호출을 포함하여 모달 창을 열 수 있습니다.
  • allow-orientation-lock 화면 방향을 고정
  • allow-popups window.open() 및 target = "_ blank"링크를 사용하여 팝업 허용
  • allow-same-origin 로드 되는 리소스를 동일한 출처로 취급
  • allow-scripts 로드 된 iframe에서 스크립트를 실행할 수 있지만 팝업은 만들 수 없습니다.
  • allow-top-navigation 최상위 브라우징 컨텍스트로 iframe에 액세스 할 수 있습니다.


Allow 


현재 실험적이며 Chromium 기반 브라우저에서만 지원되는 이 기능은 부모 창과 iframe간에 리소스 공유의 미래입니다.


sandbox 속성과 비슷하지만 다음과 같은 특정 기능을 허용합니다.

  • accelerometer 센서 API 가속도계 인터페이스에 대한 액세스를 제공합니다
  • ambient-light-sensor 센서 API AmbientLightSensor 인터페이스에 대한 액세스를 제공합니다
  • autoplay 비디오 및 오디오 파일을 자동 재생 가능
  • camera getUserMedia API에서 카메라에 액세스 할 수 있습니다
  • display-capture getDisplayMedia API를 사용하여 화면 내용에 액세스 할 수 있습니다.
  • fullscreen 전체 화면 모드에 액세스 할 수 있습니다
  • geolocation Geolocation API에 액세스 할 수 있습니다
  • gyroscope 센서 API 자이로 스코프 인터페이스에 대한 액세스를 제공합니다
  • magnetometer 센서 API 자력계 인터페이스에 액세스
  • microphone getUserMedia API를 사용하여 장치 마이크에 액세스합니다.
  • midi 웹 MIDI API에 액세스 할 수 있습니다
  • payment 지불 요청 API에 대한 액세스를 제공합니다
  • speaker 장치 스피커를 통해 오디오를 재생할 수 있습니다
  • usb WebUSB API에 대한 액세스를 제공합니다.
  • vibrate 진동 API에 대한 액세스를 제공합니다
  • vr WebVR API에 대한 액세스를 제공합니다

Referrer 


iframe을 로드 할 때 브라우저는 Referer 헤더에 누가 로드하고 있는지에 대한 중요한 정보를 보냅니다


리퍼러의 철자가 틀린 이유는 컴퓨터 과학자 필립 할람-베이커 (Phillip Hallam-Baker)가 HTTP 사양에 필드를 통합한다는 원래 제안에서 유래 한 것입니다. 맞춤법 오류 표준 문서 RFC 1945에 포함 된 시점에서 철자가 틀렸다. 


referrerpolicy 속성을 사용하면 참조를 로드 할 때 참조자가 iframe으로 보내도록 설정할 수 있습니다. 리퍼러는 HTTP 헤더이며 페이지를 누가 로드하는지 알려줍니다. 허용되는 값은 다음과 같습니다.

  • no-referrer-when-downgrade 기본값이며 현재 페이지가 HTTPS를 통해 로드되고 iframe이 HTTP 프로토콜에 로드 될 때 리퍼러를 보냅니다.
  • no-referrer 리퍼러 헤더를 보내지 않습니다
  • origin 리퍼러가 전송되고 출발지 + 포트가 아닌 출발지 (포트, 프로토콜, 도메인) 만 포함합니다.
  • origin-when-cross-origin iframe에서 동일한 출처 (포트, 프로토콜, 도메인)에서 로드 할 때 리퍼러는 완전한 형태 (원본 + 경로)로 전송됩니다. 그렇지 않으면 출발지만 전송됩니다
  • same-origin 리퍼러는 iframe에서 동일한 출발지 (포트, 프로토콜, 도메인)에서로드 할 때만 전송됩니다.
  • strict-origin 현재 페이지가 HTTPS를 통해 로드되고 iframe이 HTTPS 프로토콜을 로드하는 경우 원본을 참조 자로 보냅니다. iframe이 HTTP를 통해 로드되면 아무것도 보내지 않습니다.
  • strict-origin-when-cross-origin 동일한 원점에서 작업 할 때 원점 + 경로를 리퍼러로 보냅니다. 현재 페이지가 HTTPS를 통해 로드되고 iframe이 HTTPS 프로토콜에서도로드되는 경우 원본을 참조 자로 보냅니다. iframe이 HTTP를 통해 로드되면 아무것도 보내지 않습니다.
  • unsafe-url HTTP에서 리소스를 로드 하고 현재 페이지가 HTTPS를 통해 로드 된 경우에도 원본 + 경로를 리퍼러로 보냅니다.






페이지 정보

조회 109회 ]  작성일19-08-16 16:43

웹학교