클라이언트에서 html 태그 속성 조작

0. 시작

---

앞에서 살펴본 jwplayer 이슈 중에 video태그에 controls를 클라이언트가 적접 조작하여 커스텀된 컨트롤바가 아닌 기본 컨트롤바를 띄울 수 있다. 이럴 때 어떤 사이드 이슈가 발생할지 예상할 수 없기 떄문에, 어떻게 대처할지 생각해보았다.

1. 분석

---

아래 사진은 넷플릭스 인터렉티브 비디오 "블랙미러 : 밴더너내치"에서 조작한 사진이다.
video태그를 찾아 controls 속성을 강제로 넣으면 빨간색 부분처럼 기본으로 제공되는 컨트롤바가 별개로 뜨면서 영상의 길이와 같은 정보가 노출된다. 평상시에는 중요하지 않은 이슈이기만 저렇게 인터렉티브 비디오일 경우 클라이언트에서 조작하여 원하는 영상 위치로 이동시킬 수 있지 않나싶다.

저런 기본 컨트롤바를 꼭 막아야하는 경우 어떻게 해야할까의 나의 답은 controls 속성이 추가될 경우 특정 이벤트를 발생시켜 비디오를 팅기는게 어떨까 생각했다.

2. 해결

---

특정 DOM 변경을 감시하고, 변경될 떄 이벤트처럼 callback 함수로 동작되는 javascript api이다.

사용법자체는 간단하기 떄문에 아래 샘플 코드를 보면 이해하기 쉽다.
아래 예제는 위에서 예로 들었던 video 태그에 controls속성이 추가되었을 때, alert을 띄우고 비디오 영상 주소를 지워 영상을 재생시킬 수 없게 하는 방식이다.

if(window.MutationObserver || window.WebKitMutationObserver) {
  videoMutationObserver();
}



function videoMutationObserver() {

  var nodeToObserve = document.querySelector('video');
  var callback = function(mutations, observer) {
    for (var index = 0; index < mutations.length; index) {
      var mutation = mutations[index];
      if (mutation.type === 'attributes' && mutation.attributeName == 'controls' ) {
        alert('비정상적인 동작입니다.');
        mutation.target.setAttribute('src', '');
        break;                          
      }
    }
    observer.disconnect();
  }
  const observer = new MutationObserver(callback);

  observer.observe(nodeToObserve, {
    attributes : true,
    attributeFilter : ['controls'],
    childList: false, // target node's children
    subtree: false // target node's descendants
  });
}

위 샘플 예제를 실행했을 때 모습이다.

ie브라우저 낮은 버전에서만 잘 체크되면 관련된 이슈를 손쉽게 처리할 수 있을 것 같다.