JavaScript 대화상자 기록
자바스크립트는 1995년에 도입되었으며 최초의 자바스크립트 버전에는 alert()
, confirm()
, prompt()
이라는 창 객체에 메서드가 있었습니다.
동기 API는 당시의 JavaScript에 맞지만 최신 브라우저에서는 문제가 됩니다. JavaScript 엔진은 사용자 응답을 받을 때까지 일시중지해야 하므로 JavaScript 대화상자는 앱 모달입니다. 또한 대화상자는 앱 모달이기 때문에 일반적으로 (아쉽게도) 사용자 에게 해를 끼치는 데 사용됩니다.
이 때문에 JavaScript 대화상자를 사용하지 않는 것을 강력히 권장합니다.
대안
대화상자 교체에는 다양한 옵션이 있습니다.
alert()/confirm()/prompt()
에는 여러 가지 옵션이 있습니다. 사용자에게 일정 (예: 캘린더 사이트)을 알리려면 Notifications API를 사용해야 합니다. 사용자 입력을 얻으려면 HTML <dialog>
요소를 사용해야 합니다. XSS 개념 증명에는 devtool의 console.log(document.origin)
를 사용할 수 있습니다.
onbeforeunload
의 경우 이미 신뢰할 수 없다는 점에 유의해야 합니다. 일리야 그리고릭은 "모바일 플랫폼에서 실행되는 pagehide
, beforeunload
, unload
이벤트에는 의존할 수 없습니다"라고 지명했습니다. 상태를 저장해야 하는 경우 Page Visibility API를 사용해야 합니다.
변경사항
페이지에서 onbeforeunload
문자열을 지정하는 기능이 Chrome 51에서 삭제되었습니다.
(또한 Safari 9.1 및 Firefox 4에서 삭제되었습니다.)
alert()/confirm()/prompt()
대화상자가 앱 모달에서 탭 전환 시 닫히도록 변경되었습니다. 이 변경사항은 2017년 5월 초에 모든 채널에서 적용되었으며
beforeunload
대화상자에서 Chrome 60부터 대화상자가 표시되려면 페이지에서 사용자 동작이 필요합니다.
이렇게 해도 beforeunload
이벤트 전달은 변경되지 않습니다. 이렇게 하면 Chromium이 Firefox 44에 맞게 변경된 Firefox에 맞게 조정됩니다.
전체 화면에서 alert()/confirm()/prompt()
대화상자를 표시하면 Chrome 61부터 전체 화면이 사라집니다.
prompt()
대화상자는 탭을 활성화하지 않습니다. prompt()
가 백그라운드 탭에서 호출되면 호출이 즉시 반환되며 대화상자가 표시되지 않습니다.
이 변경사항은 2017년 5월 초부터 모든 채널에 적용되었습니다.
alert()
대화상자는 탭을 활성화하지 않습니다. alert()
가 백그라운드 탭에서 호출되면 호출이 즉시 반환됩니다. 탭은 표시기로 표시되며 사용자가 탭으로 전환하면 대화상자가 표시됩니다. 이러한 동작 변경은 Chrome 64부터 나타납니다.
confirm()
대화상자는 탭을 활성화하지 않습니다. confirm()
가 백그라운드 탭에서 호출되면 호출이 즉시 반환되며 대화상자가 표시되지 않습니다.
이러한 동작 변경사항은 Chrome 69부터 나타납니다.
이러한 변경으로 인해 사이트에서 대화상자를 사용하는 경우 영향을 받지 않도록 앞에서 언급한 대안을 사용하는 것이 좋습니다.