※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.
iframe이란?
웹 페이지 안에 별도의 페이지나 동영상, 지도 등의 외부 콘텐츠를 삽입하여 표시하기 위한 HTML 태그이다.
iframe 사용예
웹 페이지에서 외부 사이트의 정보를 원본 콘텐츠와 동일하게 표시하거나 여러 외부 사이트를 콘텐츠로 병렬로 표시할 수 있다.
예를 들어 SNS에서 콘텐츠에 대한 최신 정보를 발신하고 있다면, 웹 페이지에 해당 SNS의 정보를 포함하여 새 피드를 대체 할 수 있다. Instagram 같은 사진이 메인 SNS라면 카탈로그 대신 표시할 수도 있다.
iframe의 주의점
적절한 디자인의 어려움
iframe을 통해 읽어들인 web 페이지의 디자인을 변경하기 위해서, 읽어들인 곳의 정보를 수정하거나 설치한 페이지에 JavaScript을 설정해야하는 경우가 많다. 또한 로드한 정보가 표시할 수 있는 범위보다 크면 불편한 사이트가 된다.
SEO의 관점에서 역효과 가능성이 존재
iframe을 이용했다고 해서 SEO의 순쉬 상승으로 연결되지 않는다. 오히려 떨어지는 경우도 존재한다. 그 이유는 사용자가 사용하는 브라우저나 환경에 의해 디자인이 무너지면 페이지가 인식되지 않는 경우가 발생하기 때문이다.
또한 원래 iframe은 head 태그 안에 작성하는 것이 권장되지 않는 태그이다. 태그를 적절히 기재하지 않으면 로딩 시점이 달라져 SEO 평가에 큰 영향을 미칠 수 있다 예를 들어 title이나 meta description 앞에 iframe 삽입하면, 로드된 페이지의 정보를 전혀 다른 것으로 구글에 전달할 가능성이다. 실수로라도 head 태그 안에 삽입하지 않도록 주의해야한다.
iframe 태그 사용법
<iframe></iframe>iframe 태그의 사용법은 위와 같다. 기본 속성은 scr나 srcdoc이다. srcdoc의 경우 특정 url이 아닌 파일 경로를 지정할 때 사용한다. 주로 sandbox라는 속성과 함께 사용한다.
scr와 srcdoc가 둘 다 사용되는 경우, 웹 페이지를 여는 브라우저가 srcdoc 속성과 일치하지 않으면 src 속성에 설명 된 URL이 대체로 표시되게 된다.
또한 iframe 속성에는 HTML4.01에서 HTML5로 전환하면서 폐지·추가된 속성이 있기 때문에 사용시에 주의해야할 속성이 존재한다.
인라인 프레임의 크기 변경
다음 요소를 입력하여 다른 웹 페이지를 표시하는 프레임의 크기를 조정할 수 있습다
- width 속성
<iframe src=”” width=””></iframe>프레임의 가로 폭을 지정한다. 속성 값에 숫자 또는 %를 입력한다.
- height 속성
<iframe src=”” height=””></iframe>프레임의 높이를 지정한다. 속성 값에 숫자 또는 %를 입력한다.
기타 속성 지정
프레임 크기 이외의 속성은 다음과 같다
- name 속성
<iframe src=”” name=””></iframe>이름을 지정할 수 있다.
- loading 속성
<iframe src=”” loading=””></iframe>브라우저에 대해서, 프레임의 로드 방법을 지정하는 속성이다.
속성치에는, 아래와 같은 것이 존재한다.
- eager: 가시 뷰포트 외부에 있는지 여부에 관계없이 설치된 웹 페이지를 로드할 때 인라인 프레임의 내용을 로드 (기본값)
- lazy : 표시가 가능해지고 나서 인라인 프레임의 내용을 로드하는 설정
보안 대책으로 할 수 있는 작업 제한
HTML5 이후, 악성코드에 의한 바이러스 감염 등에 대한 대책으로서, 송신하는 데이터에 제한을 추가해, 로드처의 JavaScript등을 원칙 작동시키지 않게 되었다.
- referrerpolicy 속성
<iframe src=”” referrerpolicy=””></iframe>설치한 Web 페이지의 정보에 대해, 로드처의 Web 페이지에 송신하는 데이터를 지정하는 속성이다.
속성으로 설정할 수 있는 것들로는 다음과 같은 것이 있다.
- no-referrer-when-downgrade : RSSL / TLS를 사용하여 HTTPS로 시작하는 로딩 대상 만 설치된 웹 페이지의 정보를 송신 (기본값)
- no-referrer: 설치한 웹페이지의 정보를 전송하지 않음.
- origin: 설치한 웹 페이지의 정보 중 origin(스키마, 호스트 이름, 포트 번호)만 전송.
- same-origin: 동일한 origin 에만 설치한 웹 페이지의 정보를 송신.
- origin-when-cross-origin: origin 이 다른 로딩에 대해서는 설치한 웹 페이지의 정보 중 origin만 전송. 동일한 origin로드할 경우 전체 URL을 전송.
- strict-origin: 보안 수준이 높은 HTTPS로 시작하는 로드 대상에 origin만 전송. 로드 대상의 안전성이 설치된 웹페이지보다 뒤떨어지는 경우는 송신하지 않음.
- strict-origin-when-cross-origin: origin이 다르고 보안 수준이 높은 HTTPS로 시작하는 로드 대상으로 origin만 송신. 동일한 origin을 로드할 경우 전체 URL을 전송.
- sandbox 속성
<iframe src=”” sandbox=””></iframe>로드 대상의 웹 페이지가 할 수 있는 것에 제한을 추가해, 보안 높이는 속성이다.
sandbox 자체의 기능은 JavaScript를 움직이지 않게 하거나 API와의 소통을 저지하는 것이지만, 속성의 값과 조합하는 것으로, 지정한 내용의 움직임을 허용하는 효과가 있다.
속성 값은 다음과 같다.
- allow-downloads: 사용자의 조작에 의한 다운로드가 가능.
- allow-downloads-without-user-activation: 사용자 작업 없이 다운로드가 발생하도록 허용.
- allow-same-origin: 로드할 문서를 설치한 페이지의 문서와 동일한 origin 문서로 사용할 수 있다.
- allow-forms: 로드 대상이 양식을 제출하도록 허용하고 정보를 제출할 수 있다.
- allow-popups: 로드할 팝업을 표시할 수 있다.
- allow-scripts: 로드 대상이 자바스크립트(팝업 제외)를 실행할 수 있다.
- allow-modals: 모달 창을 연다.
- allow-orientation-lock: 화면 방향을 lock할 수 있다.
- allow-pointer-lock: Pointer Lock API(en-US)를 사용할 수 있다.
- allow-presentation: 프레젠테이션 세션(en-US)을 시작할 수 있다.
덧붙여 지금까지 소개한 각각의 속성은, 많은 경우에서 다음와 같이 조합해 사용되고 있다.
<iframe src=”” width=”” height=”” sandbox=”allow-〇〇”></iframe>
참고자료
'IT > WEB' 카테고리의 다른 글
| [Vue3] Vue 경험자를 위한 Vue3 스타트 가이드라인 (0) | 2023.09.06 |
|---|---|
| [Vue3] Vue3의 Composition API (0) | 2023.09.03 |
| [CSS] Scoped CSS에 있어서의 CSS 설계 방법 (0) | 2023.08.21 |
| Atomic Design을 그만두고 디렉토리 구조를 바꾼 이야기 (0) | 2023.07.30 |
| [Spring] @Autowired (0) | 2023.07.09 |