제2의 비엔지니어 인생관을 꿈꾸며

Posted
Filed under jQuery
IFRAME 요소(HTML5 지원)

iframe 요소는 인라인 프레임(Inline FRAME)을 표시한다.
- 인라인 프레임은 문서 내에 다른 문서를 넣기 위한 기술이다
- HTML5로 바뀌면서 frame 요소는 사라졌지만 iframe 요소는 남았다.
- HTML5에 새로이 추가된 속성 및 사라진 속성들이 존재한다.

src 속성
src 속성은 인라인 프레임으로 제공할 소스(source)를 지정한다.


sandbox 속성
HTML5에서 새로이 추가된 속성으로서, 보호구역으로 지정하여 해당 프레임에 삽입되는 페이지에 다음과 같은 제한을 둘 수 있다.

<iframe src="test.html" ></iframe>
*  실제 존재하지 않는 도메인(오리진)에 속한 것으로 간주함. 따라서 자신이 소속된 도메인과도(allow-scripts에 의해 실행이 가능
    해져도)  통신할 수 없음
* 플러그인(ActiveX, 플래시등) 실행금지
* Javascript 사용금지
* 폼 요소에 의한 페이지 호출금지
* 부모 문서를 대체하는 브라우징이 불가능

위의 제한이 너무 엄격하여 iframe 안의 페이지가 동작하지 않을때는 sandbox 속성에 다음과 같은 값을 지정하여 샌드박스 제한을 완화할 수 있다.

| allow-same-origin
원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때는 부모 문서(parent document)에 접근할 수 없다. 이럴 때는 allow-same-orign 속성값을 이용하면 다른 도메인의 문서를 같은 도메인의 문서로 간주하여 부모 문서에 접근할 수 있게 된다(서버와의 통신, 스토리지 이용등)
<iframe src="http://www.example.com/test.html" sandbox="allow-same-origin"></iframe>






| allow-top-navigation
원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때는 부모 문서를 대체하는 브라우징은 불가능하다. 이럴 때는 allow-top-navigation 속성값을 이용하면 인라인 프레임에 있는 링크를 클릭했을 때 부모 문서가 사라지고 외부 문서가 나타나게 하거나 새창을 열어 새로운 브라우징할 수 있도록 처리할 수 있다.
<iframe src="http://www.example.com/test.html" sandbox="allow-top-navigation"></iframe>



| allow-form

원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때는 폼 데이터를 다른 곳으로 보낼 수 없다. 이럴 때는 allow-forms 속성값을 이용하면 인라인 프레임에서 폼 데이터를 다른 곳으로 보낼 수 있다.
<iframe src="http://www.example.com/test.html" sandbox="allow-form"></iframe> 


| allow-scripts
원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때는 스크립트 실행은 허용되지 않는다. 이럴 때는 allow-scripts 속성값을 이용하면 인라인 프레임에서 스크립트를 실행시킬 수 있다. 단 팝업창은 허용되지 않는다. 스크립트는 여러 가지 보안 상의 문제를 야기시킬 수 있기 때문에 신뢰할 수 있는 문서일 경우에만 허용해야 한다.
<iframe src="http://www.example.com/test.html" sandbox="allow-scripts"></iframe> 


출처  : http://webdir.tistory.com/312?category=607030

2018/02/08 15:23 2018/02/08 15:23