최근에 Firefox쪽에서 하나 업데이트를 예고 했습니다. 곧 img 태그에만 존재하던 lazy-loading이 iframe에도 적용되는데요. 성능적인 장점은 분명히 있겠지만, img와 달리 XSS의 리스크가 높은 iframe의 로드 시점을 통제할 수 있는 형태라 재미있는 이슈가 나올지 기대되기도, 반대로 또 걱정되기도 합니다.
<iframe loading=lazy>
Lazy loading
Lazy loading에 대해 간략히 소개하자면 웹 브라우저가 보지 않은 리소스는 로드하지 않아 사이트의 렌더링 속도를 올리는 방법입니다. 사용자가 스크롤 등을 통해 해당 지점에 진입하려는 시점에서 리소스 로드가 시작되기 때문에 이미지가 많은 경우 초기 로딩을 단축시킬 수 있습니다.
<img src="1.png">
<img src="2.png" loading=lazy>
Load event
MDN 문서를 보면 이런 부분이 존재합니다.
The load event fires when the eagerly-loaded content has all been loaded
페이지가 eagerly-loaded 되었을 때 load event를 처리한다는 이야기인데, 결국 window가 onload 되어도 iframe 또한 아직 대기 상태일 수 있다는 의미입니다.
How to enable now?
Nightly Firefox에서 about:config > dom.iframe_lazy_loading.enabled 값을 true로 바꿔주시면 테스트해보실 수 있습니다.
Closing Thoughts
아직 뚜렷한 공격 벡터가 있는건 아니지만, 워낙 공격에 활용성이 좋은 태그라 주의깊게 살펴볼 필요는 있을 것 같습니다. 개인적으로 몇가지 생각난 아이디어들이 있긴한데, 시간날 때 이것저것 테스트해보고 재미있는게 나온다면 추가로 공유드리겠습니다 :D