[attribute] HTML - sandbox 속성 ★ - iframe태그에 삽입된 웹페이지에 제한 걸거나 특정 기능 허용 지정 (= sandbox속성 = 샌드박스속성) ※ 아이프레임태그로 삽입한 웹페이지의 (기능제한/기능허용) 설정

1. sandbox 예제 - iframe 기능 제한
2. sandbox 정의
3. sandbox 구문
4. sandbox 예제 - iframe 기능 허용
5. 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 속성 값들이 적용되므로, 보안에 민감한 기능들은 여전히 제한될 수 있음.