[Html] iframe 태그 사용법 & 예제

iframe 태그란?

iframe 태그는 inline frame의 약자로써 해당 웹 페이지 안에 다른 html 파일을 불러와서 삽입할 수 있는 기능을 제공합니다. 과거에는 html 파일을 재사용할 목적으로 header나 sidebar와 같은 요소들을 따로 만들어 iframe태그로 묶어주는 형태로 웹 사이트 개발을 많이 진행했었습니다.

예를 들자면 위의 형태처럼요. 이밖에도 지도, 영상, 결제창 등 외부 요소들을 html에 삽입해야 할 때 과거에는 iframe으로 감싸서 개발을 많이 진행했었는데요. 다만 이와 같은 개발 형식은 iframe 방식의 다양한 문제가 도출되고, html5가 새롭게 등장하면서 현재는 잘 사용하지 않습니다.

 

ifram 태그 사용법

<iframe src="경로" width="300px", height=200px>
  <p>사용 중인 브라우저는 iframe을 지원하지 않습니다.</p>
</iframe>

사용하는 방법은 위와 같이 <iframe>태그 src 속성에 삽입할 웹 문서의 경로를 써주시면 됩니다. width, height 속성을 통해 iframe의 크기를 조절하실 수 있으며 iframe을 지원하지 않는 브라우저를 위한 텍스트를 <iframe></iframe> 안에 포함할 수 있습니다.

src 속성 사용 시 주의사항

아무 url을 src속성에 넣는다고 해서 무조건 랜더링이 되는 것은 아닙니다. iframe은 XSS(corss site scripting)등의 보안 이슈들을 야기할 수 있는 데 이를 차단하기 위해 서비스 공급자가 http헤더를 통해 페이지 렌더링 여부등을 제한할 수 있기 때문입니다. 이로 인해 위와 같이 유튜브 url을 삽입했을 때는 www.youtube.com에서 연  거부했다는 메시지가 출력되는 것을 보실 수 있습니다. 유튜브에서 iframe에 표시되는 것을 막기 위해서 header설정을 통해 페이지의 도메인과 iframe의 도메인이 다르다면 에러를 뱉도록 설정하였기 때문입니다. 

 

iframe 속성

속성	속성 값	설명
align	left (왼쪽) right (오른쪽) top (상단) middle (중단) bottom  (하단)	주변 요소들관의 관계에서 <iframe> 태그를 어느 쪽에 정렬시킬 것인지 결정 (html5 에서는 지원하지 않음)
height	px	<iframe>으로 불러온 웹페이지의 세로 길이 (px 단위는 표기 안 해도 됨)
width	px	<iframe>으로 불러온 웹페이지의 가로 길이 (px 단위는 표기 안 해도 됨)
src	url 주소	<iframe>으로 불러 올 웹 페이지의 주소 (http는 https사이트에서 사용 불가)
frameborder	0 (경계선 없음) 1 (경계선 있음)	<iframe> 으로 불러온 웹페이지의 주변에 테두리 여부 결정 (html5 에서는 지원하지 않음)
marginheight	px	<iframe>으로 불러온 웹페이지의 내용을 상단 하단 경계로부터 얼마나 멀리 띄울지 결정  (html5 에서는 지원하지 않음)
marginwidth	px	<iframe>으로 불러온 웹페이지의 내용을 좌측 우측 경계로부터 얼마나 멀리 띄울지 결정  (html5 에서는 지원하지 않음)
scrolling	yes (스크롤바 있음) no (스크롤바 없음) auto (자동)	<iframe> 요소에 스크롤바(scrollbar)를 표시할지 여부를 명시함. (html5 에서는 지원하지 않음)
longdesc	url 주소	<iframe> 요소에 보일 콘텐츠에 대한 설명을 담고 있는 페이지를 명시함. (html5 에서는 지원하지 않음)
srcdoc	html 코드	<iframe> 요소에 보일 웹 페이지의 HTML 코드를 명시함.
name	텍스트	<iframe> 요소의 이름(name)을 명시함.
sandbox	"" allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation	<iframe> 요소에 보일 콘텐츠에 대한 추가적인 제한 사항(restrictions)들의 집합을 명시함.
seamless	seamless	<iframe>으로 불러온 웹페이지 내용을 마치  부모 페이지 내용의 일부처럼 보이게 하는 속성으로 html5에서는 속성값 없이 seamless만 적어도 되나 xhtml에서는 반드시 속성="속성값" 형식으로 적어야 함. (seamless 속성은 크롬, 오페라, 사파리만 지원함. 단, 오페라12 포함 그 이전 버전과 사파리 5 포함 그 이전 버전은 seamless 속성 지원 안함)

XSS 공격에 취약해집니다.

악의적인 사용자가 다른 도메인에서 스크립트를 통해 플러그인을 실행하거나 입력을 가로채는 등의 행위를 할 수 있습니다.

• 사용자의 개인 데이터를 피싱하여 제출할 수 있는 악의적인 웹 양식을 얻을 수 있습니다.
• 악의적인 사용자가 플러그인을 실행할 수 있습니다.
• 악의적인 사용자가 원본 사이트 URL을 변경할 수 있습니다.
• 악의적인 사용자가 사용자의 클릭을 도용할 수 있습니다.
• 악의적인 사용자가 사용자의 키 입력을 가로챌 수 있습니다.

 

사용성이 떨어집니다.

브라우저의 뒤로 가기 버튼이 간헐적으로 작동되지 않고, 웹의 개념 모델과는 맞지 않는 여러 속성 때문에 브라우저 오류가 발생할 수 있습니다.

• 브라우저의 "뒤로 가기"버튼을 간헐적으로 작동되지 않을 수 있습니다.
• iframe 내의 콘텐츠를 연산한 후 frame에서 보여주므로, 해상도에 따라서 이상하게 보입니다.
• iframe의 src태그의 URL이 변경되면 iframe 내의 콘텐츠가 누락될 수 있습니다.

 

웹 크롤링 문제

구글 웹 마스터 포럼에 따르면, "iframe이 웹 크롤링에 문제를 끼칠 수 있음"이라고 경고하고 있습니다.

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

 

HTML5가 차세대 웹 표준으로 정해지면서 iframe을 대신할 수 있는 여러 가지 태그들이 추가되었으니 이를 활용하시면 됩니다. 물론 피치 못할 사정으로 html을 직접 삽입해야만 한다면 아직도 iframe방식이 가장 좋은 방식이라고는 합니다.