iframe에는 sandbox라는 속성이 하나 있습니다. 이는 iframe 사용에 있어서 좀 더 안전하게 사용할 수 있도록 보조해주는 정책인데요, CSP와 함께 잘 사용된다면 굉장히 튼튼한 iframe 정책을 유지할 수 있어집니다.

오늘은 iframe sandbox에 대한 이야기를 할까 합니다.

iframe sandbox?

sandbox에 대해선 한 3~4년전쯤인가.. xss 대안으로 좀 고려했었던 기억이 나네요. 그떈 정말 가볍게만 생각만 했었는데 잘 고려해본다면 iframe 을 좀 더 안전하게 사용해볼 수 있지 않을까 싶네요.

iframe의 sandbox는 src로 불러지는 내부 컨텐츠에 대해 제한하는 정책이자 속성입니다. sandbox 지시자가 붙은 순간부턴 모든 차단 정책이 적용되며 하나씩 허용할 부분들을 명시해주어서 필요한 컨텐츠는 불러올 수 있도록 바꿀 수 있습니다.

이런면에선 CSP랑 거의 유사한 느낌을 가지네요. (물론 CSP로도 제한 가능하죠.)

attribute	desc
	모든 정책 적용
allow-forms	<form> 등에서의 submit 허용
allow-pointer-lock	API 허용
allow-popups	frame에서의 팝업 허용
allow-same-origin	iframe 내부가 동일 출처(same origin)으로 처리되도록 변경(위험할듯)
allow-scripts	스크립트 실행 허용
allow-top-navigation	iframe이 top-level의 네비게이션, 즉 최상단 DOM 구조 접근 허용

How to protect iframe XSS

iframe 사용 중 src 제어가 가능하거나, 기능적으로 iframe 삽입이 필요한 경우 src 값에 javascript: , data: 등을 넣어 스크립트를 실행하게할 수 있습니다. 이 때 sandbox 옵션이 적용되면 iframe 내부가 도메인인 경우 해당 부분에서 동작하는 자바스크립트는 제외하고 javascript: , data: 등의 src로 구성된 XSS에 대해서는 일부 대응이 가능합니다. (Stored XSS의 경우엔 강제로 sandbox옵션을 주어야겠지요.)

<iframe src="javascript:alert(document)" sandbox="allow-scripts allow-same-origin" width="30%" height="70%"></iframe>

<iframe src="https://www.youtube.com/embed/EyYOoLuAKwc" sandbox="allow-scripts allow-same-origin" width="50%" height="70%"></iframe>

How to protect XFS

iframe src 주소에 대해 허용 도메인만 지정하는 방법은 sandbox 옵션에선 할 수 없습니다. 다만 CSP랑 조합하면 쉽게 가능한데요, (그냥 CSP 자체죠..)

CSP

Content-Security-Policy: frame-src https://www.hahwul.com;

** **Ifrmae with sandbox

<iframe src="https://www.hahwul.com" sandbox="allow-forms"></iframe>

이런식으로 같이 사용해서, 허용하는 도메인에 iframe을 걸되, 내부의 스크립트를 차단하거나 기능적인 부분들을 제한할 수 있습니다.

Refernce

https://www.w3schools.com/tags/att_iframe_sandbox.asp https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src