[HTML/CSS/JavaScript] pointer-events: none; 처리 시 주의할 점

html a 태그에는 disabled 속성이 따로 적용되지 않는다.

 

보통의 경우 css 의 pointer-events 메소드를 사용한다.

a.disabled {
  pointer-events: none;
  cursor: default;
}

 

그러나, 이 경우는 시각적으로만 접근을 못하게 할 뿐 onclick 에 메소드가 존재할 경우 해당 메소드가 그대로 노출된다.

브라우저에서 개발자 도구 콘솔로 해당 메소드를 입력할 경우 그대로 접근할 위험이 있다.

 

 

pointer-events: none; 스타일은 해당 엘리먼트가 마우스 이벤트를 받지 않도록 막는 CSS 속성이다. 그러나 이는 단지 시각적으로 클릭을 막을 뿐이며, 실제로는 JavaScript에 의해 연결된 이벤트 핸들러가 여전히 실행될 수 있다.

이 취약점을 막기 위해서는 다음과 같은 방법들이 있다:

1. 이벤트 리스너를 확인하여 클릭을 무시: JavaScript 코드에서 해당 버튼에 대한 클릭 이벤트 리스너를 추가하고, 버튼이 pointer-events: none; 속성을 가지고 있는지 확인한 후, 클릭 이벤트를 무시하도록 처리한다.

   document.getElementById('yourButtonId').addEventListener('click', function (event) {
       if (this.style.pointerEvents === 'none') {
           event.preventDefault();
           event.stopPropagation();
           // Optional: 추가적으로 원하는 작업 수행
       } else {
           // 클릭 이벤트에 대한 원래의 처리 로직
       }
   });​

2. 이벤트 핸들러를 제거: 이벤트 핸들러를 제거하여 완전히 클릭을 무효화할 수 있다. 이는 pointer-events: none;이 적용된 엘리먼트에 대한 클릭 이벤트를 완전히 막을 수 있다.이렇게 하면 이벤트 핸들러가 제거된 클론 버전의 버튼이 원래의 버튼 자리에 올라가며, 클릭 이벤트가 무효화된다.

   var button = document.getElementById('yourButtonId');
   var clonedButton = button.cloneNode(true);
   button.parentNode.replaceChild(clonedButton, button);​

3. 클릭 이벤트를 검사하는 함수 작성: 클릭 이벤트를 처리하는 함수를 작성하여 해당 함수 내에서 pointer-events를 확인하고, 이에 따라 작업을 수행하도록 할 수 있다.

function handleClick(event) {
    if (event.target.style.pointerEvents !== 'none') {
        // 클릭 이벤트에 대한 원래의 처리 로직
    } else {
        // pointer-events: none;일 때 수행할 작업
    }
}

document.getElementById('yourButtonId').addEventListener('click', handleClick);

 

 

어떤 방법을 선택할지는 상황과 요구 사항에 따라 다를 수 있다. 가장 적절한 방법을 선택하여 보안을 강화해보자.