object

Attributions and copyright licensing (opens in a new tab) by Mozilla Contributors (opens in a new tab) is licensed under CC-BY-SA 2.5 (opens in a new tab).

임베딩의 짧은 역사

• 90년대 중후반에는 개별 HTML 페이지에 저장된 웹사이트의 작은 부분을 일컫는 frame을 사용하여 웹사이트를 만드는 방식이 유행했습니다. 메인이 되는 문서인 frameset에 frame이 삽입되었습니다. 네트워크 속도를 고려했을 때 다운로드 속도가 더 빠르다는 이점이 있었으나 네트워크 속도가 빨라짐에 따라 장점보다 여러 문제점이 더 부각되어 이제는 보기 어려운 방식입니다.
• 90년대 후반과 2000년대 초반에는 Java Applets (opens in a new tab)와 Flash (opens in a new tab) 같은 플러그인 기술이 유행하여 웹 개발자는 HTML만으로는 불가능했던 영상이나 애니메이션 같은 풍부한 콘텐츠를 <object> (opens in a new tab) 요소나 그보다는 사용 빈도가 낮았던 <embed> (opens in a new tab) 요소를 사용해 웹페이지에 넣었습니다. 접근성이나 보안, 파일 크기 등 여러 문제로 인해 인기가 사그라들었습니다. 최근 주요 브라우저는 Flash 같은 플러그인에 대한 지원을 중단했습니다.
• <canvas> (opens in a new tab)나 <video> (opens in a new tab) 등 콘텐츠를 삽입하는 다른 방식과 함께 <iframe> (opens in a new tab) (en-US) (opens in a new tab)요소가 등장했고 전체 웹 문서를 다른 웹 문서에 넣을 수 있습니다.

iframe 자세히 보기

예를 들면 온라인 비디오 제공자의 영상이나 Disqus (opens in a new tab)와 같은 댓글 시스템, 온라인 지도 제공자의 지도, 광고 배너 등이 있습니다. .

<iframe>를 사용하기 전에 알고 계셔야 할 보안 문제 (opens in a new tab)가 몇 가지 존재합니다. 웹 페이지에 MDN 용어사전을 넣으려고 한다면 용어사전 페이지 대신 에러 메시지가 표시되는 걸 보고 놀랄 수 있습니다.

Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X-Frame-Options' to 'deny'.

이는 아래 보안 파트에서 다룹니다.

• border: none (opens in a new tab) : 이를 적용하면, <iframe> 은 테두리 없이 표시됩니다. 적용하지 않으면 브라우저는 <iframe>을 기본적으로 테두리가 있는 상태로 표시하는데, 일반적으로 바람직하지는 않습니다.
• allowfullscreen (opens in a new tab) : (en-US) (opens in a new tab)이를 설정하면, <iframe>에서 Fullscreen API (opens in a new tab)를 통해 전제화면 모드를 실행할 수 있습니다. Fullscreen API는 본문에서 다루는 범위를 넘어선 내용입니다.
• src (opens in a new tab) (en-US) : (opens in a new tab)<video> (opens in a new tab)/<img> (opens in a new tab)와 마찬가지로 삽입될 문서의 URL 경로를 저장합니다.
• width (opens in a new tab) (en-US) (opens in a new tab) 와 height (opens in a new tab) (en-US) (opens in a new tab)iframe 요소에 원하는 너비와 높이를 설정할 수 있습니다.
• 대체 콘텐츠 : <video> (opens in a new tab) 요소와 같이 유사한 다른 요소들과 마찬가지로, <iframe></iframe> 여닫는 태그 사이에 대체 콘텐츠를 추가하여 브라우저가 <iframe>을 지원하지 않는 경우 대체 콘텐츠를 표시할 수 있습니다. 위 예시에서는 해당 페이지로 이동하는 링크를 추가하였습니다. 요즘 <iframe>을 지원하지 않는 브라우저를 마주칠 일은 거의 없겠지만요.
• sandbox (opens in a new tab) (en-US) (opens in a new tab)IE 10 이상에서 지원되는<iframe>의 다른 기능보다 이 특성은 상대적으로 최신 브라우저에서 작동하며 높은 보안 설정을 요구합니다. 이에 대해서는 다음 내용에서 다룰 예정입니다.

🦋 속도를 향상하기 위해 메인 콘텐츠가 완전히 로딩된 이후에 JavaScript로 iframe의 src 특성을 설정하는 편이 좋습니다.
웹 페이지를 더 빠르게 이용할 수 있고 SEO (opens in a new tab) 측정 시 중요한 지표인 웹 페이지 로딩 시간을 단축할 수 있습니다.

