목차
sandbox 예제 - iframe 기능 제한 sandbox 정의 sandbox 구문 sandbox 예제 - iframe 기능 허용 allow-same-origin 속성값 의미
sandbox 예제 - iframe 기능 제한
※ iframe에 적용된 서브 페이지의 JS 동작 제한 등 모든 제한 적용
<iframe src="another_page.html " sandbox>
<p>당신 브라우저는 iframes 태그 지원 X</p>
</iframe>
(예) another_page.html 페이지에 적용된 JS 소스
<button onclick="getDateTime()">날짜/시간 얻기</button>
<div id="demo"></div>
<script>
function getDateTime() {
var dateTime=new Date();
document.getElementById("demo").innerHTML=dateTime;
}
</script>
결과값 예: Mon Feb 20 2023 15:18:33 GMT+0900 (한국 표준시)
sandbox 정의
iframe 태그 이용해 삽입된 페이지의 기능을 제한하거나 특정 기능만 허용해 보안 강화.
1. sandbox 속성 사용 가능 태그 종류
<iframe>
2. sandbox 속성 있는 경우, 아래 내용 수행됨.
콘텐츠를 고유한 원본에서 가져온 것으로 처리
폼데이터 제출 차단
스크립트 실행 차단
API 비활성화
링크가 다른 브라우징 컨텍스트를 대상으로 하지 않도록 방지
콘텐츠가 (<embed>, <object>, <applet> 등 이용한) 플러그인을 사용하지 못하도록 방지.
콘텐츠가 최상위 브라우징 컨텍스트를 탐색하지 못하도록 방지
자동으로 트리거되는 기능 차단 (예: 비디오 자동 재생, 폼양식 자동 포커스)
3.
IE10 이상 주요 최신 브라우저 모두 지원.
sandbox 구문
<iframe sandbox="value ">
[속성값]
value
삽입 웹페이지 기능 제한하거나 특정 기능 가능하도록 설정.
※ 한번에 여러 값 사용하려면, 공백 으로 구분해 나열.
※ 가능값 종류
(값 없음) - 모든 제한 사항을 적용.allow-forms - 양식 제출 허용.allow-modals - 모달창 열기 허용.allow-orientation-lock - 화면 방향 잠그기 허용allow-pointer-lock - 포인터 잠금 API 사용을 허용.allow-popups - 팝업 허용allow-popups-to-escape-sandbox - 팝업이 샌드박스 상속하지 않고 새 창을 열 수 있도록 허용.allow-presentation - 프레젠테이션 세션을 시작 가능.allow-same-origin - iframe 콘텐츠가 동일한 출처에서 온 것으로 취급되도록 허용. (아래서 상술)allow-scripts - 스크립트 실행 허용allow-top-navigation - iframe 콘텐츠가 최상위 브라우징 컨텍스트를 탐색할 수 있도록 허용.allow-top-navigation-by-user-activation - iframe 콘텐츠가 최상위 브라우징 컨텍스트를 탐색하도록 허용하지만 사용자가 시작한 경우에만 가능.
sandbox 예제 - iframe 기능 허용
[예제1] - (폼제출, JS스크립트) 허용.
<iframe src="https://example.com" sandbox="allow-forms allow-scripts"> <p>당신 브라우저는 iframe 태그 지원 X</p></iframe>
[예제2] - (폼체줄, JS스크립트, 팝업, 동일출처, 최상위탐색) 허용.
<iframe src="https://homzzang.com" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-top-navigation"> <p>당신 브라우저는 iframe 태그 지원 X</p></iframe>
allow-same-origin 속성값 의미
allow-same-origin 은 sandbox 속성의 값 중 하나로, 삽입된 웹페이지가 부모 웹페이지와 동일한 출처(origin)를 가지는 경우에만, 삽입된 웹페이지와 부모 웹페이지 간의 상호작용을 허용 하는 보안 정책임.
출처(origin) 란 프로토콜, 호스트, 포트번호를 조합하여 구성된 URL의 일부분 을 말합니다. 예를 들어, https://example.com:8080/path/to/resource URL의 출처는 https://example.com:8080임. 출처가 다르다면, 보안 상의 이유로 서로 간의 상호작용을 제한하는 것이 일반적임.
allow-same-origin 사용하면, 삽입된 웹페이지가 부모 웹페이지와 동일한 출처를 가지는 경우에만, 다음과 같은 기능을 사용 가능함.
부모 웹페이지와의 상호작용 window.opener 속성을 사용한 창 제어 기능 postMessage() 메서드를 사용한 부모 웹페이지와의 통신 allow-same-origin을 사용하는 경우, 삽입된 웹페이지와 부모 웹페이지 간의 출처가 동일해야 하므로, 보안상 안전한 상황에서만 사용하는 것이 좋음 . 또한, allow-same-origin을 사용하는 경우에도, 다른 sandbox 속성 값들이 적용되므로, 보안에 민감한 기능들은 여전히 제한될 수 있음.
