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

iframe 태그란?

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

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

 

 iframe 태그 사용법 

See the Pen iframe 태그 사용법 by wjdxo513 (@wjdxo513) on CodePen.

 

사용하는 방법은 위와 같이 <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 속성 지원 안함)

 

현재 iframe 방식은 권장되고 있지 않습니다.

공식 문서에서는 iframe태그의 사용을 권장하고 있지 않는데요 이유는 아래와 같습니다.

 

XSS 공격에 취약해집니다.

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

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

 

사용성이 떨어집니다.

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

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

 

웹 크롤링 문제

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

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

 

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