웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

HTML attribute sandbox

Last Modified : 2018-07-20 / Created : 2018-07-19
4,154
View Count
HTML5에서 적용 가능한 새로운 Attribute sandbox에 대하여 알아봅니다.




# HTML5 sandbox attribute

sandbox는 HTML5에서 추가된 iframe에 적용 가능한 attribute입니다. iframe의 경우 Cross domain, 호스트에 영향을 받게 되는데 이에 대하여 크로스 도메인이나, 스크립트, 제한 등을 설정하는 방법으로 사용할 수 있습니다. 참고로 현재 이 속성은 최신 브라우저에는 대부분 지원되나 전체 모든 환경에서 지원되지는 않으므로 확인이 필요합니다.
<iframe sandbox src="http://webisfree.com"></iframe>

간단한 사용방법입니다. 위와같이 sandbox property를 사용할 경우 해당 iframe의 경우 아래와 같이 몇 가지 제한이 생기게됩니다.

  • iframe과의 통신이 불가능함
  • 스크립트 사용 불가
  • 폼 태그의 전송 불가
  • 플러그인이 실행 불가

위와 같은 제한사항 중에서 몇 가지 설정을 변경, 제한 해제하려면 아래와 같이 값을 설정할 수 있습니다.


! sandbox 프로퍼티 선택 가능한 값

위와같이 sandbox를 적용한 경우에 특정 기능에 대하여 선택하여 허용하는 것이 가능합니다. 아래의 값들이 사용됩니다.

allow-forms
적용할 경우 form 태그를 사용한 post 전송이 가능함

allow-scripts
자바스크립트 코드의 접근을 허용. 단 윈도우 팝업에는 iframe 요소 삽입이 불가능.

allow-same-origin
같은 origin인 경우의 통신을 허용함. 즉, 부모의 DOM 요소에 접근하는 것 가능
(!! 보안에 따른 이슈가 있으므로 cross origin 허용은 항상 사용에 주의해야 함)

allow-top-navigation
부모 요소의로 네비게이션 링크가 변경되는 것이 가능함


@ 참고사항
iframe 태그는 최근에는 많이 사용되지 않는데 아무래도 중요 데이터만 ajax로 받아오도록 하고 REST API 형태로 개발되기 때문이 아닐까 생각됩니다. 하지만 서버가 분리된 하나의 서비스인 경우 이를 추가하기 위해서 사용될 수 있을 것입니다.
아래의 글도 찾고 계시지 않나요?

    Previous

    HTML title 속성으로 툴팁(tooltip) 보여주기

    Previous

    HTML form태그를 사용하여 입력폼 만들기 및 예제