본문 바로가기

Browser/Chrome

[Chrome] 다른 출처 iframe에서 alert(), confirm(), prompt 기능 제외

최근에 Chrome이 업데이트하면서 해당 버전에 cross-origin의 iframe에서 alert나 confirm 같은 팝업창 기능이 제외된다고 발표했다. 

iframe이 무엇인지, 그리고 왜 해당 기능들이 제외 되는지를 알아보려고 한다. 

 

iframe이란?

iframe은 inline frame의 약자로 현재 페이지에 다른 HTML 페이지를 삽입할 수 있는 HTML 태그이다. 

해당 태그의 장점은 이런 방법으로 다른 페이지를 현재 페이지에 포함하게 되면 다른 페이지가 업데이트될 때 현재 페이지에 그대로 반영된다는 것이다. 따로 추가적인 작업을 할 필요가 없다. 

iframe으로 많이 사용되는 경우는 다음과 같다: 광고베너, 페이스북 좋아요 버튼, 유튜브 영상, 구글/네이버 지도, 등등

 

해당 결정에 대한 배경

Chrome 브라우저는 iframe이 JavaScript 대화창(dialog)을 열 수 있는 기능을 제공한다. 

이때 만약 iframe의 출처가 메인 페이지와 같다면 "<URL> says..."라는 메시지를, 출처가 다르다면 (cross-origin) "An embedded page on this page says..."라는 메시지를 띄운다. 

이러한 형식의 대화창 메시지는 UX가 직관적이지 않아 혼란스럽고 이것을 이용해서 다른 사이트인 척 대화창을 띄우는(spoofing) 사이트들이 생기게 되었다. 

 

Chrome Platform Status에 올라온 해당 기능 제외 건

 

alert, confirm, prompt 기능 제외

[출처: Chrome Platform Status]

현재 JavaScript의 대화창은 브라우저 자체의 UI처럼 보이기 때문에 사용자들이 헷갈릴 수 있는 여지가 있다. 

이러한 점 때문에 특정 메시지가 마치 Chrome 브라우저에서 보내는 것처럼 속이는 사이트들이 생겼다. 

Chrome은 이러한 눈속임에 넘어가는 것을 줄이기 위해서 메시지의 출처를 "<호스트>..."라는 문구를 메시지 앞에 붙여서 띄운다. 

이러한 메시지가 다른 출처에서 올 때면 Chrome은 해당 사실을 더 자세하게 설명하려고 하는데 이는 더 혼란스러운 UI를 야기한다. 

 

따라서 아래의 이유들 때문에 다른 출처의 iframe에서 대화창 기능들이 제외되었다.

1. 다른 출처의 iframe에서 대화창을 띄우는 기능이 많이 사용되고 있지 않음

2. JavaScript의 대화창 기능은 사이트의 주요 기능을 제공하기 위해 필수 요소가 아님

3. 대화창의 출처를 신뢰성 있게 설명하기 어려움

 

이러한 조치는 대화창을 더욱 심플하게 만든다. 

그 이유는 출처를 표시하는 부분을 제외하고 대화창을 페이지 컨텐프 중간에 넣어 브라우저가 아닌 페이지에 종속 된다는 것을 나타낼 수 있기 때문이다. 

 

마무리

iframe 태그는 많이 사용되고 있지 않아서 최근에 개발된 시스템이나 사이트는 문제가 없겠지만,

레거시 시스템이나 편의성을 위해서 iframe을 사용한 서비스의 경우에는 문제가 발생할 수 있다. 

따라서 이러한 경우에는 원하는 방식으로 잘 동작하는지 확인이 필요하다.

 

 

References

Chrome Platform Status