[MDN Study] <iframe>과 CSP 개념

1. 개요

HTML에서 임베딩(embedding)은 외부 콘텐츠(이미지, 미디어 파일, 다른 문서 등)를 현재 웹 문서 안에 통합하거나 포함시키는 과정을 의미한다.

가장 흔히 쓰이는 <img>, <video>도 임베딩의 일종이다. 이미지에 대해서는 [MDN Study] <img> 요소를 참조한다.

흔히 유튜브 동영상이나 지도(구글 맵, 네이버 맵 등)를 삽입하는 방식으로 많이 사용되고,

직접 조작할 수 없거나 자체 버전을 구현하기 번거로운 외부 컨텐츠를 삽입하는 데 유용하다.

사용 가능한 속성으로는 sandbox, loading, referrerpolicy, allow fullscreen, src, width, height 등이 있다.

이 태그를 이용해 문서를 구현하려 할 때

메인 컨텐츠를 로딩할 때 같이 로딩되게 하지 말고, src를 비워두었다가 JS를 이용해 따로 설정해주면 좋다.

초기 페이지 로드 속도에 도움이 된다.

이 요소는 근본적으로 외부 컨텐츠를 삽입할 때 쓰기 때문에 해커의 일반적인 공격 목표가 된다.

링크를 삽입한 사용자의 웹 페이지를 수정하거나 이용자를 속여 민감 정보를 유출시킬 수 있다.

이에 대비해 타 사이트에서 <iframe>으로 포함하지 못하도록 사이트 개발자가 따로 설정하기도 한다.

따라서 이 요소는 정말 신뢰할 수 있는 사이트에서 제한적으로만 사용하는 것이 좋다.

항상 sandbox 속성을 파라미터 없이 사용하되 꼭 필요할 때만 하나씩 해제한다.

특히 allow-script, allow-same-origin을 동시에 적용해서는 안 된다. CORS를 우회할 수 있게 된다.

또 CSP 지시어를 설정한다. frame-ancestors 헤더를 사용해 클릭재킹 공격 방어와 허용/차단 규칙을 설정할 수 있다.

X-Frame-Options도 가장 기본적인 방어책이지만 현재는 frame-ancestors가 권장된다.

컨텐츠 보안 정책이다.

XSS나 데이터 주입 공격을 비롯한 특정한 유형의 공격을 탐지하고 완화하는 데 쓰이는 추가적인 보안 계층이다.

CSP를 지원하지 않는 브라우저는 이 정책을 무시하고 평소와 같이 동작하며

기본적으로 웹 컨텐츠에 대한 표준 동일 출처 정책(SOP)을 사용한다.

CSP의 가장 중요한 역할은 신뢰할 수 없는 소스의 실행 방지이다.

보통 주요 목표는 XSS의 완화 및 보고이다.

XSS는 서버에서 받은 컨텐츠를 브라우저가 신뢰한다는 점을 악용하는데,

CSP를 사용하면 서버 관리자가 브라우저에서 실행 가능한 스크립트의 유효한 소스로 간주해야 하는 도메인을 지정하여 XSS를 완화한다.

허용된 도메인에서 받은 스크립트만 실행하고 나머지는 무시하는 식이다.

또한, 패킷 스니핑 공격 완화 기능도 수행한다.

서버는 사용할 수 있는 프로토콜을 지정할 수 있다. 예를 들어 upgrade-insecure-requests 지시어를 사용해 모든 컨텐츠가 https를 사용하여 로드되도록 하는 식으로.

또 CSP 자체의 기능은 아니지만 서버에서 Strict-Transport-Security HTTP 헤더를 사용해 http 페이지를 https 페이지로 강제 리다이렉션시킬 수 있다.

이 헤더가 적용되면 모든 통신이 https로 이루어지므로 자연스럽게 모든 중요한 쿠키에는 Secure 속성을 필수로 적용하는 것이 권장된다.

CSP는 단순히 도메인을 지정하는 것을 넘어 인라인 스크립트(<script>...</script>)와 동적 이벤트 핸들러(onclick="...")의 실행,

그리고 eval()과 같은 문자열 기반 코드를 실행하는 함수를 기본적으로 차단한다.

인라인 스크립트가 꼭 필요한 경우 일회용 토큰이나 Hash값을 사용해 특정 스크립트만 신뢰하도록 하는 것이 보안적으로 권장되는 사항이다.

서버에서 HTTP 응답 헤더를 통해 설정하는 것이 가장 좋다. CSP 지시어를 설정할 수 있다.

이 방법은 서버/네트워크 계층에서 가장 먼저 적용되어 강력한 보안을 제공한다.

*Content-Security-Policy-Report-Only 헤더를 사용하여 운영 환경에 정책을 적용하기 전 테스트할 때 유용하다.

정책을 위반해도 컨텐츠를 차단하지 않고 위반 내역만 지정된 URI로 보고받을 수 있다.

지시어	설명	예시
default-src	다른 지시어에서 명시하지 않은 모든 유형의 콘텐츠(스크립트, 이미지, 스타일 등)에 대한 기본 정책을 설정한다.	default-src 'self';
script-src	JavaScript 소스를 제한한다. XSS 방어의 핵심	script-src 'self' ajax.googleapis.com;
style-src	CSS 스타일시트 소스를 제한한다.	style-src 'self' fonts.gstatic.com;
connect-src	fetch, XMLHttpRequest, WebSocket 연결 등 요청 가능한 대상을 제한한다.	connect-src 'self' api.example.com;
upgrade-insecure-requests	문서 내의 모든 HTTP URL 요청을 자동으로 HTTPS로 변환하여 요청하도록 브라우저에 지시한다. 혼합 콘텐츠(Mixed Content) 공격을 방지	upgrade-insecure-requests;
frame-ancestors	이 페이지를 <frame>, <iframe>, <object> 등으로 포함할 수 있는 대상을 제한한다. 클릭재킹 방어 용도	frame-ancestors 'self';