iframe

Tony·2021년 10월 16일
1

HTML

목록 보기
9/14

TinyMCE React integration 에서 TinyMCE는 iframe으로 제공되는 것을 확인했다.
그래서 이번에 iframe이 어떤 장단점이 있는지 왜 사용하는지에 대해 알아보자.

iframe

  • inline frame, 웹 브라우저 내 또 다른 프레임
  • 현재 브라우저에 렌더링되고 있는 문서 안에 또 다른 HTML페이지를 삽입 할 수 있도록 하는 기능을 제공
  • iframe안에 HTML 페이지가 들어있다.

네이버 블로그가 iframe을 사용하는 것을 확인했다.

  • 페이지 전체가 iframe으로 구성되어 있었다.
  • 재밌는 점은 iframe으로 구성된 페이지 안에 iframe이 사용되어있었다.
  • 페이지 이동 시 url이 변하지 않아서 POST 방식으로 요청을 하는 건가 했는데 페이지 변경 시 순간적으로 모든 화면이 흰색으로 변하고 브라우저의 history에도 쌓이는 점이 흥미로웠다.
    뒤로가기도 잘 작동했다.
  • GET방식으로 요청하는 것을 확인할 수 있었다.


네이버 만화의 경우 일반적으로 생각하는 웹페이지 이동방식으로 이동되고 있는 것을 확인할 수 있었고
페이지 이동 시 마다 URL이 바뀌면서 페이지가 이동하고 페이지가 바뀌면 브라우저가 초기화 되면서 개발자 도구의 network탭의 기록도 초기화되었다.
반면 iframe으로 페이지 전체를 구성한 네이버 블로그는 GET방식으로 페이지가 이동되는 것은 같지만 페이지 이동 시 새로고침 아이콘이 X모양으로 바뀌지 않았고
네트워크 기록도 초기화되지 않고 계속 쌓였다.

iframe 사용 이유

HTML5 이 출시 되기 전 flash나 frame, iframe 등을 이용해서 웹 브라우저에서 다양한 콘텐츠를 제공했던 것 같다.
하지만 HTML5에서 video 태그 등 다양한 태그들이 출시 되면서 iframe을 대체할 수 있는 것 같다.

여전히 iframe을 이용해서 콘텐츠를 쉽게 추가할 수 있는 것은 iframe을 사용하는 가장 큰 이유인 것 같다.

iframe의 단점

  • XSS(cross site scripting) 등의 보안 이슈가 생길 수 있다.
    • 신뢰할 수 있는 사이트가 아니라면 iframe으로 가져온 웹사이트의 콘텐츠를 내 웹사이트에서 이용할 때 가져온 웹사이트가 악의적으로 입력값을 받아서 정보를 탈취 할 가능성도 있다.

iframe사용을 권장하지 않는 이유

  1. XSS에 취약
  2. 웹의 개념모델과 일치 하지 않기 때문에 검색엔진에 문제를 일으킬 수 있다.
  • 한페이지에 하나의 url만 표시하지 않음(페이지가 바뀌어도 URL이 바뀌지 않음 - 네이버 블로그)

iframe 태그에 사용할 수 있는 속성(attribute)

  • allow : iframe에 대한 기능 정책을 지정

  • allowfullscreen : boolean

    • iframe이 requestFullscreen()메서드를 호출하여 전체 화면 모드를 활성화할 수 있는 경우 true로 설정
  • name : 포함된 브라우징 컨텍스트의 타겟팅 가능한 이름입니다. 이것은 <a>, <form> 또는 <base> 요소의 대상 속성에서 사용할 수 있습니다. <input> 또는 <button> 요소의 formtarget 속성; 또는 window.open() 메서드의 windowName 매개변수입니다.

  • sandbox : 프레임의 내용에 추가 제한을 적용합니다. 속성 값은 모든 제한을 적용하기 위해 비어 있거나 특정 제한을 해제하기 위해 공백으로 구분된 토큰일 수 있습니다.

    • iframe안에서 실행되는 웹페이지에서 위험이 될 수 있는 부분들을 차단(자바스크립트 및 form태그 등)
  • src : The URL of the page to embed. Use a value of about:blank to embed an empty page that conforms to the same-origin policy. Also note that programatically removing an <iframe>'s src attribute (e.g. via Element.removeAttribute()) causes about:blank to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari

  • width, height : 크기 지정 - default : 300px/150px

  • scrolling(HTML5에선 사용 안 함) : 브라우저가 프레임에 대한 스크롤 막대를 제공해야 하는 시기를 나타냅니다.

    • auto: 프레임의 내용이 크기보다 큰 경우에만.

iframe과 메시지 전달

window.postMessage를 이용하면 iframe안의 페이지와 메시지를 주고 받을 수 있다.

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

메시지 송신

window.postMessage( data, [ports], targetOrigin );

메시지 수신

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

출처

profile
움직이는 만큼 행복해진다

0개의 댓글