iframe이란?

• HTML 사이트 안에 새로운 웹페이지를 집어넣는 방식
• HTML 문서내에서 다른 HTML 문서를 보여줄 수 있음
• 모든 브라우저의 DOCTYPE 문서에서 작동함

사용법

<iframe src="삽입하는 웹페이지 URL" title="내용"></iframe>

• iframe 태그에 삽입하려는 웹페이지 URL을 넣고, title에 해당 iframe이 어떤 것인지를 적어둔다.
• 추가적인 옵션으로 width, height, frameborder, scrolling, marginwidth, marginheight, align, name 속성을 사용할 수 있다.
  - width, height: iframe의 가로 세로 길이
  • frameborder: iframe 테두리의 표시 여부
  • scrolling: 스크롤바 표시 여부
  • marginwith, marginheight: iframe의 가로, 세로 margin값
  • align: iframe을 정렬하는 방법
  • name: 다른 태그에서 id와 같은 역할을 하며 target으로 사용할 이름

iframe을 사용하는 때

• 웹 페이지 내부에서 video, audio등의 태그를 이용하거나, 개발자라면 api를 사용해 외부 컨텐츠를 사용할 수 있지만, 이런것이 지원되지 않는 사이트도 있다.
• 그럴때 외부 컨텐츠를 웹 페이지에 표시하고 싶다면 iframe을 사용해 데이터를 가져올 수 있다.

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

• XSS 공격에 취약해진다.
  - 악의적인 사용자가 사이트 내부 iframe에 피싱 스크립트를 넣어 플러그인을 실행시키거나, 입력을 가로채는 등의 행위를 할 수 있음
• 사용성 문제가 생긴다
  - 브라우저의 뒤로가기 버튼이 작동하지 않거나, 해상도에 따라 화면이 깨지는 문제가 생긴다
• HTML 코드량이 늘어나 브라우저의 메모리 사용량이 과대해지고 유지보수에 어려움을 겪을 수 있다.

Reference

MDN Docs