iframe 높이 자동 조절, 이제 CSS만으로 될까?

외부 문서가 크기 공유를 허용해야 한다

iframe 높이 자동 조절을 위해 내부 높이를 측정하고 postMessage로 보내던 코드를 줄일 길이 생겼다. 9월 22일 안정 버전으로 나온 Chrome 154는 내부 콘텐츠 크기에 맞춰 iframe을 늘리는 기능을 지원한다. 다만 부모 페이지에 CSS 한 줄을 추가하는 것만으로 모든 외부 임베드가 바뀌지는 않는다.

내부 문서의 크기 공유 설정이 필요하기 때문이다. 다른 회사의 댓글·문서 서비스를 불러온다면 그 서비스가 먼저 허용해야 한다. 부모 사이트만 수정할 수 있는 개발자에게는 이 조건이 도입 여부를 가르는 기준이다.

반대로 부모와 자식 문서를 모두 관리한다면, 브라우저가 측정한 콘텐츠 크기를 레이아웃에 연결할 수 있다. frame-sizing은 이때 어느 방향의 크기를 콘텐츠에서 가져올지 정한다. 세로로 늘어나는 댓글 창에는 content-height가 맞는다.

부모에는 CSS, 내부 문서에는 초기 meta를 넣는다

부모 페이지는 iframe의 너비를 정하고 높이를 콘텐츠에 맡긴다. 아래는 기존 480px 높이를 대체값으로 두고, 지원하는 브라우저에서만 새 방식을 적용하는 예시다. 480px은 서비스에 맞춰 바꿀 값이다.

.embed {
  width: 100%;
  height: 480px;
}
@supports (frame-sizing: content-height) {
  .embed {
    height: auto;
    frame-sizing: content-height;
  }
}

iframe 안에서 열리는 문서의 head에는 부모 출처를 허용하는 meta를 넣는다. https://publisher.example은 실제 부모 사이트 출처로 바꿔야 한다.

<meta name="responsive-embedded-sizing"
      content="allow-origins=https://publisher.example">

Chrome의 구현 안내에 따르면 이 meta는 내부 문서가 로드된 뒤 동적으로 추가하는 방식으로는 동작하지 않는다. 여러 부모 출처를 허용할 때는 공백으로 나열한다. 크기 공유 허용은 어느 사이트가 문서를 임베드할 수 있는지 정하는 CSP의 frame-ancestors와 역할이 다르다.

댓글을 추가했다면 내부에서 requestResize를 호출한다

새 기능이 내부 문서의 모든 레이아웃 변화를 계속 감시하는 것은 아니다. requestResize 문서에 따르면 최초 크기는 DOMContentLoaded와 load 때 보고된다. 그 뒤 댓글을 더 불러오거나 패널을 펼쳤다면 내부 문서가 새 크기를 알려야 한다.

내용 변경을 반영한 뒤, 해당 iframe 안의 코드에서 다음 호출을 실행하는 방식이다.

if ("requestResize" in window) {
  window.requestResize();
}

이 코드를 부모의 최상위 창에서 실행하면 NotAllowedError가 발생한다. 자식 문서에 허용 meta가 없어도 같은 예외가 난다. 반면 자식 설정은 맞지만 부모가 frame-sizing을 지정하지 않았다면 예외 없이 프레임 크기가 그대로일 수 있다. ‘호출이 성공했는데 높이가 안 변한다’면 양쪽 설정을 따로 확인해야 한다.

기존 리사이저를 지울 수 있는 범위를 정한다

새 CSS가 지원되는 것과 외부 서비스가 크기 공유에 동의한 것은 별도 조건이다. @supports가 참이어도 자식 문서가 참여하지 않으면 콘텐츠 높이 조절이 성립하지 않는다. 따라서 공급자의 지원 여부를 확인한 임베드부터 전환하는 편이 맞다.

미지원 브라우저에는 고정 높이나 기존 메시지 기반 리사이저를 남긴다. MDN은 관련 기능을 아직 폭넓게 사용 가능한 Baseline으로 표시하지 않는다. 자동 높이 적용 후에도 내부 문서가 늦게 로드되며 아래 콘텐츠를 밀어낼 수 있으므로, 특히 첫 화면에 놓인 iframe은 로딩 전후의 배치까지 살펴야 한다.

새 기능의 이점은 두 페이지가 주고받던 높이 계산을 브라우저가 맡는다는 데 있다. 부모와 자식을 모두 수정할 수 있고 동적 갱신까지 연결한 임베드라면 도입할 수 있다. 외부 문서를 고칠 수 없다면 CSS만 바꿔 문제를 끝낼 수는 없다.