우리는 인터넷을 하다보면, 아래의 그림처럼 팝업이 차단되는 경우가 많이 있다.
브라우저가 팝업을 여는 동안 해당 페이지가 사용자를 괴롭히고 있다고 판단 하는 경우에 노출이 된다.자 그러면 괴롭히고 있다고 판단한 경우라고 하였는데, 그러면 그것이 무엇일까?
사용자 몰래 띄운 팝업
사용자 몰래 팝업을 띄우는 거는 꽤나 많이 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
window.open('https://www.google.com', '_blank')
</script>
</head>
<body></body>
</html>
위의 코드는 아무런 맥락 없이 해당 페이지에 들어가자 팝업을 열게 하는 코드이다. 저런 상황을 팝업을 차단 하지 않게 된다면, 해당 페이지가 새로운 팝업을 여는 페이지를 열고 또 그페이지는 또 새로운 페이지를 여는 페이지를 열고 계속 반복하게 된다면 사용자를 괴롭히는 것이 될 수 있을 것이다.
공공 사이트에서 예전에 공지사항을 노출시키기 위하여 이러한 행위를 많이 했었고 해당 팝업들은 열심히 차단당했다.
즉 우리는 해당 페이지를 열기 위해서 유저의 행위를 받아야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script>
function openNewPage() {
window.open('https://www.google.com', '_blank')
}
</script>
</head>
<body>
<button onclick="openNewPage()">새 창 열기</button>
</body>
</html>
한번에 많은 팝업 열기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script>
function openNewPage() {
window.open('https://www.google.com', '_blank')
window.open('https://www.google.com', '_blank')
window.open('https://www.google.com', '_blank')
window.open('https://www.google.com', '_blank')
window.open('https://www.google.com', '_blank')
window.open('https://www.google.com', '_blank')
window.open('https://www.google.com', '_blank')
window.open('https://www.google.com', '_blank')
}
</script>
</head>
<body>
<button onclick="openNewPage()">새 창 열기</button>
</body>
</html>
한 번에 여러 페이지를 여는 것 또한 사용자를 괴롭히는 행위일 것이다. 따라서 처음 하나의 window.open 만 실행 후 나머지는 차단을 당하게 된다.
데이터를 외부에서 가져오는 경우
해당 내용은 브라우저 별로 사용하는 라이브러리 별로 다른 상황이라서 주의 깊게 확인하길 바란다.
모든 라이브러리에 대해서 확인이 된 것도 아니고, 모든 상황에서 이 API만 사용하면 해결 할 수 있어! 이러한 것은 없다. 위의 상황에서 firefox를 사용하였을때에는 fetch의 경우에만 데이터를 가져온 후 window.open을 팝업 차단 없이 사용 할 수 있었다. 이것은 브라우저 버전이 올라가 수정이 될 수도 있기 때문에 믿어서는 안된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function xhttpOpenNewPage() {
const xhttp = new XMLHttpRequest()
xhttp.onload = function () {
window.open('https://www.google.com?XMLHttpRequest', '_blank')
console.trace("xhttpOpenNewPagee")
}
xhttp.open('GET', '.')
xhttp.send()
}
function fetchOpenNewPage() {
fetch('.').then((x) => {
window.open('https://www.google.com?fetch', '_blank')
console.trace("fetchOpenNewPage")
})
}
function axiosOpenNewPage() {
axios.get('.').then((x) => {
window.open('https://www.google.com?axios', '_blank')
console.trace("fetchOpenNewPage")
})
}
function jqueryOpenNewPage() {
$.get('.', function (data, status) {
window.open('https://www.google.com?$', '_blank')
console.trace("jqueryOpenNewPage")
})
}
</script>
</head>
<body>
<button onclick="xhttpOpenNewPage()">XMLHttpRequest 새 창 열기</button>
<button onclick="fetchOpenNewPage()">fetch 새 창 열기</button>
<button onclick="axiosOpenNewPage()">axios 새 창 열기</button>
<button onclick="jqueryOpenNewPage()">jquery 새 창 열기</button>
</body>
</html>
그렇다면 어떻게 해결 할 것인가?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function axiosOpenNewPage() {
const newWindow = window.open('about:blank', '_blank')
axios.get('.').then((x) => {
newWindow.location.href = 'https://www.google.com'
})
}
</script>
</head>
<body>
<button onclick="axiosOpenNewPage()">axios 새 창 열기</button>
</body>
</html>
위의 경우가 가장 간단한 해결방법일 것이다. 데이터를 가져오기 전에 미리 window.open을 하여 팝업 차단을 막고, 데이터를 가져온 후 페이지를 이동 혹은 데이터를 채우는 것이다.
개인적으로 이러한 방법 보다는 브라우저 만드시는 분들이 합의 하여 블락 할 것인지 말 것인지 결론 좀 봤으면 좋겠다.
댓글
댓글 쓰기