i프레임은 오랫동안 HTML 표준의 일부였습니다. 하지만 HTML 4.0에서는 지금은 눈살을 찌푸리게 하는 프레임과 함께 프레임세트 HTML 변형에 포함되었습니다. 프레임은 더 이상 HTML5에 포함되지 않지만 임베디드 프레임(iFrame)은 포함되어 있습니다.
다른 웹사이트는 i프레임을 통해 통합할 수 있습니다. 따라서 브라우저는 현재 웹사이트 내에 다른 HTML 파일을 렌더링합니다. 아이프레임 창의 콘텐츠는 개별적으로 서식을 지정할 수 있습니다.
아이프레임을 사용하는 경우 이 HTML 기술의 보안도 당연히 별도로 고려해야 합니다. 여기서 한 가지 문제는 악성 코드가 아이프레임을 통해 웹사이트에 눈에 띄지 않게 침투할 수 있다는 점입니다. 물론 이것은 큰 골칫거리입니다.
하지만 HTML5에는 이러한 문제를 우회하는 데 사용할 수 있는 적절한 보안 메커니즘이 있습니다. 이에 대한 자세한 내용은 이 튜토리얼의 뒷부분에서 설명합니다. 하지만 새로운 보안 속성이 아직 모든 브라우저에서 지원되지 않기 때문에 아이프레임을 사용하기 전에 잠재적으로 위험할 수 있다는 점을 염두에 두어야 합니다.
따라서 HTML5에서 iFrame은 고정된 표준이며 몇 가지 추가 속성을 제공합니다. 다음 예시는 아이프레임을 정의하는 방법을 보여줍니다.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
브라우저에서 결과는 다음과 같이 표시됩니다.
iframe 요소에 src 속성이 할당됩니다. 이 src에는 값으로 표시할 페이지가 포함됩니다. 로컬 파일일 수 있습니다. 그러나 표시된 예에서와 같이 외부 리소스를 호출할 수도 있습니다.너비와 높이 두 속성은 iFrame의 너비와 높이를 결정하는 데 사용됩니다. 통합 콘텐츠가 iFrame의 지정된 크기보다 크면 스크롤 막대가 표시됩니다.
여는 태그와 닫는 태그 사이에 모든 콘텐츠를 정의할 수 있습니다. 그러나 iframe 요소를 인식하지 못하는 브라우저에서만 볼 수 있습니다.
HTM5에서는 주로 샌드박스 동작과 관련된 몇 가지 새로운 속성이 아이프레임과 관련하여 도입되었습니다.
브라우저에서 동일 출처 정책은 임베디드 웹사이트가 표시되는 동안에는 조작할 수 없도록 합니다. 이 보안 기능은 완벽한 의미가 있습니다. 하지만 항상 이상적인 것은 아닙니다. 그래서 HTML5에 샌드박스 속성이 도입되었으며, 이를 통해 외부 페이지에서 iFrame에 임베드된 콘텐츠에 어떤 권한을 할당해야 하는지 브라우저에 명시적으로 알려줄 수 있습니다.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
샌드박스 속성이 있는 iFrame은 임베드된 웹사이트의 DOM에 대한 액세스 권한이 부여되지 않습니다. 또한 스크립트를 실행하거나 쿠키를 저장할 수 없습니다. 이러한 제한은 다양한 샌드박스 값으로 재정의할 수 있습니다.샌드박스 속성에 다양한 값을 할당할 수 있습니다. 허용 양식은 임베드된 웹사이트가 양식을 통해 사용자로부터 정보를 얻을 수 있도록 허용합니다. 사용자는 양식이 현재 페이지에서 생성된 것이 아니라는 사실을 인지하지 못합니다.
반면 허용-일부 출처를 지정하면 임베드된 웹사이트는 동일한 호스트에서 시작된 것처럼 취급됩니다. 이 값은 동일 출처 정책을 취소합니다.allow-top-navigation 값은 임베드된 콘텐츠가 최상위 탐색 컨텍스트의 콘텐츠를 변경할 수 있도록 허용합니다.
그리고 allow-script가 있습니다. 이 값을 사용하면 임베드된 웹사이트에 임베딩 페이지를 조작할 수 있는 JavaScript가 포함될 수 있습니다.
다음은 해당 샌드박스 인스트럭션의 예시입니다.
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
여러 값을 지정할 수도 있습니다. 이 경우 공백으로 구분해야 합니다. 다음은 또 다른 예시입니다:
<iframe sandbox="허용-동일 출처 허용-양식 허용-스크립트" src="http://www.psd-tutorials.de/"> </iframe>
아이프레임은 일반적으로 외부 콘텐츠를 포함하도록 설계됩니다. 또는 이러한 콘텐츠를 포함할 수도 있습니다.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
이 속성은 많은 기능을 제공합니다. 달리 정의하지 않는 한, 포함된 문서의 참조 대상은 iframe 요소가 정의된 브라우저 창에 표시됩니다. (일반 임베딩의 경우 링크 타깃은 별도로 정의하지 않는 한 iFrame 창에 표시됩니다).심리스 기능은 현재 Google Canary, 즉 이 브라우저의 개발자 버전에서만 지원됩니다.
다른 효과는 스타일시트에 관한 것입니다. 포함된 파일의 스타일시트가 포함된 문서에도 적용되기 때문입니다. (단, 일반 포함에는 스타일시트 사양이 적용되지 않습니다).
또 다른 새로운 속성이 추가되었습니다. srcdoc을 사용하면 포함할 콘텐츠를 직접 정의할 수 있습니다. 다음 예시를 살펴보세요:
<iframe sandbox="허용-동일 출처 허용-양식 허용-스크립트" seamless="원활한" srcdoc=" <script> top.location.href=" http://www.psd-tutorials.de/" </script>"> </iframe>
이 경우 포함할 파일을 지정하는 데 사용되는 src 속성이 누락되었습니다.
srcdoc을 통해 지정된 콘텐츠는 타사 서버에서 가져온 것처럼 취급됩니다. 따라서 동일 출처 정책의 적용을 완전히 받습니다. 이 동작은 예를 들어 스크립트 정의와 관련하여 흥미롭습니다. 모든 HTML 및 JavaScript 코드가 허용됩니다. 그러나 거꾸로 쉼표와 앰퍼샌드 기호는 각각 & amp;quot; 및 & amp;로 명명된 문자로 설명해야 합니다.
여기에서 직접 페이지를 정의하여 원하는 콘텐츠를 출력할 수도 있습니다.
<iframe sandbox="허용-동일 원본 허용-양식 허용-스크립트" seamless="원활한" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.en</title> </head> <body> <p>...</p> </body> </html>"> </iframe>
참고로, 완전한 HTML 파일일 필요는 없습니다. 다음과 같은 것도 가능합니다:
<iframe sandbox="허용-동일 원본 허용-양식 허용-스크립트" seamless="원활한" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
브라우저에서는 다음과 같이 표시됩니다:
이것은 스크립트 등이 없는 일반적인 HTML 구문입니다.
이전에 시각적 디자인에 사용되었던 속성에 대한 몇 가지 참고 사항: 스크롤, 여백폭, 여백높이와 같은 속성은 더 이상 HTLM5에서 허용되지 않습니다. 이러한 속성은 CSS로 대체됩니다.
