[Vue] iframe 태그에서 동적인 src 속성값을 사용할 경우, 뒤로 가기 안되는 버그

업무 중 만난 버그를 해결한 과정을 작성한 글입니다.

이슈

회사 프로젝트는 Vue 기반으로 SPA 형식으로 되어 있습니다. 비디오 콘텐츠를 다루는 서비스로 웹페이지에서는 iframe 태그를 이용해 미리보기 기능을 제공하고 있습니다.

미리보기에서는 다양한 인코딩 프로파일로 영상을 확인할 수 있으며 인코딩 프로파일 변경시 다른 콘텐츠 url를 iframe src 속성값으로 변경하게 됩니다.

이때 인코딩 프로파일 변경 후 브라우저 뒤로가기 버튼 클릭시 동작하지 않고 현재 페이지에 머물러 있는 버그가 발생했습니다.

원인

iframe은 그대로 사용하고 src 속성값만 바꾸면 최근에 사용한 src 속성값을 브라우저 window.history 스택에 쌓게 됩니다. 따라서 그 후에 브라우저 뒤로가기 버튼 클릭시 history 스택 가장 위에 있던 걸 pop하게 되기 때문에, iframe이 스스로 navigate됩니다.

실제로 하나의 iframe 태그에 src만 바꾼채 사용하면 window.history length가 증가하는 것을 볼 수 있습니다.

해결

iframe 태그에 동적인 url 값을 key 속성으로 부여해 매번 iframe을 새롭게 mount합니다. Vue에서는 key 값을 이용해 두 렌더링 간에 요소가 논리적으로 동일한지 판단하게 됩니다. 이때 key값이 일치하지 않게 되면 umount 후 새롭게 mount 되기에 iframe이 브라우저 history 스택에 더이상 push되지 않습니다.

참고

https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/