<iframe> 태그 완벽 가이드: 외부 콘텐츠 삽입과 보안 설정 팁

Frontend/HTML

<iframe> 태그 완벽 가이드: 외부 콘텐츠 삽입과 보안 설정 팁

미니임 2026. 2. 26. 00:25

웹사이트를 운영하다 보면 유튜브 영상, 구글 지도, 혹은 다른 웹페이지의 일부를 내 사이트에 보여줘야 할 때가 있습니다. 이때 가장 많이 사용하는 도구가 바로 <iframe> 태그입니다. 하지만 편리함 이면에는 보안 취약점이라는 위험도 존재합니다.

오늘은 <iframe>을 효과적으로 활용하는 방법과 내 사이트를 안전하게 보호하는 보안 설정에 대해 알아보겠습니다.

1. <iframe> 태그란?

기본 문법

<iframe src="삽입할_주소" width="너비" height="높이" title="콘텐츠_설명"></iframe>

src: 불러올 페이지의 URL입니다.
width / height: 프레임의 크기를 조절합니다.
title: 웹 접근성을 위해 반드시 작성해야 하며, 스크린 리더가 이 프레임이 무엇인지 읽어줍니다.

2. 실전 활용 예제

① 유튜브(YouTube) 영상 삽입하기

유튜브는 '공유' 버튼을 통해 iframe 코드를 제공하지만, 속성을 직접 수정하여 제어할 수 있습니다.

예제: 특정 시간에 시작하고 자동 재생되는 영상

start=30: 30초 지점부터 재생합니다.
autoplay=1&mute=1: 자동 재생을 설정합니다. (브라우저 정책상 자동 재생은 대개 음소거 상태여야 작동합니다.)

② 구글 지도(Google Maps) 삽입하기

특정 위치를 방문자에게 안내할 때 유용합니다.

예제: 서울 시청 지도 삽입

loading="lazy": 사용자가 해당 위치까지 스크롤 할 때까지 지도를 로딩하지 않아 페이지 속도를 최적화합니다.

3. 강력한 보안을 위한 설정 팁

외부 콘텐츠를 불러오는 것은 곧 외부의 스크립트가 내 사이트에서 실행될 수 있음을 의미합니다. 이를 제어하기 위해 반드시 다음 속성을 활용하세요.

① sandbox 속성 사용 (가장 중요)

sandbox 속성은 iframe 내의 기능을 명시적으로 허용된 것 외에는 모두 차단합니다.

<iframe src="external.html" sandbox="allow-scripts allow-same-origin"></iframe>

값 없음 (sandbox=""): 모든 제한을 적용합니다. (스크립트 실행 불가, 폼 전송 불가 등)
allow-scripts: 스크립트 실행을 허용합니다.
allow-same-origin: 같은 출처의 리소스를 사용할 수 있게 합니다.
allow-forms: 폼 제출을 허용합니다.

② allow 속성 (권한 정책)

카메라, 마이크, 가속도계 등 하드웨어 접근 권한을 세밀하게 조정합니다.

<iframe src="..." allow="camera; microphone; geolocation"></iframe>

필요하지 않은 권한은 절대 부여하지 않는 것이 보안의 기본입니다.

③ Referrer Policy 설정

정보 유출을 방지하기 위해 리퍼러(참조 주소) 정보를 어떻게 보낼지 결정합니다.

<iframe src="..." referrerpolicy="no-referrer-when-downgrade"></iframe>

4. 반응형 iframe 만들기 (CSS)

고정된 width와 height는 모바일에서 화면이 깨지는 원인이 됩니다. CSS를 사용하여 비율에 맞춰 크기가 변하도록 설정해 보세요.

HTML

CSS

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 비율 */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

마치며