외부 콘텐츠 (iframe)
외부 콘텐츠 삽입과 보안 (<iframe>, sandbox)
유튜브 영상, 구글 지도, 혹은 외부의 결제 위젯 등을 내 웹사이트에 가져올 때 사용하는 태그가 바로
하지만 제 3자의 코드를 내 집에 그대로 들여와 실행하는 것은 보안상 매우 위험합니다. 이를 막아주는 강력한 안전장치가 바로
<iframe>입니다. 마치 내 웹페이지 안에 다른 웹페이지를 보여주는 작은 창문을 뚫는 것과 같습니다.하지만 제 3자의 코드를 내 집에 그대로 들여와 실행하는 것은 보안상 매우 위험합니다. 이를 막아주는 강력한 안전장치가 바로
sandbox 속성입니다.
1. 내 집에 낸 창문과 튼튼한 방범창
외부의 풍경은 볼 수 있지만, 외부의 강도가 내 집으로 넘어오지는 못하게 막아야 합니다.
🖼️
창문 (<iframe>)
유튜브 영상을 보여주기 위해 내 벽에 뚫은 작은 창문입니다. 누구나 이 창문을 통해 밖의 풍경(외부 콘텐츠)을 구경할 수 있습니다.
⛓️
방범창 (sandbox)
창문에 설치한 철창입니다. 이 속성을 부여하면 외부 콘텐츠는 격리되어, 내 사이트의 쿠키(로그인 정보)를 훔치거나 부모 창을 조작할 수 없게 됩니다.
2. Iframe 관련 핵심 속성
| 속성명 | 값 예시 | 설명 및 효과 |
|---|---|---|
src |
https://... |
iframe 창 안에 불러올 외부 웹사이트의 URL 주소를 입력합니다. |
srcdoc |
<h1>안녕</h1> |
외부 URL 대신, 아예 HTML 문자열을 직접 때려 넣어서 렌더링할 때 사용합니다. |
| sandbox | (빈 값) | 최고 수준의 철통 보안. JS 실행, 폼 제출, 부모 창 접근 등 모든 것을 차단합니다. |
allow-scripts |
보안은 유지하되, 유튜브 영상 재생 등을 위해 자바스크립트 실행만 예외적으로 허용합니다. | |
allow-same-origin |
iframe 내부에서 자신의 서버 이미지나 데이터를 불러오는(API 통신) 행위를 허용합니다. |