보안 문제

브라우저 제작사와 웹 개발자들이 얻은 값비싼 교훈이 있는데, iframe이 웹상에서 악의를 품은 사람들의 일반적인 공격 목표(공식 용어로는 공격 벡터)가 된다는 점입니다. 해커, 더 정확히는 크래커라 불리는 이 나쁜 사람들은 iframe을 악용하여 여러분의 웹페이지를 수정하거나, 사람들을 속여 사용자 명이나 비밀번호 등 민감한 정보를 유출하려 합니다. 이 때문에 명세 엔지니어와 브라우저 개발자는 <iframe>을 더 안전하게 만들기 위해 다양한 보안 장치를 개발했고, 고려할만한 모범 사례도 있습니다. 아래에서 다뤄보겠습니다.

🦋 클릭재킹 (en-US) (opens in a new tab)은 눈에 보이지 않는 iframe을 여러분의 웹 문서에 삽입하거나, 해커들의 악성 웹사이트에 여러분의 웹페이지를 삽입하여 사용자들을 잘못된 행동으로 유도하거나 민감한 데이터를 훔쳐내는 일반적인 기술입니다.

아까 봤던 메시지입니다.

Refused to display 'https://developer.mozilla.org/' in a frame because it set 'X-Frame-Options' to 'deny'.

다른 사이트에서 MDN 웹페이지를 <iframe>안에 포함하지 못하도록 MDN 개발자들이 설정했습니다.

여러분의 웹사이트에 전체 MDN 페이지를 삽입해두고 자기 사이트라고 우기거나 클릭재킹 (en-US) (opens in a new tab)으로 데이터를 훔치려 들 수 있기 때문입니다.

모두가 MDN 페이지를 삽입한다면 대역폭이 추가로 들어 Mozilla에서 큰 비용을 지불해야 할 겁니다.

필요한 경우에만 삽입하세요

• YouTube 영상이나 지도 같은 외부 콘텐츠를 삽입
• 본인 소유가 아니거나 저작권자에게 서면으로 명백한 허락을 받지 않았다면 자신의 웹페이지에 해당 콘텐츠를 절대로 게시해서는 안 됩니다. 저작권 위반에 대한 처벌은 엄중합니다. 다시 한번 말씀드리지만, 아무리 조심해도 지나치지 않습니다.
• MDN에 있는 콘텐츠는 저작권표시-동일조건변경허락 (CC-BY-SA) 라이선스 (opens in a new tab)를 적용하고 있습니다. 즉 MDN 콘텐츠를 인용할 때 내용을 상당 부분 수정하더라도 올바른 저작권 표시 (opens in a new tab)를 해야 합니다.

HTTPS를 사용하세요

• HTTPS는 콘텐츠가 전송 도중에 변조될 위험을 줄여줍니다.
• HTTPS는 삽입된 콘텐츠와 이를 포함하고 있는 문서가 서로에게 접근하는 것을 방지합니다.

🦋 여러 호스팅 업체에서는 직접 인증서를 설치하지 않아도 HTTPS를 적용할 수 있는 호스팅을 제공합니다. 하지만 직접 HTTPS를 적용해야 한다면, Let's Encrypt (opens in a new tab)에서 Apache 웹 서버나 Nginx 등 널리 사용되는 웹 서버를 지원할 뿐만 아니라 자동으로 필요한 인증서를 생성하고 설치할 수 있는 도구와 설명서를 제공하고 있습니다.

항상 sandbox 특성을 사용하세요

웹사이트를 악용하려는 사람들이 공격할 여지를 최소화하기 위해 삽입된 콘텐츠에 대해서는 필요한 작업만 허용해야 합니다.

CSP 지시어를 설정하세요

CSP (opens in a new tab)는 콘텐츠 보안 정책 (opens in a new tab) 을 나타내며 HTML 문서 보안을 개선하기 위해 고안된 일련의 HTTP 헤더를 제공합니다.  <iframe> 보안과 연관 지어 말씀드리자면, 적절한  (opens in a new tab)X-Frame-Options (opens in a new tab) 헤더를 전송하도록 설정할 수 있습니다 (opens in a new tab).

<embed>와 <object>

PDF는 많은 접근성 문제 (opens in a new tab)가 있어 링크를 통해 별도의 페이지에서 볼 수 있도록 하는 게 좋습니다.