iframe 정리

서론

회사에서 온보딩을 만들기위해 기존 템플릿에 iframe을 끼우는 작업을 하면서 정리해본 iframe에 대한 정리본

iFrame이란?

inline Frame의 약자로 HTML 문서내에 다른 HTML 문서를 보여 줄때 사용된다.

iFrame전에는 Frame이란 태그가 존재하였으나 deprecated 되었고

iframe으로 대체되었다.

장점

1. 웹내에 또다른 웹을 삽입이 가능하므로 쉽게 추가가 가능
2. 페이지 이동없이 위젯형태로 띄우기가 가능하여 여러가지 형태로 제작가능

단점

1. 유지보수가 어렵다.
   1. 아이프레임용 웹을 따로 만드는 느낌?
2. 보안위험이 많습니다.
   1. iframe으로 사이트를 구성시 사이트간 공격 (XSS)에 취약해집니다.
   2. https://ostraining.com/blog/webdesign/against-using-iframes/

사용법

• <iframe> 태그를 사용하면 된다.

<iframe 
	src="프레임에 사용할 url 주소">
</iframe>

• 속성
  • allow : iframe에 대한 기능 정책을 지정
  • allowfullscreen : boolean
    • iframe이 requestFullscreen()메서드를 호출하여 전체 화면 모드를 활성화할 수 있는 경우 true로 설정
  • name : 포함된 브라우징 컨텍스트의 타겟팅 가능한 이름입니다. 이것은 <a>, <form> 또는 <base> 요소의 대상 속성에서 사용할 수 있습니다. <input> 또는 <button> 요소의 formtarget 속성; 또는 window.open() 메서드의 windowName 매개변수입니다.
  • sandbox : 프레임의 내용에 추가 제한을 적용합니다. 속성 값은 모든 제한을 적용하기 위해 비어 있거나 특정 제한을 해제하기 위해 공백으로 구분된 토큰일 수 있습니다.
    • iframe안에서 실행되는 웹페이지에서 위험이 될 수 있는 부분들을 차단(자바스크립트 및 form태그 등)
  • width, height : 크기 지정
    • default : 300px/150px
  • scrolling(HTML5에선 사용 안 함) : 브라우저가 프레임에 대한 스크롤 막대를 제공해야 하는 시기를 나타냅니다.
    • auto: 프레임의 내용이 크기보다 큰 경우에만.

iframe으로 부모와 자식간의 메시지 전달

• https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

window.postMessage를 통하여 부모와 자식(iframe)페이지에서 메시지를 주고 받을 수 있다.

• 사용법

targetWindow.postMessage(message, targetOrigin, [transfer]);

• 부모 -> 자식(iframeElement.contentWindow : iframe에 의해 생성된 window객체)
• 자식 -> 부모(window.parent는 부모의 window 객체)
• 어느쪽으로든 송수신 가능

1. 메시지 송신

   window.postMessage(message, targetOrigin, [transfer]);
   
   // message : 전달할 메시지 보통 object형태
   // tagetOrigin : 메시지를 수신받는 도메인. 특정 도메인이 아니면 *
   // transfer : optional

2. 메시지 수신

   window.addEventListener( 'message', function( e ) {
        // e.data가 전달받은 메시지
        console.log( e.data );
   } );

3. 예시

   // 부모 -> 자식
   window.contentWindow.postMessage({message: "안녕"}, "*")
   
   // 자식 -> 부모
   window.parent.postMessage({message: "안녕"}, "*")