Iframe을 사용하면 안되는 이유

Iframe

An inline frame is used to embed another document within the current HTML document.

---

iframe HTML 태그는 웹 사이트 내에서 다른 웹 사이트를 보여줄 때 사용한다.

즉, html 파일을 가져와 보여주는 역할을 한다.

마치 노션의 embed 기능과 같다.

 

<iframe src={url} title="title"></iframe>

 

크기 조절

<iframe src={url} height="200" width="300" title="title"></iframe>

<iframe src={url} style={{height: "200", width: "300"}} title="title"></iframe>

 

Target for a Link

<iframe src={url} name="frame_a" title="frame_example"></iframe>

<p><a href={diffUrl} target="frame_a">Different Url</a></p>

a 태그는 클릭으로 페이지를 이동할 수 있다.

다만, target 값으로 iframe의 name 값을 입력하면, iframe 내에서 해당 페이지를 확인할 수 있다.

 

 

Embed

---

embed 태그는 웹 페이지, 사진, 미디어 플레이어, 플러그인과 같은 외부 자원을 컨테이너로 정의한다.

⛔ 대부분의 브라우저는 더이상 플러그인과 Java Applets을 지원하지 않는다.

사진 → <img>
HTML → <iframe>
video, audio → <video>, <audio>

 

를 권장한다.

 

 

 

iframe을 설명하는 이유는 사용을 권장하지 않기 때문이다! 왜일까?!

 

 

iframe을 사용하면 안되는 이유

---

iframe은 페이지 내에 다른 페이지를 독립적으로 띄울 수 있다.

이 기능을 사용하여 브라우저 내에서 멀티태스킹을 원할하게 해준다.

즉, 많은 정보를 한 화면에 담아낼 수 있어 자원을 절약할 수 있다.

 

그러나, 현재 사이트에서 다른 사이트를 띄울 수 있기에 악의적인 공격 역시 가능하다.

가장 단순하게는, 많은 수의 iframe을 만들어 웹 사이트에 접근하여 서버에 부하를 가할 수 있다.

 

XSS(Cross Site Scripting) 공격

---

XSS 공격 역시 가능하다.

크로스 사이트 스크립팅은 공격자가 상대방의 브라우저에 스크립트가 실행되도록 해 사용자의 세션을 가로채거나, 웹사이트를 변조하거나, 악의적 콘텐츠를 삽입하거나, 피싱 공격을 하는 것을 말한다.

iframe을 사용하여 악의적인 스크립트를 가지고 있는 사이트를 띄워 놓을 수 있어, 사용자가 접근하여 스크립트에 노출될 수 있다.

 

이는 동일 출처 정책(Same Origin Policy, SOP)으로 해결되었다.

어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 보안 방식이다.

웹 브라우저 보안을 위해 프로토콜, 호스트, 포트가 동일한 서버로만 요청을 주고 받을 수 있도록 한 정책이다.

 

따라서, 같은 서버가 아닌 경우 접근을 차단할 수 있고, iframe 역시 같은 도메인 내에서만 사용해야 한다.

 

 

CORS

Cross Origin Resource Sharing

---

추가 HTTP 헤더를 사용해서 브라우저가 한 출처에서 실행 중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록 하는 메커니즘이다.

 

서로 다른 도메인 간의 통신을 허용하는 방법이다.

서로 약속된 도메인과 서버 간의 통신만 허용하기 때문에 안전하게 통신할 수 있다.

 

 

iframe에 관한 내용을 정리하고 보니,

third-party에서 사이트에 접근하는 것 자체를 막아야 한다는 생각이 들었다.

 

악의적으로 수많은 iframe으로 공격한다면, 서버가 내려갈지도…?

 

 

사이트에 대한 접근 자체를 막으려면, 아래의 코드를 사용하면 된다!(Node.js 기준)

 

import helmet from 'helmet';

app.use(helmet.frameguard({ action: 'SAMEORIGIN' }));

frameguard를 사용하여 SAMEORIGIN 일 때만 접근을 허용하는 것이다.

이는 도메인의 주소가 같아야 접근할 수 있다는 것을 의미한다.

 

 

아래 코드 역시 같은 방법이다!

import frameguard from 'frameguard';

app.use(frameguard({ action: 'SAMEORIGIN' }))

 

참고자료

---

https://studystorage.blogspot.com/2017/02/iframe-1_26.html

iframe 보안 문제 우회 및 해결법 1

 

https://stackoverflow.com/questions/19843085/how-to-block-website-from-loading-in-iframe

how to block website from loading in iframe?

 

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

X-Frame-Options - HTTP | MDN