HTML의 iframe이 무엇이고 왜 iframe의 접근을 금지하지?

나는 IT 학원에서 학생들을 대상으로 FE 강사를 하고있다. 물론 React와 같은 프레임워크 강의를 진행하지 않지만, HTML, CSS, JS, Python 등 기초 웹 프론트엔드와 언어들을 강의하고있다.

 

최근 한 학생이 물어본 HTML의 iframe 태그에 대해 정리하고자 이 글을 사용한다.

 

학생의 질문은 다음과 같다.

현제 프로젝트에서 iframe을 이용해 다른 웹 사이트를 띄우려고 하는데, 인스타그램을 비롯한 많은 서비스에서 iframe을 통한 접근을 금지하는데 왜 금지하는가? 라는 질문이였다.

 

프론트엔드 강사라는 사람이 해당 질문에 대한 답을 제대로 하지 못했다...... 학생에게 정말 미안한 마음이다...

 

 

iframe이란?

iframe 태그는 HTML 문서내에서 또 다른 HTML 문서를 삽입할 때 사용하는 태그이다. 간단하게 이야기 하면 현제 페이지에서 다른 페이지를 불러오는 것이다.

// 문법
<iframe src="삽입할페이지주소" width="너비" height="높이"></iframe>

// 예시
<iframe src="./intro.html" width="300" height="300"></iframe>

W3Schools.com

 

유튜브와 로그인창 등 다양하게 활용할 수 있는 좋아보이는 기술을 왜 접근을 막아놓은 것일까?

 

원인은 보안적, 성능적 문제

많은 웹 서비스들이 보안 및 성능 문제로 인해 iframe을 통한 접근을 금지한다.

 

물론 장점도 있다.

 

독립적으로 다른 페이지를 띄워주며 브라우저 내에서 멀티태스킹을 원활하게 해준다.

 

하 지 만

 

아래와 같은 문제들 때문에 접근을 금지한다

 

1. XSS ( Cross Site Scripting ) 공격

신뢰할 수 있는 사이트가 아니라면 iframe이 가져온 페이지의 컨텐츠를 웹 사이트에서 이용할 경우 외부로 부터 사용자의 세션을 가로채거나, 웹사이트를 변조, 악의적인 콘텐츠(바이러스 등)를 삽입, 피싱 공격을 할 수 있다.

 

iframe을 이용해 악의적인 스크립트를 갖고 있는 사이트를 띄울 수 있어 사용자가 접근해 악성 스크립트에 노출될 수 있다.

이 문제는 동일 출처 원칙(SOP)을 이용해 다른 출처에서 문서나 스크립트를 가져오는 상호작용을 제한해 동일한 서버내에서 통신할 수 있게 하여 해결할 수 있다.

그렇기 때문에 유튜브와 같은 웹 서비스는 다른 사이트에서 iframe으로 접근하게 되면 보안적으로 접근을 금지할 수 있다.

 

2. 클릭재킹 공격

페이지에서 iframe 태그를 숨겨놓고 실제 페이지의 클릭을 iframe내의 클릭으로 인식되게끔 스크립트를 작성한다. 예를 들어 투명한 iframe을 오버레이하여 사용자가 생각하지 않은 동작을 수행하게 만드는 것이다.

이를 방지하기 위해서는 'X-Frame-Option' HTTP 헤더나 'Content-Security-Policy'를 이용해 iframe의 사용을 금지해야한다.

 

 

그렇다면 사용하면 안되? 안전하게 구현하는 법은 없어?

댐에 구멍이 생기면 구멍을 매꾸면된다.

 

여러가지 보안 조치를 취하는 것이 중요하다.

 

sandbox 속성을 사용해 iframe 내의 행동을 제한하여 보완할 수 있다.

<iframe src="https://example.com" sandbox="allow-same-origin allow-scripts"></iframe>

• allow-same-origin : 동일 출처 정택을 유지
• allow-scripts : 스크립트 실행을 허용

 

이밖에 X-Frame-Option헤더 설정, CSP(Content-Security-Policy), HTTPS 등을 적요하는 방법이 있지만, 사실 사용하지 않는것이 좋다고 한다....

 

시간이 지날수록 React와 같은 프레임워크를 이용해 팝업창을 구현하기 쉬워지고, 보안상의 찝찝함을 갖은채 개발하면 흠..... 별로 좋은 방법은 아닐거라 생각한다.

 

 

그럼에도 불구하고 사용할때는?

대기업 프론트엔드 개발자 지인의 이야기 인용하자면, 특정 플랫폼에서 아직 iframe을 여전히 사용하는 경우가 있다. 이는 동일한 서버, 즉 사내 서비스에서 또다른 사내 서비스의 컨텐츠를 이용할 때 iframe을 이용한다 한다.

 

이는 동일한 서버에서 동일한 도메인을 통해 컨텐츠를 불러오기 때문에 보안적으로 안전하므로 아직까지 사용하는 경우도 있다고 한다.