콘텐츠 높이에 맞춰지는 iframe

AI 요약

결제 폼이나 댓글 위젯을 iframe으로 넣으면 고정 높이가 골칫거리가 됩니다. 높이를 크게 잡으면 폼 아래에 빈 공간이 생기고, 작게 잡으면 페이지 안에 스크롤바가 하나 더 나타납니다. 화면 너비가 바뀌거나 폰트·이미지·오류 메시지가 늦게 로드될 때도 높이를 다시 맞춰야 합니다.

기존 방식: 양쪽 페이지가 JavaScript로 통신

부모 페이지는 교차 출처 iframe 내부를 들여다볼 수 없습니다. 그래서 임베디드 페이지가 콘텐츠 높이를 측정해 postMessage로 보내고, 부모 페이지는 메시지의 출처와 종류를 확인한 뒤 iframe의 CSS 높이를 바꿨습니다. 이 방식은 화면 회전이나 너비 변경에 따른 재측정, 동적 콘텐츠 처리, 여러 iframe을 구분할 식별자까지 챙겨야 합니다. 임베디드 페이지가 협조하지 않으면 결국 높이를 짐작해야 합니다.

새 방식: CSS 속성, 메타 태그, 함수 호출

부모 페이지의 iframe에 frame-sizing: content-height를 지정하면 브라우저가 콘텐츠 높이를 측정해 iframe 크기를 맞춥니다. 임베디드 페이지는 HTML의 <head>에 responsive-embedded-sizing 메타 태그를 넣고, allow-origins 값으로 허용할 사이트를 지정해야 합니다. 메타 태그는 문서가 처음 로드될 때부터 있어야 하며, JavaScript로 나중에 추가해도 적용되지 않습니다.

콘텐츠가 로드된 뒤에도 바뀐다면 임베디드 페이지가 window.requestResize()를 호출해 브라우저에 다시 측정하도록 요청합니다. 예를 들어 오류 메시지가 표시되거나 폼 단계가 바뀌거나 댓글이 더 로드되는 시점에 호출합니다. JavaScript가 완전히 사라지는 것은 아니지만, 높이 전달용 메시지와 부모 페이지의 이벤트 처리 코드는 필요하지 않습니다. frame-sizing은 content-width, content-inline-size, content-block-size도 지원하며, 보통은 content-height를 쓰면 됩니다. max-height: 80vh처럼 크기 제한을 함께 둘 수도 있습니다.

결제 서비스에는 제공업체 협조가 필요

결제 폼은 입력 오류, 결제 수단 전환, 저장된 카드 목록 표시 등으로 높이가 자주 달라집니다. 하지만 상점은 부모 페이지의 CSS만 관리하고, iframe 안쪽 페이지는 결제 제공업체가 관리합니다. 제공업체가 메타 태그와 허용 출처를 설정하고 콘텐츠 변경 때 requestResize()를 호출해야 기능이 작동합니다. 따라서 확인할 점은 Chrome 지원 여부만이 아니라 결제 제공업체의 지원 여부입니다. 댓글, 문의 양식, 뉴스레터 가입, 예약 위젯도 같은 방식으로 활용할 수 있습니다. srcdoc으로 직접 작성하는 HTML 미리보기나 코드 데모는 임베디드 콘텐츠를 직접 제어하므로 적용하기 쉽습니다.

배포 전 확인 사항

현재 지원 브라우저는 Chromium뿐이며 Firefox와 Safari는 지원하지 않습니다. 기본 높이를 지정하고 @supports (frame-sizing: content-height) 조건에서만 콘텐츠 높이 맞춤을 적용하는 점진적 향상이 권장됩니다. 임베디드 페이지에서도 'requestResize' in window를 확인해 기존 postMessage 코드를 대체 경로로 남길 수 있습니다.

iframe은 페이지가 로드된 뒤 높이가 커지므로 아래 콘텐츠가 밀릴 수 있습니다. 첫 화면에 iframe이 있다면 Core Web Vitals에 영향을 줄 수 있어 적절한 min-height를 두는 편이 낫습니다. allow-origins=*는 특별한 이유 없이 쓰지 말아야 합니다. 높이 차이만으로도 로그인 상태 같은 정보를 부모 페이지가 추측할 수 있기 때문입니다. 필요한 사이트만 허용하고, 누가 페이지를 임베드할지 제어하는 CSP의 frame-ancestors 규칙도 함께 고려해야 합니다.

Lobsters 반응

• @vbernat — HTML 페이지에 콘텐츠를 바로 삽입하려고 JavaScript를 피하려면 아직 갈 길이 멉니다. 페이지 일부를 갱신하려 할 때 iframe은 여전히 너무 격리돼 있습니다.

원문: alfy.blog / 번역·요약: Trawling