[HTML] iframe 태그란?

2020. 8. 23. 18:15Frontend

 

Definition

 

iframe이란 Inline Frame 의 약자로, 웹 브라우저 내에 또 다른 프레임, 즉 현재 브라우저에 렌더링되고 있는 문서 안에 또 다른 HTML페이지를 삽입할 수 있도록 하는 기능을 제공합니다.

 

 

검색을 통해 다른 블로그의 게시물이나, 아티클들을 읽다 보면, 글 아래에 유튜브 동영상이 삽입되거나, 지도가 보여진다거나 하는 상황들을 경험해 보신 적이 있을 것입니다. 요즘에는 HTML5 가 차세대 웹표준으로 자리하게 되면서 <video>태그나, <audio> 태그등 다양한 태그들이 iframe을 대체하고 있지만 이전의 많은 브라우저들, 그리고 아직 HTML5표준을 공식적으로 지원하고 있지 않은 브라우저들에서는 여전히 iframe이 사용되고 있습니다. (또한 다른 선택의 경우가 없는 경우에도 여전히 iframe은 사용되고 있습니다.)

 

 

iframe을 사용하면, 현재 렌더링된 브라우저의 페이지에서 다른 도메인이나, 다른 url의 페이지를 현재 페이지의 일부처럼 렌더링하고 사용할 수 있습니다. 이러한 장점 때문에, 동영상 플레이어(youtube동영상 재생), 지도표시(google map)등의 기능을 제공할 때 iframe을 사용하기도 했습니다. (현재는 HTML5표준에서 이런 기능을 기본적으로 지원하고 있기 때문에 많이 사용되고 있지는 않습니다.)

 

 

Official Example

 

MDN에서 공식적으로 제시하고 있는 Iframe의 예제는 다음과 같습니다.

<iframe id="Example2"
    title="iframe Example 2"
    width="400" height="300"
    style="border:none"
    src="https://maps.google.com/maps?f=q&source=s_q&q=buenos+aires&sll=37.0625,-95.677068&sspn=38.638819,80.859375&t=h&hnear=Buenos+Aires,+Argentina&z=11&ll=-34.603723,-58.381593&output=embed">
</iframe>

- iframe을 지원하지 않는 브라우저의 경우 대체 콘텐츠를 제공할 수 있는데, 이 경우 <iframe>과 </iframe>태그 사이에 대체 콘텐츠를 입력하면 해당 브라우저에서는 대체 콘텐츠가 표시되게 됩니다.

 

- width, height, frameborder: iframe내부에서 높이, 너비, 보더 등을 설정할 수 있는 기능을 제공하지만, MDN 공식 문서에서는 CSS를 통해 제어하는 것을 권장하고 있습니다.

 

- src: 불러올 페이지의 URL을 의미합니다. 

여기서 주의할 점은 아무 URL이나 입력한다고 해서 iframe이 해당 URL을 무조건 렌더링하는 것은 아니라는 사실입니다. 아래 예제를 보시면, 네이버(https://www.naver.com)를 iframe으로 불러왔을 때, 정상적으로 연결되지 않고, "refused to connect"라는 메세지를 나타내는 것을 확인할 수 있습니다.

 

다음 단락에서 자세하게 살펴보겠지만, iframe은 XSS(cross site scripting)등의 보안 이슈들을 야기할 수 있기 때문에 이를 차단하기 위해서 서비스 공급자 (여기서는 www.naver.com )에서 http헤더를 통해 페이지 렌더링 여부 등을 제한할 수 있습니다. 서비스 공급자는 해당 사이트가 iframe에 표시되는 것을 막기 위해 header설정을 통해 페이지의 도메인과 frame의 도메인이 같은지 여부를 확인하도록 하고, 둘이 다르다면 에러를 리턴하도록 한 것입니다. 

 

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <style>
      #title {
        width: 100%;
        height: 50px;
        background: black;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #frame {
        width: 100%;
        height: 300px;
      }
      #text {
        width: 100%;
        height: 50px;
        background: black;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
    <div id="title">this is title</div>
    <iframe id="frame" src="https://www.naver.com">
      이 브라우저는 iframe을 지원하지 않습니다.
    </iframe>
    <div id="text">this is text</div>
  </body>
</html>

 

 

- sandbox: 보안을 위해서 iframe에서 폼이나 자바스크립트가 실행되지 못하도록 하는 속성입니다.

ㄴ allow-forms: iframe 내에서 폼 실행 허용

ㄴ allow-same-origin: 같은 도메인의 리소스를 이용가능하도록 허용

ㄴ allow-scripts: 스크립트 실행 허용

 

But Not Recommended...

 

HTML5가 차세대 웹표준으로 정해지면서, iframe을 대신할 수 있는 여러 태그들이 추가되었습니다. 공식문서에서는 이들 태그의 사용을 권장하고 있습니다. 그 이유는 다음과 같습니다.

 

  1. XSS (cross site scripting)에 취약 → 악의적인 사용자가 다른 도메인에서 스크립트를 통해 플러그인을 실행하거나 입력을 가로채는 등의 행위를 할 수 있습니다.
  2. 사용성 문제 → 브라우저의 뒤로가기 버튼을 간헐적으로 작동되지 않게 하는 등 웹의 개념 모델과는 맞지 않는 여러 속성들 때문에 브라우저가 정상적으로 내용을 이해하지 못하는 경우들이 생깁니다.

  3. Google은 다음의 이유들 때문에 iframe생성을 자제하는 것을 권장합니다.

    • iframe은 웹 크롤링에 문제 를 끼칠 수 있음.
    • 웹의 개념 모델과 일치하지 않기 때문에 검색 엔진에 문제를 일으킬 수 있음.
    • 한 페이지에 하나의 url만 표시
    • iframe내에서 따로 연산된 후 보여지므로 필연적으로 사이트의 overhead를 유발할 수 있다.

 

XSS등의 공격에 취약하다는 단점들을 잘 이해하고 적절한 곳에 사용한다면 iframe은 약이 될 수 있지만, 대체로 다른 방법이 있다면 iframe을 사용하는 것을 권장하지 않는다는 것으로 정리할 수 있습니다.

반응형

'Frontend' 카테고리의 다른 글

[React] Virtual DOM & Diffing 알고리즘  (0) 2020.09.13
[React] Redux 직접 만들어보기  (0) 2020.09.04
[Browser] Console 객체  (0) 2020.07.26
[OAuth] OAuth2.0 Facebook 로그인 구현  (1) 2020.07.05
[OAuth] OAuth 2.0  (0) 2020.07.04