minstudio

외부 콘텐츠 삽입과 보안 (<iframe>, sandbox)

유튜브 영상, 구글 지도, 혹은 외부의 결제 위젯 등을 내 웹사이트에 가져올 때 사용하는 태그가 바로 <iframe> 입니다. 마치 내 웹페이지 안에 다른 웹페이지를 보여주는 작은 창문을 뚫는 것과 같습니다.

하지만 제 3자의 코드를 그대로 실행하는 것은 매우 위험합니다. 악성 자바스크립트가 실행되거나(XSS), 내 사이트의 쿠키를 탈취할 수 있기 때문입니다. 이를 방지하기 위해 sandbox 속성을 반드시 추가해야 합니다. 이 속성을 부여하면 iframe 내부의 콘텐츠는 철창(격리된 환경)에 갇히게 되어, 명시적으로 허용한 기능(예: allow-scripts) 외에는 아무런 해킹 시도도 할 수 없게 됩니다.

<!-- 
  sandbox 속성이 없는 iframe (매우 위험함)
  외부 스크립트가 내 페이지를 마음대로 조작할 수 있습니다.
-->
<!-- <iframe src="https://example.com" width="100%" height="200"></iframe> -->

<!-- 
  안전한 iframe 사용법
  1. sandbox: 기본적으로 모든 위험한 행동(스크립트 실행, 폼 제출, 부모 창 조작)을 차단합니다.
  2. allow-scripts: 하지만 스크립트 실행은 허용합니다. (유튜브 재생 등)
  3. allow-same-origin: 외부 리소스가 이미지를 불러오거나 통신하는 것을 허용합니다.
-->
<div style="border: 2px solid #ef4444; padding: 10px; border-radius: 8px; background: #fef2f2;">
  <h3 style="color: #b91c1c; margin-top:0;">🛡️ Sandbox가 적용된 안전한 iframe</h3>
  
  <iframe 
    srcdoc="<h1>안전한 외부 콘텐츠입니다.</h1><script>alert('이 경고창은 sandbox allow-scripts 옵션 덕분에 실행됩니다!');</script>"
    width="100%" 
    height="150" 
    style="border: 1px solid #fca5a5; border-radius: 4px;"
    sandbox="allow-scripts"
  >
  </iframe>
  <p style="color: #7f1d1d; font-size: 14px;">(srcdoc 속성을 쓰면 src URL 대신 직접 HTML을 작성해 넣을 수 있습니다.)</p>
</div>
실행 결과
외부 콘텐츠 삽입과 보안 (<iframe>, sandbox) | Minstudio